Mobile apps now represent a product in itself. For both agencies and freelancers, a good roadmap in mobile app design will lead to results quickly. Especially startups should set up the design process very well before the mobile app idea. Because in startups, the product is constantly renewed and improved. For this reason, in the design process, there is always a redesign (such as hypothesis studies). I share my roadmap in order:

1 — Research

First of all, when we are going to design an app, we look at a blank screen with empty ideas (at least that’s what happens to me 😄)

Similar apps can be examined while doing research. Pinterest, Behance, Dribbble are the most known platforms for this. Of course, although there are sites as successful as these, I mostly browse these sites.

When reviewing sample apps, be careful not to copy them. We’re just trying to get inspired. Colors, fonts, and illustrations can be inspired. For example, while researching for a health app, you may notice that the color selection is in blue and green tones. Or you may have noticed that the font selection of the news app is more important than anything else. While doing your research, you can take notes by focusing on these details.

From time to time, new design concepts become popular. Even if it is dangerous to use popular concepts at this stage, I think it should be tried. Because a modern interface is one of the first rules of a beautiful design (after functionality). Of course, pay attention to your target audience and that your target audience can adapt to this modern interface.

Downloading the relevant apps you like and using them for a while will give you a new perspective. In the past years, I have designed an iOS app called Mavi News. I downloaded a lot of news apps and used them for about 1 week — you can check here for a UX case study — It’s helped a lot.

2 — User Flow (Flowchart)

Overflow hi-fi user flow

Indicates the path that users will follow. Here, we define all the screens of the app. We determine all the paths the user can take. In this way, the transition between the screens is clear.

Flows can be divided into parts as needed. In apps with many features, it may make sense to split some features into parts. For example, on Twitter, a user’s tweeting journey can be designed.

User flow is the point I have the most difficulty with personally. Here’s what we do: fully plan the app. Because designing a full user experience starts from this stage. I usually use only paper and pen for user flow. It’s a traditional method. But if the user flow expands, I need a file that I can see in the digital environment. At this point, tools such as Overflow, Miro, Whimsical can be used.

I design apps in Figma. I wouldn’t like to use too many tools. That’s why I preferred tools that work integrated with Figma. Recently, I tried to design a user flow file to be able to design the user flow using Figma. Also, the FigJam feature kept me fully in Figma.

3 — Low Fidelity Wireframe

Miro

No detailed design is required. It is nothing more than transferring the path we set in the user flow to the app pages. For this reason, we convey what is in our minds as first comes to mind. This action starts the app. It seems like a simple but important step. Because the whole app will be built on the planning we did in this step. Don’t be afraid though, changes can and will happen. That’s what lo-fi is for.

And for those who would prefer pen and paper, I used to print blueprints with a mobile phone on them. I would design it. But the disadvantages: I couldn’t show the part where the content didn’t fit on the screen on paper. That’s why I don’t use that method anymore.

4 — Branding

Now let’s get into the design slowly. You can imagine that the above steps are a little tedious. Branding is a step where we can show our creativity and take a break and relax. For the logo, I use the trio of Pinterest, Behance, and Dribbble.

But there is another method I would suggest. Although branding requires research, creativity is at the forefront. And creativity is not something that can happen all at once. So expose yourself to the design on social media, sites on your follow list, and in your RSS feed. The more you are exposed to them, the better you will begin to design.

In fact, at this stage, only the logo design and app icon can come to mind when branding is mentioned. But keep in mind that the app icon must also match the app. Also, the app icon should be designed in different sizes. Apple lists the app icon sizes here.

5 — Style Guide

This is where we started the design. I assume that you answered the questions of what is included in the style guide and what is the style guide. Think of a long list of logos, colors, typography, spacing…. But the style guide is different from the design system. (I recommend you to take a look at this site for the design system)

After talking about simple information, let me talk about what I did. Seeing a blank canvas in front of me every time I start a new project frankly scares me. These days, I’m trying to take note of the core components of the style guide that should be in every project and collect them in a file. Especially if you are a freelancer, the method I use will accelerate you considerably.

Another point I should mention is the icons. Icons are a topic deep enough to be a separate article. When designing or purchasing your icon set, check the compatibility of the icons with each other and the suitability of the app.

Color selection is directly related to branding. If you have already determined your main colors with the design of the logo and app icon, everything is simpler. But if you need wide tones, I can recommend a few sites. However, be careful not to design the app with very different colors. Sites for inspiration: Canva Palette Generator, Adobe Palette Generator, and my favorite Coolors.

Finally, in this step, I would like to say: Especially hybrid app designs contain customized designs. Pay attention to the guidelines of Google and Apple. In customized design, you should avoid designs that stores will not accept.

6 — High Fidelity Wireframe

Miro hi-fi wireframe example

It’s time to clarify the design that we scribbled on at lo-fi. Now we have moved on to a more tiring and brainstorming step. In this step, I prefer to use Figma. In hi-fi, the screens are now very close to the final design.

Meanwhile, some refuse to use hi-fi and go directly to UI design. They think that systematic work is not creative. I am not against this view, but I must state that I do not agree with it. Essential details are not forgotten in a wireframe where details are plentiful. Functionality stands out. Otherwise, we can focus on design and ignore functionality.

I prefer using hi-fi. I even determine the transition effects between screens at this stage. Seeing very realistic screens also improves customer communication.

7 — UI Design

Mavi News App UI Design

Briefly, a stage that I started by applying a style guide to hi-fi wireframe: Creativity. As I mentioned in the previous step, the hi-fi wireframe is very close to the final design, so the UI design phase does not tire me much. This is where the importance of hi-fi wireframe shows itself.

First of all, I determine the colors of the elements that I separate as components. I follow the 60–30–10 rule for color selection. For example, if I use illustrations and animations in the app, I complete them at this stage. I’m browsing the components to check for any errors in the hi-fi wireframe. After my checks, I examine whether the design appeals to the eye. After all, we want to be satisfied with the work we do.

8 — Prototyping

Framer prototyping

Is everything finish? No, it’s just getting started. We need to make an app that is not running pretend to be running. It would not be correct to call this step the testing phase, but it is the closest phase to testing for small apps.

It helps us to see if everything is going as planned on the app. It’s also an opportunity for freelancers to show their clients what the running app will look like.

I said I don’t want to use too many tools. If a simple prototype is needed, I use the prototype feature of Figma. Enough if you’re using generic animations and transitions. But if it’s not enough, you can use more advanced prototyping tools such as Principle, Protopie, Framer.

9 — Design Handoff and Release

We are nearing the end of a difficult process. After completing the above steps, the design part of the app is finished. By following these steps, we have completed a regular design process. Finally, we will leave our design to our developer with the design handoff process. The design handoff process is also a subject to be explained in detail, so I have not included it in this article.

Thus, I shared with you how I designed a mobile app step by step. Thank you for reading.