The Process of Mobile App Designing

Just the way ‘Tour guides’ are with tourists to give them a good experience during their trip, ‘UI/UX designers’ are there for creating good experiences for users before they interact with the mobile app.

Let’s understand what the term ‘UI/UX’ means:

• UI stands for the user interface.
  This covers the looks, feel, and aesthetics part of an app. 
• UX stands for user experience.
  This is all about the journey and experience of a user while using an app.

Both UI and UX play a role to deliver a great experience to the user. Let’s look at an example where UI of both products look good but UX of the first product fails because of 2 reasons:

1. It spills off a lot in the beginning.
2. The last portion of the sauce does not easily spill off because of the natural position of the bottle.

While on the second product, the user can squeeze out the required amount of sauce easily due to its natural position.

“Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

What are their responsibilities?

There are 6 areas of responsibility but before we get into them, there is something interesting to know why it’s important for a UI/UX designer to do great work.

Actual work went wrong and the time allocated to a developer is fixed. The UI/UX designer's job is to ensure their work matches the actual scope of work without missing out or adding additional functionalities.

Just imagine! A developer realizes that the designer has made errors after a month of development… They will have no other options but to rectify them within the same timeline otherwise more time will be spent hence it results in a business loss.

Read More: How to Build Mobile App in 2021-Comprehensive Guide

Now let’s dive into their major responsibilities:

1. UX analysis

The first area which needs to be covered is: Understanding the business of the client. This process will shape the thinking of the designer according to the business they are going to design for. 

If you don’t understand the details of your business you are going to fail.”  - Jeff Bezos

Next, the designers have to analyze the requirements in detail to ensure all the requirements are feasible. If not, find solutions to cover those functionalities.

Once the requirements are clear… the designers will spend some time on the app markets and check if there are similar concepts already existing. If yes, how are they performing, what are their weaknesses or missing areas? Furthermore, read the case studies/testimonials of successful apps. 

Lastly, user research for understanding what type of users are going to interact with the app. Furthermore, the designers may also have areas where they might need more inputs of the real users in order to make a decision. This involves surveys, polls, and questionnaires to get the information.

An example: A client wants to develop a wellness app. Some of the areas a UI/UX designer would like to know:

1. What’s the reason for creating this type of app?

• The client will express his feelings/experience towards this concept which will direct the designer to start thinking as the client in order to meet their expectations.

2. What type of users are expected?

• This will direct the designer to create an interface that would suit the type of users. Example: If one of the potential users are those who are “Inactive when it comes to social networking” then showing articles about “Social networking and its benefits” on a daily basis could be a great way to help those types of users where they’re supposed to be.

3. What kind of features should the app have?

4. Are there any ways or methods for making the lives of people and their wellness better? If yes, how do you want the app to help?

• When the concept is clear to the designers, they may start suggesting potential features to the clients which may end up being added to the scope of work if they are promising.

2. Wireframing (Low fidelity)

After understanding the business, the designers create simple sketches of the requirements in black&white (No colors/aesthetics). These are usually done very quickly and cover all the areas of the scope of work.

The benefits of this process are:

1. It gives a basic idea & type of interface the client should expect for their requirements.
2. It brings up any grey areas which may not have been there during the first stage and also allows the designers to solve them.
3. Last but not least, it works like a support of the scope of work. Since this process does not take too long and covers all the areas of the scope of work, both designers and clients feel they are moving in the right direction.

The tools used for creating wireframes: Marvelapp and Adobe XD are the 2 best platforms for this process. An example of what the wireframes look like:

Also, these are done in a very short time period as it’s just a rough sketch of how the app will look like. This stage helps in saving a lot of time for the next stages so it’s important to undergo this stage for every app development.

3. Designing the Interface

This phase is all about the aesthetics, feel, and impression of the app. The designs created in this phase are going to be the actual looks of the app after the development finishes. 

The selection of colors, fonts, icons, images, illustrations, and sounds fall in this phase. It’s very important for a designer to ensure whatever they do is understood easily by the users.

Have you ever seen the above 3 icons? Of course! Is this even a question? We all know what these icons mean when we use WhatsApp. They were designed to be understood and adopted very easily. This means that the selection of icons was successful. 

An example of what the app designs look like:

