Over a million developers have joined DZone.

Mobile App Design: From Blueprint to Masterpiece

We will demonstrate the process of app design creation and also include the best practices for mobile app design by using an example of a project from our own portfolio.

· Mobile Zone

The current market for the development of mobile applications is extremely competitive. You have only one chance to make a strong impression on your potential clients before they start knocking on your competitor’s door. This makes it an uphill battle right from the start. The process that is undergone during the development and design of mobile applications does not only consist of drawing tons of sketches and discussing where the “pay” button will be. It encompasses psychology, aesthetics, behavioral sciences and countless hours of brainstorming and testing.

Let’s talk about 4 steps that lead to the creation of a great mobile app design:

  1. Understanding your users
  2. Wireframes
  3. Design
  4. Testing

To make it straight forward and easy to understand, we will demonstrate the process of app design creation and also include the best practices for mobile app design by using an example of a project from our own portfolio.

Bonshine is a startup that offers a robust platform for a waterless hand car wash service. Set the location of your car, pay via an app and voila!

You also might be interested in: How to develop an app when you have a great idea but your budget is limited?

Understanding Your Users

How should you design the UI for mobile applications? You should first start by getting to know your users. You will need to understand what motivates them to use your app and then start designing.

There are several ways to better understand who your users are, what their intentions are, their needs and their general ways of thinking. Here at Eastern Peak, when designing an app we prefer to evaluate personas, user scenarios, and mood boards. Each of them answers one of the following questions about your users:

  • Who are your users?
  • How do your users behave?
  • What and how do you want your users to feel?

Once you get these answers and since you already know how your app’s UI should look like, it’s easy for you to move forward with wireframes and actual mobile app designs.

Personas: Who Are Your Users?

Do you know precisely who your target audience is? Without this basic understanding, you will be lost in the woods. Your target audience/Personas are better understood or rather created through the use of surveys and through market research. In our case, in order to have a clear model of a typical user for the new app, we put together information provided by the Bonshine’s analysts.

Meet Johna busy working man in his mid-30s. He works downtown and wants to keep his car clean, save time, and leave a smaller environmental footprint.

persona-in-mobile-app-design

Why is this information important? Personas will help you define concrete design requirements. Whether it’s a new feature or a small design element such a button that we were working on, we ask ourselves the following questions:

  • Why and how would this help John?
  • Would it enable John to reach his goals?
  • If we didn’t build this, would John achieve his goals?

Take a look at the following screen:

wireframe-1

This is a part of the order screen’s wireframe, which we will also discuss later. John is a busy man, so we put all of the elements that are needed to place an order on one single screen. From the same screen, we also added the possibility for John to change his car, since he probably has both private and corporate cars.

It’s a huge problem for many companies to spend time designing elements and screens that never get used. Personal information about the user helps us avoid this problem and gives us the information that is necessary in order to design an app that will specifically meet the end user’s goals.

You also might be interested in: Native vs cross-platform: How to make a choice?

User Scenario: How Do Your Users Behave?

However, personas are only half the battle. The secret ingredient is adding scenarios into the equation.

A user scenario describes how a persona would interact with your mobile app. Scenarios are written from the persona’s perspective and describe what will likely happen in the future. That’s how you’ll manage creating the right UI for a mobile app.

Here are the functions that a user scenario performs:

  • Shows how the user interacts with the mobile app design.
  • Demonstrates all possible scenarios (or paths) that lead to triggering events suitable for the user’s goals.
  • Represents basic and alternative flows of events.

In our case, we wrote down John’s behavior flow and all the outcomes that may result, which is to order the car cleaning service. This helped us to better understand the necessary functions and UI elements that we need to include in the design. We divided the scenarios into 3 parts:

  1. John’s initial experience
  2. John uses the app for 2 weeks
  3. John uses the app for 2 months

Let’s take a look at the same part of our order screen:

screen2

Here is an example of one of our user scenarios:

Right before his meeting on Friday, John decided to order a car wash using the Bonshine app. He needed his car cleaned within an hour so that he wouldn’t be late for his next event downtown. The app says that his car will be cleaned within 2 hours. Because he has such a tight time frame he will probably not move forward with placing the order. Unless of course, he has a convenient and immediate way to receive information about his order.

That’s why we added a phone number next to the order button.We know John is not going to rely on Google in case there are any issues or concerns. John wants to save his time for other activities besides getting his car washed. If there were any issues with the order how would Bonshire get a hold of John. Without this new element there is too much uncertainty and poses a risk to the reliability of the application.

While we were creating user scenarios, more and more requirements to the wireframes were added, a lot more than we all expected in the beginning. It showed how many functions had to be included in the app design.

You also might be interested in: Mobile apps vs Mobile websites

Mood Boards: What Do You Want Your Users to Feel?

Mood board is your magic key to the heads of your users. After you have understood who your users are, it’s time to create an overall aesthetic conception of the application’s appearance. The mood board’s layout is a combination of theme images intended to trigger emotions related to future mobile apps. The result is a subliminal message of a design and a color scheme.

