Introduction to the Mobile App Design

‍

What you should know to start creating digital products for the mobile-first world.

The mobile dominates. There are way more mobile phones than desktop devices, and they generate more internet traffic. Looking across the chart that represents platform comparison worldwide, we can see how the so-called Post-PC era was coming:

Source: StatCounter Global Stats — Platform Comparison Market Share

‍

At the turn of 2016 and 2017, the mobile took over the lead, and there is no indication that this trend is changing any time soon. The graph presents internet traffic only, but there are also native applications. With that in mind, we can say that the mobile is the king of digital.

‍

Android vs. iOS App Design

Currently, we have a duopoly. There are two important mobile operating systems: Android developed by Google and iOS created by Apple. According to StatCounter GlobalStats, their current market share (January 2023) is respectively 71.63% and 27.73%.

Design Guidelines

To ensure a consistent experience for native apps users, the creators of these operating systems provide us with some general guidelines that you can follow while designing.

Android: Google Material Design 

iOS: Human Interface Guidelines 

Be sure to bookmark these pages as you will often come back to them during your work. Poke around and get familiar with the naming, design and usability patterns. You should treat these guidelines as mere suggestions rather than set-in-stone instructions. They are to help you, but it doesn’t mean that you cannot break them.

If you have only used one platform, let’s say you are an Android primary user, and you want to design for iOS, I strongly recommend you to switch for some time. You’ll get to know the look and feel of the UI and better understand its users.

‍

Mobile App Design Process & Toolkit

The process of designing a mobile application is not much different from what it looks like with other digital products. To a very large extent, it proceeds as follows:

Pre-planning

Pre-planning helps to identify business goals and evaluate risks. Successful pre-planning involves close work of designers, developers, and clients. Questions that could be answered at this stage:

• What problem will be solved with this app?
• Who are the users?
• What is the primary value of the product?
• What is the biggest product risk?

This step will also help to select a design approach for the project. 

Competitor analysis

Competitor analysis will help to understand strengths and weaknesses of competitors. It would also help to identify opportunities and industry standards. Also, at this stage, we can collect information on what is trending in this industry.

User Research

At this stage, we focus on understanding user behavior, needs, and goals. Many user research techniques could be used at this stage. Every project is different and requires different methods and their combinations, the most common user research techniques are:

Qualitative research

It includes in-depth user interviews and field studies. Qualitative research focuses on behavior and helps to understand users’ motivations and goals.

Quantitative research

Quantitative research includes surveys, questionnaires, and analytics (the last one is for existing products). This method is cheaper and allows obtaining measurable data about a large number of users.

Structuring

The next step is to analyze the data we collected from previous research. At this step, we can form our hypothesis and define our user’s goals, pains, and needs. This stage includes such activities as conducting UX workshops, creating user personas, writing user scenarios and user stories, and presenting them in the form of a user flow and customer journey map. There are a lot of tools for building flows that allow online collaboration. We recommend using Miro and FigJam.

At this stage, the team prioritizes features and hypotheses for future MVP.

Wireframes

Wireframes help to visualize the structure of the app and are the foundation of future design. They help to present an idea without diving into the details.

UI Design

UI Design is a visual layer of your app. During this stage, designers create production-ready prototypes and a style guide — a collection of pre-designed elements, colors, and typography. 

Prototype

An interactive prototype will help you look at a feature from the user’s perspective. It can also be used for presenting the flows to stakeholders, clients, and developers. The most popular tools are Figma Prototype and InVision app. With the interactive prototype, designers can conduct usability testing and make corrections to the design before development.

Animations

Animations and micro-interactions — this stage is sometimes skipped, at least for three reasons. First, the default components, provided by Apple and Google for iOS and Android platforms, have built-in predefined behaviors which ensure interaction with the user. Secondly, complex animation can greatly extend the development process. Last but not least, it requires some skills which not every designer has. But here are the tools that come with help: for simpler patterns, Figma and Principle are used. When you want to build something compound, use Framer instead.

Maintenance

Design work doesn’t stop once the product is launched. We still can work on user experience improvement. Usability testing, surveys, A/B testing, analytics review, and user interviews can be conducted. With these actions, you can find new areas for improvement. It is also important to optimize your app to ensure mobile accessibility.

‍

The Specifics of Mobile App Design: Think About Limitations…?

‍

Designing for mobile phones, you should consider these:

Smaller display size — what in practice means that fewer items will fit on the screen. Website navigation patterns will not work. It also enforces a different approach to content and leads to concise communication.

Designing for the touch screen — your app will not be operated with the keyboard & mouse, but with gestures & fingers. Elements will have to be larger so that they can be tapped.

Data usage & performance — you should be cautious about using big files and media formats that may require downloading a large amount of data from the internet - it may expose the users to incur additional charges. You should also consider if the number of API calls that your app sends to a server will not reduce the overall performance.

… and possibilities.

Mobile apps are related much more to devices than traditional desktop or web applications. You have that great opportunity to immerse your users into a product by making the software and hardware indistinguishable. Consider gestures as a way of navigation. Remember that almost all modern devices are equipped with a camera and a microphone - think about them as alternative methods of entering the data. Think through how your layout will adapt to the portrait and landscape device orientation.

Once you decide that a mobile app is going to be a part of your digital strategy, you should think about what role it plays in it. Whether it’s going to be the primary touchpoint for your users or complementary to another platform or a service, it will determine the overall direction that your design should follow.

Are you overwhelmed by all the choices in mobile app development? Contact our friendly staff for a free consultation today.