As you can see, the designs are having 2 principles; Simplicity and visibility. The simplicity of the designs is highly demanded as it keeps away unnecessary things. Visibility determines how easily and smoothly a user can understand your interface. If you noticed, the word visibility was in a very small font size which made you give a little more effort to read it. That’s the importance :D

The designers have to also keep in mind the “seamless user experience”. As mentioned earlier, the design is judged by how it works and not only the aesthetics.

Just imagine! You received a notification “Person x commented on your photo” and you click on the notification. You expect the app to directly open the post but unfortunately, it loads the feed screen. Frustrating? Maybe not the first time but definitely when it happens more than 3-5 times.  What next? You have to go to your profile, scroll to the post and click on the comments to see it. Did this just increase 3 more steps until you can see the comment? More clicks=more problems.

Last but not least, designers are now getting more interested in AR 3D models for the app. If there are features in the app that can be extended to AR and voice technologies then they should be considered as they are the next on-demand technologies.

Example: Apple recently launched the band series 5. In order to give the best user experience, they added a page on their website where you can view the watch in real-time. So it’s now, “experience the watch and then buy it.”

4. Rapid Prototyping

There is a difference between chat communication and face-to-face communication. Why? This is because chat does not have the ability to convey messages faster than face-to-face. Chatting can’t also show the emotions/reactions of the person whom you’re communicating with which could sometimes lead to misunderstanding.

A similar case is with the designs. When it comes to UI/UX designs… We aren’t talking of 1 or 2 screens, it could range between 30-300 screens depending on the concept/requirement of the application. Therefore, we need to explain the flow of the entire app to the client. A designer could schedule a call to explain the designs and flow of all the screens. The question is: Will the client remember all the flows after 1 month? No? This is where Rapid prototyping can be helpful.

This prototype can also be added to the website through an embed code which is provided in the marvel app interface. The benefit of creating a prototype is, it always stays with you and you can come back to it if you want to remember/find out any flow of the app.

Marvel app and XD are the best tools for prototyping. In addition, once the prototyping is ready, it can also be viewed on a mobile device to experience it as a real app. Rapid prototyping is also a way of testing the designs. The placing of “Click areas” in the designs will ensure that all the buttons have a proceeding screen. If not, the flow of the application would break hence a user might experience this badly. The prototyping would take 3 hours of time but it’s worth the investment.

“If a picture is worth 1000 words, a prototype is worth 1000 meetings!” - Tom and David Kelley.

5. Design specs & Assets to developers

Once the designs are completed, the ball is now in the developer's court and they have to integrate the designs in their native software.

Imagine! You ordered a medium size bean bag but the size you received was larger than you expected. Frustrating yes? Well, you know have to figure out how you’ll set this in the same area. The same would happen if the developers don’t have the right specs and assets.

The process of providing the specs and assets is: Slicing from the design software and creating a document with information of the typefaces and color palettes. However, this isn’t always accurate.

We use an export tool called “Zeplin” which allows you to upload your designs directly from design software. Zeplin then provides all the specs and assets to the developers accordingly. To give an example:

1. iOS & Android:
   •  Font (name, style, size, color, alignment, and line height).
   • Icon/image assets Size, files (.png, .jpg, .svg, 1x, 2x, 3x, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).
2. Web designing: Font and icon assets specs as mentioned above. In addition, CSS code is also provided for all the layouts.
   • An example of what the Zeplin interface looks like:

If you notice, the glass is icon is selected which gives its dimensions. Furthermore, the glass asset is also available for download in the right portion of the screen. Zeplin also provides such data for fonts and other layouts.

6. Designing graphics for the app markets

The designers also have to provide graphics that are required in the app store and google play store. There are 3 different types of assets:

1. App icon: This is a rounded square icon which is the identity of an app in the store markets. Ensure the app icons are unique which would remain on the user's mind from the very first time. An example:

2. App Store and Google Play Store screenshots: These are the first impressions to the user even before they download the app. Therefore, it’s important to design a few attractive designs to impress the user and push him to download the app.

3. Promo video: Now this is like a cherry on top of the cake. Once you have completed the design, development, and testing… It’s now time for users to experience what you’ve been developing. By providing videos on the store markets or the app’s landing page… You are not just looking for users, you’re also quickly giving them a brief of what your app is about before they even download it. An example:

To conclude: All the successful apps you know have an outstanding interface and the apps which are well designed attract potential users easily. There will be millions of other apps coming up... Ensure, you’re having the best designers to create seamless user experiences for your users.