How to design a mobile app.

iPhone inbox design for the Mail.ru app


This is a designer's guide to the app design process.
Step-by-step approach and recommendations.

"Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.”

- Steve Jobs

Despite a popular believe that designer’s job ends when you hand the designs to the development team, it’s just the opposite. Designer isn’t just responsible for the look and the feel of the product, but also for the interaction between the product and its users.

In this post I will take a look into the steps to follow when a mobile designer is fully consumed by a project, working along side of the development team. I will also give some recommendations on the optimal format for such work.


Assessment of the tasks

Work on any product begins with an assessment of the tasks. Whether you are given a design brief, a technical summary or just an objective that’s yet to be discussed over email, you are given a task, that’s key. What is the correct way to go about assessing these tasks and extracting the necessary information?

1. Understand the details

The most important thing that you need to understand is the business goal. Each project has it’s own business goal: extra revenue channels, brand identify or simply a mobile version of one’s web product. It is most important to understand why you are working on the application - the design will be tied to the business goal.

2. Analyze your audience

If you put enough thought in analysis of the product’s audience, you will save yourself a lot of errors as well as boost your chances of impressing your audience. For example, if the business people are in your target group, then a flashy/cartoony application will probably be a bad idea. A clean-cut design will, likewise, not impress any children.

3. Compose use cases

Think about the most popular way that your application is going to be used. At this stage, think about a user persona and how this persona will be using the application. You will uncover a myriad of important things, which will help you design an outstanding application in the future.


Competitor Analysis

1. Search through blog content

Internet has a great number of sites, which compare products and opinions in various markets - why not spend a few hours studying these, so you could get expert’s opinions on the matter, as well as hear users’s voice, all without doing any testing yourself? Do that.

2. Explore the app store

Much like #1, spend some time analyzing the app store in which your applications will get published. It is hard to overestimate commentary and ratings of real users.

3. Give competitive products a try

No doubt you have already found the most interesting and most popular competitive applications. Don’t be lazy and spend a few bucks to buy them for a scrupulous evaluation. It’s imperative to understand the whole picture, composed of both, the opinions of others and on your own.


Search for inspiration and interface mechanics

1. Look at Scoutzie, Dribbble and Behance

Internet has a great number of sites, which compare products and opinions in various markets - why not spend a few hours studying these, so you could get expert’s opinions on the matter, as well as hear users’s voice, all without doing any testing yourself? Do that.

2. Stay up-to-date on recent articles and design concepts

Popular tech blogs often publish information about new mobile concepts and interesting thoughts by the experts. I recommend that you follow a few blogs of your choosing. Sometimes you will find interesting solutions for interface controls or additional useful functionality of which you haven’t thought yet.

3. Explore other devices and platforms


Even if you only work in iOS, don’t be afraid to look at other platforms - Android, Windows Phone or even MeeGo. Frequently you will see interesting mechanics, which could help in your own development.


Combine your findings

As a result of your search, you will inevitably end up with a mountain of articles, photos, screenshots and most important reviews. Now, put all of that away for a few days and then sit down and think, how could you combine the most successful mechanics and interfaces, ideas and concepts, while not forgetting to pay attention to whether users are praising or dissing these products. Could you do it? Great, let’s go on then.


Eliminate Overhead

1. Remove secondary functions.

As a result of your previous step, if all went well, you probably have created enough interface functions. However, not all of them will be useful. The first version of the product should have only the most important ones, and everything else could be saved for the consecutive releases.

2. Do your best on the primary functions.

Focus on the primary functions and polish them - all the critical functions of the product shall work perfectly. Spend as much time on this part as necessary, but remember to stay focus on the core product.

3. Compare with the original goal.

It’s really easy to get carried away while working on a design projects. As you’re doing the creative work, always keep in mind the business objective, the audience and the personas. If everything is going as originally planned, carry on. If not, now is a good time to correct the course.

4. Compare with the platform guidelines.

Spend some time to compare if your designs comply with the platform’s guidelines: corner radiuses, angle of light and shadows, font size and many other minor details that impact the look and feel of a product, many of these are very different between the platforms. Your goal should be to make the most beautiful and well functioning application ever known to mankind. Right? Then be sure to do the right thing.


