How to Create a Great Mobile App (In 5 Steps)

Most get to the app design process only after they already have code and structure. They invite a designer to make things look neat in their first MVP. That is because they see design solely asa visualization of the product. In reality, design is more than that.

That is where we come to the question:

What is app design?

App design is the process of creating an app that defines its structure, logic, functionality, usability, look, and feel.

Good design means good user experience. User experience is what makes more people choose one particular app over others. Founders who understand how design benefits their product are the ones who get millions of downloads.

How do you give a product a higher chance of survival in a competitive environment? Try applying design thinking methods as early as possible. The idea development stage is a good moment for that.

Getting started with app design

The design thinking method implies that the process starts before the idea is created. Of course, most founders don’t start development from scratch. Most of them start with a brilliant and unique idea. But however brilliant it is, they shouldn't assume it to be the best and only way of solving the problem.

That’s why it’s much more efficient to start by defining the problem. Let’s take a food delivery app as an example. There are plenty of them, but many users still feel that the delivery process could have been easier.

To define the problem, we have to find out what existing food delivery apps are missing. Automatic check for allergies and food intolerance? More sustainable packaging? Contactless delivery?

Once the problem is defined, it’s time to go out and find out more about the target market for the future app. There is one common mistake that people make when they start designing an app. After thinking about their core idea for a while, founders start imagining that they understand the users well. Often, they want to develop an app for a problem they’ve faced themselves. But even in this case, they have to understand that they cannot rely solely on their own feelings.

In design thinking, this step is called empathizing. Product team members have to find out who their potential users are and try to see the world from their perspective. Many people find interviewing strangers a bit intimidating. There are some ways of overcoming these obstacles. Going to their natural habitat is the easiest. For example, visiting farmers' markets is the best way to get to know potential users of a delivery service for organic products. In UX, it is called an intercept interview.

After empathizing, comes ideation. That’s when the team brainstorms to find ideas to solve the problem they’ve defined. Designers prefer having people from different backgrounds take part in brainstorming; the more diverse profiles there are, the wider the range of ideas.

Once the idea has crystallized, it’s finally time to create a prototype. Most people would say that this is the point where the app design process actually starts. That is because the previous steps are often invisible – or simply skipped. Yet most experienced UI/UX designers would disagree with this.

Good app design is better felt than seen. For the best result, designers must be treated as the creative power behind the app’s structure and not merely as drawing machines. The graphic below shows the design thinking process. This principle is applied to different spheres and works particularly well for app design.

The next step is to go into detail about prototyping and see the tasks and outputs at this stage. The full list is below, but at the prototype stage, you can skip some of the elements.

What should the app design process include?

App design strategy

As with business projects, a design project also needs a strategy. It helps to set objectives which will guide design decisions and unite the team. The approach can be different for different teams. The methods for creating one can be very different, too. Let’s take the strategy definition guides from award-winning designer Joseph Russell as an example.

First of all, define design KPIs as success statements. In some cases, they can be similar to business objectives. In other cases, they can be fully oriented towards usability as well. For example:

The success of the prototype will be defined by the number of people who subscribe to the free trial.

This is what designers will focus on. Based on this, they can take measures to make the user journey to free trial as smooth as possible. This may include:

• Giving users an opportunity to see the value of the product before they subscribe
• Encouraging users to pick the free trial option through notification
• Free trial without having to enter a card number

This “success statement” would be the North Star that directs all design solutions. And going further, this statement and measures could act as the basis for the KPIs (we’ll get to that in the next part).

Analysis and planning

No process goes smoothly and to deadlines without planning. Between the concept for the app and a detailed timeline comes a lot of analysis and planning.

When developing an app, one of the first steps is to define the main features. Often the MVP has to limit its functionality to the most important of these. You can leave the rest for later updates. It allows testing the first version while expending minimum resources.

There are different frameworks for app design planning, but they all come back to what to do and when to do it. Without a proper timeline, the design process can go on forever.

How do you make the timeline realistic? Involve not only a product manager in the planning, but other team members as well.

Designers know better how much time their tasks will take. Don't forget to reserve some time for iterations. This is the key element in the design thinking framework.

However, meeting deadlines is not the main measure of the success of a plan. To understand whether the app is doing well, KPIs are more reliable. Apart from business KPIs, there are the ones which help measure design quality.

Let’s take an example described in the previous part about design strategy. To measure the success of the product, the following KPIs could be used:

• The percentage of users who subscribed to the free trial = number of subscriptions / total number of users.
• Abandonment rate = number of users who abandoned the subscription process / total number of users who started the process.
• Average task time = the time users spend on subscribing to the free trial. If this time gets shorter, it means that design iterations have had a positive result.

