The more apps that I write (40 and counting), the more I learn that designing a beautiful and effective user interface is equally as important as having a great idea and using high-performance code. Several of my apps have competitors in the Windows Phone Store or Windows Store that are very similar to mine. In several cases, the competing apps have a better user interface, and look more professional and fun, and thus have more downloads and better ratings.
Here’s a great example: One of my first games, Dots Pro, provides very similar functionality to Dots Master. Dots Master, by Noam Behar, has great reviews for its solid graphic design and beautiful interface, and based on user reviews the design is a contributor to the app having higher average ratings than Dots Free. The higher ratings show higher user satisfaction, and in general drive more app downloads.
Dots Pro, Bernardo Zamora | Dots Master, Noam Behar |
Results I’ve seen after improving my design quality
I now take more time and dedicate more resources to creating better graphic design and more effective user interface in my new apps. These new apps generate more than 2x the number of downloads and have approximately 0.3 point higher user ratings than my previous apps. The improved design is one of the reasons for these results.
Below are two examples of my apps that have received many compliments for their graphic design:
Solitaire HD, Windows Phone, Bernardo Zamora
“Love this game! I have several games on my phone, but this is my "go - to" favorite. Very relaxing. I love the sounds when you send an ace up. Nice statistics setting. Love the fact that you can change the look of the cards.”
Backgammon Pro, Windows, Bernardo Zamora
”Realistic board, great sounds and animations when moving the pieces.”
An experiment
When I created Dots and Boxes, I also created a different version, with the same AI engine, but different look and feel. The second version, “Boxit!” used graphics, created mostly in PowerPoint, that were not polished, including the icon, which was of low quality.
I see that in the last 30 days “Dots Free” was downloaded 16x more than “Boxit!”
Dots Free, Bernardo Zamora | Boxit!, Bernardo Zamora |
Downloads last 30 days: 10,281 | Downloads last 30 days: 630 |
Steps I take to ensure my apps are well-designed with an effective user interface
Now when I build new apps, I invest a significant amount of time in the design and user experience, following these steps:
1) Conceptual graphic flow and design for the app– I build the conceptual design and high level flow
2) Once I’m happy with the design, where the flow is simple and the user interface is uncluttered, I start with the code, using placeholder graphics
3) Once the app has the core functionality running and I’ve confirmed the concept will work well, I identify the graphic concept I want to follow and design the screen layouts in detail. I seek professional assistance with the graphic design as my strength is coding. Resources you can consider:
- Get help from professional graphic designers to create graphic elements
- Purchase graphics assets
- Purchase all the sounds
- Integrate the graphics and sounds from all the sources into the code
- Invest time making final adjustments to all graphics and sounds so they work well together
4) In parallel, I finalize the code and make sure it is fully operational
5) Once the app works as expected, I start the optimization process, ensuring all animations are timed perfectly, and minimizing the size of all the images:
- Rightsizing to eliminate extra pixels (for example through tinypng.com)
- Compressing the images as much as possible
- Adjusting the animation, timing and flow to make sure the interface is very polished
6) Finally, I test for usability, using about 10 beta testers that can help catch obvious errors and that will give me honest and direct feedback. Frequently the feedback forces me to rethink the application flow or the user interface. Fixing the app takes time, but I’ve found it is worth doing as it will help make sure the app launches successfully. I test the app in a color-calibrated monitor, as well as in several different phones to ensure the UI looks as expected.
7) If I want additional testing, I publish in one country, get feedback, then publish in all the Windows Store and Windows Phone Store markets.
Resources available for your apps
As I’ve built apps for Windows and Windows Phone, I’ve assembled a list of resources that I wanted to share for your next projects.
- App rapid ‘conceptual design’: Microsoft Powerpoint and Sketchflow
- Image editing and optimization: Paint.net (free), Adobe Photoshop, Adobe Illustrator, TinyPNG.com (compress files)
- Image sources: istockphoto.com, shutterstock.com, 123rf.com, syncfusion metro icons
- Sound optimization: Audacity
- Graphic design outsourcing: 99designers.com, designcrowd.com
- Sound sources: soundrangers.com, soundsnap.com, sfxsource.com, freesound.org
- Tools: Telerik design templates, Silverlight phone controls, Blend
If you have any other tools or resources that you find useful for your apps, please share them in this blog.
Happy coding!