This post is intended as a guide that can serve as a basis when considering the process of mobile app design for either Android or iOS from scratch. Everything is based on my own experience I have acquired over the years, talk I’ve had with colleagues and what I’ve read.
I’ll start off by a basic premise that we must consider at all times:
“Mobile app design is not just about creating a look and feel awesome, it’s also about the application working correctly, allowing the user to perform a series of specific tasks within a particular context and according to specific needs.”
First phase in mobile app design
That said, before grabbing a pen, a mouse or open any wireframe tool, my advice is to stop a minute and answer the following questions. Yes, go ahead and write down your answers, make sure you have all of this information to be on the right track.
What is the business objective of the mobile application?
- Buyer persona.
Who will be your target audience? Build your user’s profile with important details to try to understand him better.
- Important task, basic functionality.
What is the main and most common task performed by your users? Think about it and determine what are the actions that will be taking place often.
- Competitors analysis.
How is your competition doing? What are they strong at? What are their weaknesses? Believe me, spending some time to research your competitors is worth it. What is their importance in the market? How are they perceived? Download and try out mobile applications that are similar to what you have in mind, analyze it. What is missing? What is great? Read reviews and check the ratings.
Second phase when designing a mobile app
1- Mobile app sitemap
Like web sitemaps, you should build a sitemap for the app. There are plenty of online tools that are quite useful, but start by writing it down!
2- Focus on sketching
For now, forget about colors and special effects. Just focus on the basic functionality. Start with the most important task that will be performed by your users (what you wrote down in the first phase, question 3). Personally, I like to write a statement as when writing a user story. Each professional has his ways, I am one of those that write it down.
I write sentences like “As a user, I would …”. Every sentence is a task that will be considered in the mobile app design process. I usually start with the most important, the one with the highest priority.
3- Find your inspiration
Sometimes, we have it quite clear on how to have it. But other times, we simply get stuck or end up using a solution we know could be much better. So instead of applying something we know needs improvement, it is essential to have 3 or 4 websites of inspiration that could be helpful in those situations. I usually visit sites like Dribbble , Use your interface or Mobile-Patterns. To be honest, every time I go stuck it worked!
By now you’ve already started wireframing. And if you haven’t, well it is time to get into it. You can use Omnigraffle, Photoshop, Illustrator, Proto.io, a pen & paper if you prefer… whatever suits you the most! Again, forget about the colors and special effects for now. Focus on the layout, the navigation and the functionality.
5- Test it!
Now the time has come for you to go ahead and test it! You will test the first version internally, with a colleague. It would definitely be better if the person is not directly involved in the mobile app design process and in the development and creation of that application. For example, you could test it on someone in marketing, your CEO, anyone from another department.
Your goal here is to evaluate it the user works well with the application. Once you’ve found someone, ask him to perform the most basic tasks. Listen and record. I insist, listen and record. Ask them to think out loud, what are they doing and why. Try to understand their thinking. Take notes and iterate. Repeat this step as many times as you think is necessary until you finally see that the user moves easily within the mobile app.
You can use tools like Invision, UXPin or Justinmind. Spending time on this stage will save many problems later on, believe me. Maybe your “ego” will be affected, you might not appreciate the reviews and feedback, but my advice is to listen and learn. Believe me, feedback is key! Ask your colleagues to provide you with “constructive criticism” and be humble about it, is the only way to grow.
6- Coloring time
Now yes! Lets add some fun stuff. Use Phostoshop or Illustrator and share them, collect feedback and start preparing all the required deliverables for the development team so they can start with the development. I would also recommend you follow closely the development process, at each delivery you should conduct a review as if you were a QA.
One last thing, if you’re interested, you should definitely read our article about design thinking! It’s all about prototyping & iterating to reach the best possible result, all of it with a user centric design.