Strategy, timeline, main features, and KPIs make a design plan. Apart from organizing the designers’ work, it helps to coordinate their work with other teams.

Designing the app

User flows

Design plans can be very different, but creating user flows will always be one of the first steps. Why are they so important? User flows are needed to figure out which screens need to be designed for the main features.

This is the first step on the way to visualizing the future app. Once features and user goals have been defined, designers can then imagine how users will reach these goals. User flow is a list of screens arranged to follow the user journey: from the starting screen to the “done” screen. Here is what it may look like:

Simple and intuitive user flows are crucial for users to feel the value of the product and enjoy using the app. To make the user experience as smooth as possible, designers always try to make flows short and logical.

Once user flows are finalized, they can start designing each of the screens.

Wire framing

Wireframes are simplified screen layouts. There are two types of these:

Low-fidelity wireframes — can be as simple as pencil sketches of screens on a piece of paper. Even at this level, it is possible to do some basic testing and adjust the design before opening a graphic editor.

High-fidelity wireframes — screens designed in a graphics package (Figma, Sketch, Adobe). There are no specific visual elements: images, graphic elements, or colors. It is easy to recognize wireframes by their gray monochrome look, basic font and crossed lines instead of pictures.

At the wire framing stage, designers are looking for optimization of the layout. Also, if testing is conducted properly it can help to adjust the user flows.

The following questions should be answered when approving wireframes:

• Is the app comfortable to use?
• Can users easily find all the important elements and reach their main goals?
• Are there any screens that need to be changed?

Once this part of the work is done, the design progresses to the next step.

Mockups

Mockups are developed on the basis of wireframes. They look very much like real app screens: with images, colors, proper fonts, and other design elements.

This is how most people imagine the work of a designer: making decisions on font color and the roundness of buttons. However, creating mockups is just a small part of UI/UX design.

Mockups look great on a pitch deck. They can be presented as an image of a real smartphone with an app open on the screen. Mockups give an impression of the product being almost completed – only one seed round away from launch.

Prototyping

When the objective is to impress investors, a prototype will work even better than mockups.

A prototype is a clickable model of a future product. It demonstrates user flows, functions, structure, and visuals of an app.

Common tools for creating prototypes are Zeplin, Marvel, Proto.io, and others. Nowadays many design packages such as Figma have a built-in feature for making clickable prototypes. This allows designers to create them without any knowledge of coding.

Prototypes imitate real-life use of the product and are great for usability testing, as well as other kinds of user test.

Testing and improving

In the app design process suggested here, the prototype is created before any development starts. This approach helps to save time: faults detected at this stage are much easier to fix than if found later when the code is ready.

There are many different methods ofUX testing. Here we’ll describe the ones that are the most efficient at the prototyping stage.

• Qualitative usability testing. The objective is to find out how easy the app is to use. Can users find what they are looking for? Complete their goals? Hit the right button with one finger? And – a subjective but important one – do they like the app? What do they think of it?
• Quantitative usability testing. This is a bit more complex and typically requires an experienced UX researcher. After the first design option, the following metrics can be checked: average task time, error rate, success rate, and so on.
• A/B testing. This method helps to check which design version works better. Note – it has to be done with real users and a certain effort is needed to avoid bias.

This list is neither complete nor compulsory. Some of the tests are better done after the development stage. At this point, there is only one step that separates design images from realization.

Design specifications and asset prep for developers

When the screen designs are approved by the team, it’s time to pass the baton to the developers. Although this doesn’t mean that developers were not involved in the work before that.

Having a developer involved at the early stages is highly beneficial, especially for new products. It helps to shape the design in a way that will save developers’ time and optimize the code. Avoiding overcomplicating processes is very important for an MVP.

All of the most popular UI/UX design tools such as Sketch, Figma, and Adobe XD have built-in functions which help simplify the handoff process. Designers can simply export assets with names that will be understandable to developers.

When working on an MVP, designers can do the handoff in stages before finishing the whole project. This works well as long as they provide logical user flows and not just random screens.

Whether it’s an old-style email exchange or comments in Figma or Sketch, the handoff process takes time. Product managers should reserve time for this in the timeline, as it is more complex than just “export-send-download”.

Conclusion

This article was intended to be an overview of what we do as product designers. It’s hard to make the story brief, but the app design process isn’t brief either. It involves a lot more than just arranging buttons in a graphics package. And good design usually means that designers were involved in the process early on. This approach allows us to apply the principles of design thinking and thus ensure that the product really addresses users' needs.

And actually, designers don’t retire from the product when they hand off the project to developers. Most apps require constant designer support even after development and launch. If you are in search of a designer who to work on an app from the concept stage and support it through development, feel free to contact Tenscope. Our team scales up and down easily to provide continuous design services.