Here is an example of the Bonshine app moodboards we created:

moodboard

There are two main colors, which represent the moods we wanted to show:

  • green: nature, trust, life;
  • blue: sky, cleanliness, shine;

Looking ahead, this is the reason why the future mobile app design includes green active elements (buttons, links, switches), so John stays calm when choosing something.

Button

On the other hand, all background elements are blue to give John the anticipation of his clean car.

blue background

We created a mood board not only to understand the future ‘like and feel’ of the mobile app, but also to ”get it approved” by our client. Just imagine how much time is saved when you are showing, modifying and approving the mobile app design concept in this ‘set of images’ stage, but not in the design stage.

Wireframes in Mobile App Design

Wireframes are mockups of your future mobile app’s interface. We begin by creating initial sketches on paper. After considering the basic functions and visual aspect, we create vector wireframes of each screen. They become the blueprints of the mobile app.

Wireframes do the following:

  • Show the structure of the mobile app and every part of its screens;
  • Demonstrate the features of the app to the client;
  • Represent the mobile application’s usability;
  • Represent the user flow.

When creating the Bonshine app, we tried to reflect every possible mobile app interaction in wireframes. During the stage of wireframing, Bonshine managers had discussed all the features they wanted to incorporate in the app. For example, in the construction stage, they were free to choose the parts of the app and their arrangement. Our task was to stay it tune with John and his scenarios.

creating app wireframes

As an example, you can take a look at the order screen wireframe, which gives an overview of all the functional elements on it. After discussing this with the Bonshine team and adding further modifications, this wireframe along with others was sent off to the design.

You also might be interested in: Android vs iOS development: Which platform should I develop for first?

Design

When designing an app, a software development company faces a great problem – how to find the balance between performance, appearance, and usability.

Look and Feel

User experience or UI is all about how the product feels. What’s important here is how the user feels during and after the process of using your mobile app. When working on the Bonshine UI, we took as a reference point the mood board we had previously created and approved it with a client. Each element, from a button to the map, matched the general mood, so that the final mobile app UI was easily predefined.

Usability

As a part of the UI, the usability of the mobile app is a measure of how easy it is to use an app and how it performs those necessary tasks. Prior to sketching screens for the UI, user scenarios and personas significantly helped us in the process of defining specific design requirements and creating wireframes with a focus on UI.

Functional Mobile App Design

The main purpose of functional design is to ensure that each feature mentioned by the client is implemented through an appropriate visual element and works as planned. Wireframes were probably the most useful tools when dealing with a functional design for Bonshine.

Creating app design

We were able to come up with the first version of the design once all of the user factors were considered and both UI and functional elements were defined. On the screenshot above, you may see the first version of the order screen design.

You also might be interested in: Mobile app retention rate: How to improve it?

Testing

Well, our mobile app design is ready and seems to be attractive. What lies ahead? Testing, of course! As we have previously mentioned, the high quality of the design is the competitive advantage that will help you succeed in the market. To improve the Bonshine mobile app design we used focus groups, iterations, and A/B testing.

Focus Groups

Focus groups allow us to receive feedback on a new design from a large group of people. The target groups consist of representatives who can give you important insights into your product and help highlight the main impacts that it will have on your customers.

In other words, take your Persona and find as many people that match it as you can.

Iterations

Iterative testing is a method to implement new features and test them. Most people know iterations as a single development cycle. In the case of design testing, iteration means the repetitive process of implementing a change, testing it on a focus group, considering feedback, tweaking changes, adding new ones and so on.

A/B Testing

A/B testing or split testing is a method of comparing two versions of a design. You create two separate versions, A and B with features or characteristics you want to compare, and test them on your focus groups. This approach allows you to test new ideas, check whether the new design is better than the previous one and if the changes you have implemented result in improved metrics.

In the case of the Bonshine order screen, it took us several iterations and tons of user feedback to create the final version of the mobile app design. Rarely used elements became smaller and less colorful because users didn’t want to use them too often. The most important functional fields became bigger because some users had found it hard to use. And when we saw how many repeated actions it took users to select the preferred day and time, we simplified the navigation to get rid of the unnecessary steps.

app design testing and changes

It definitely takes time to come to the final version of the mobile app design. You make a sample and show it to your client. Then you improve it according to their comments and considerations, and then make another sample. You show it to the client again. Designing an app is a fine tuning back and forth process like polishing a stone until it becomes smooth as glass. Finally, after many trial versions, you present the end product, the app that the client, the developer and the end user will understand – “That is it”. Some clients are blown away while some simply take a moment to admire it.The result, however, is equally the same – you have created the design the client was looking for.

Also read:

How to create an MVP that can get your startup funded?

How to make money with apps?

Topics:
mobile design ,user experience ,mobile

Published at DZone with permission of Alexandra Titova, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}