Test the prototypes

1. Test the prototypes on your devices

If you want to maximize the user experience, it’s imperative to test your prototypes in the native environments. Ask yourself these questions. Are all the design elements arranged in a comfortable layout? Is it easy to reach all elements with your fingers? Is it still easy if you’re only using one hand? Does your hand block important elements as you hold the phone in the palm of your hand? ... etc. 

Answers to these and many other questions often cannot be easily answered while looking at the static images on your display. You can put this work together using special prototyping softwares and services or by using css3 and html5 capabilities, depends on your preferences and knowledge. At this point it’s important that you really polish all the touch areas - the user shouldn’t need to aim at targets as well as the interface shouldn’t interpret user’s touch falsely.

2. Give it a go, on multiple screens

It is often that case that your designs would look astonishingly on the screen of a high quality display, but the charm is all gone on the actual device. It is rare to happen on a Retina display, if your design is done for Retina, but porting a new design to older device models might change colors, graphic sizes, and the sharpness of icons. Trying the prototypes on actual devices would allow you to make necessary adjustments.


Focus on Details

1. Think through the animations

Animation is inseparable from great information systems, it helps to structure data and logical dependencies between them, as well as simply adds variety into the interfaces. Use simple animation where it is necessary - animation overload could make significantly harder to interpret the given information, leading to negative user experience.

2. Pick action sounds

This is a somewhat important part of the overall experience. Sounds, as animation, should only be triggered when they can help to enhance the user experience. It’s important that your sounds are also well recognizable - think about the Skype start sound, whenever you hear it, you immediately associate it with Skype. The simples way to get this right - just buy a set of sounds, on one of many creative marketplaces.

3. Add little pleasures

Think about pleasant little things that could enhance your application. For example, briefly substituting your notification panel with a clock won’t distract or annoy the user.


Beta test the product and perform the design review

1. Be an active participant in the development stage

Remember, as a designer, you’re responsible for the way the application is supposed to work, therefore, the more involved you are in the development stage, the better it is for the end product. Speed, size, algorithm design, all of these and many other aspects of development are on your shoulders, as much as on those of the developers; these features will impact the user’s impression. Don’t be lazy and attend technical brainstorming sessions, you will be able to help.

2. Participate in beta testing

It’s absolutely necessary to involve a designer in the product testing. Since the designer was the one to create the image of the application, this person will be able to intuitively feel, whether users are responding in the intended way. Furthermore, designer might catch some product imperfections, those which wouldn’t even register for developers.

3. Compare the developed product to the original designs

During the product testing stage, you should compare the application to the design at least a number of times - developers may implement things differently, whether by mistake or due to misunderstanding of your designs. Since every pixel counts, take screenshots of each screen and compare them to originals. Comparing margins, fonts, colors...etc. Final tests should be especially punctual, so your app is polished and ready to ship.

4. Don’t be afraid to append and change the product along the way

Should you get great ideas during the testing phase, that’s wonderful, that should happen. If so, think whether you can make this changes quickly and how critical they are. If the answer to both questions is yes, then you should make the changes right there and then. Secondary functions, which pop into your head, you can always add into the next version of the application.


Gather Reviews

1. Read everything people say about the app in press

After the release, pay close attention to app reviews, in them you will find much interesting and useful information. Don’t worry if you see negative and baseless reviews, those will always come up. You will also find many appealing and constructive opinions, along with feature requests. Especially follow close attention to reports made right after an early release or a feature update; afterwards, keep an eye on the press every few weeks.

2. Follow the blogs

Pick a number of blogs that publish on your app’s category and follow them. Readers often trust the authors on these blogs, as technically savvy, and their opinions can make a significant impact on how your app is perceived. Take a look on what was most appealing to these bloggers and what was most disappointing, it’s something to consider in the future releases.


Show off your work

Professional design networks will help you collect a number of peer opinions about your product. They will point out your flaws, which others weren’t able to see. Don’t take all feedback to heart though, designers are creative people and they, sometimes, can’t adequately asses the quality of work without feeling a little jealous :)

comments powered by Disqus