As a Designer in both my side hustle business and my part-time employment, I get to work on various different projects - branding, website design, collateral creation for print, flyers, icons, illustrations...The list really is endless. But what makes my job more interesting is that I often get the opportunity to work on a project such as Mobile App Design.
It's not the first time I have designed a mobile app, but it is the first time I have worked on the whole project from start to finish - and by that I mean, creating the personas, then mapping out the user experience and last but not least, actually designing the user interface.
Along the way, I learnt quite a few things and today I wanted to share these lessons with you.
1 | Understanding the user
1.1 Creating Personas
When designing a mobile app it is crucial to know who your users are. I mean how do you design an app when you don't know who will be using it? the best way to understand who your users are would be to create some personas. Personas are characters that are fictional and have been created based on the target user. So far example, I created 2 personas - John and Tracey - to capture the real-life user that would be using the app I designed.
- John - a new mobile app user, 60-year-old, Postman,
- Tracey - an existing user, actively uses a fitness tracker, 29 years old, nurse, with odd shift patterns.
As you can see these personas are two very different users and so the journey through the app and the design would need to meet both requirements. This is where User Scenarios would come into play.
1.2 User scenarios
Being able to determine how John or Tracey will use the app helps to design the User Interface as it makes me think about the best way for each user to achieve their end goal of using the app.
ie, John may want to count his steps, whereas Tracey may want to track her sleep pattern. Both the users have different requirements which can be met if the user interface and journey are correctly thought through by creating scenarios. These scenarios also help to map out the User Experience.
1.3 User Experience (UX / UX Design)
The user experience is the flow of actions that John or Tracey will carry out whilst they are using the app. The User Scenarios can help map out the journey and the experience the user has is based on the design, content and flow. Everything needs to be thoroughly thought through.
2 | Research is definitely required
Based on the above, you can see A LOT of research is required in mobile app design. From personas to scenarios, to user experience, actions, design, and testing.
Research is key to any mobile app design. I would even say that in order to understand how to design an app, it's important to understand how to USE an app, and therefore researching into using apps is very important. It helps to use different apps by researching what you like/dislikes about the interactions, the layout, the fonts, the ease of gestures (ie. swipe to delete). This is also great for inspiration!
3 | Inspiration is important for learning
There are only so many different ways to design the same interface. For example, when designing the onboarding screens, I looked at what other app designs were like. There are some natural similarities. The same basic elements of an image/icon, a sentence or two of text, a "next" button, a "skip" button and also an indication of how many "onboarding elements" or swipes until the end of this particular step.
The key thing I learnt was that although I was greatly inspired, I was also learning. I was learning that the "skip" button is deliberately placed in the bottom right-hand corner of the design as this is the easiest, and provides the better experience for the user if they wish to skip this section.
4 | Wireframing is a must
This is such a crucial step. I found I was working out the journey and then listing the steps and screens that would need to be designed in order to reach the end goal of that particular journey. But before the design stage can start, it's best to wireframe each screen so that it is easier to understand any gestures that need to be designed for. It was helpful creating the wireframes as I could then also "tick" them off the list as the project started getting bigger and bigger.
I also found it to be a good idea to use a mobile UX wireframing kit which meant I didn't need to create every single element for the wireframe - this was a life saver, and time saver, as I only needed to add the elements I wanted to use to make up the wireframe. Naturally, I had to introduce a new learning element, and so I used Sketch to create the wireframes. Sketch is professional digital design app for Mac that is quite powerful, flexible and quick and easy to use. I have to say, I hope to use it more going forward!
5 | Design using a UI template
Once the wireframing stage is done - and by that I mean, as well as it can be without forever tweaking each screens wireframe - it's time to design the app! All that research, thinking and creating can finally be taken forward. I chose to use Photoshop to design the app, but looking back I maybe should have used Sketch - more on this in another blog post, coming soon!
When I started on the design I took it upon myself to ensure every element from the "status" bar at the top of the tab bar at the bottom was perfectly aligned and exactly how it should be based on other app designs. I didn't want any element to be out of place or misaligned even by a pixel and so I used a grid and a UI Kit to get me started. The rest of the vision came from me and thepreviously designed brand elements. I learnt the basic elements - heading styles, spacing, button sizes, need to be created with attention to detail as time spent on their elements can make the world of difference later, and this will also create a strong foundation for the app as well.
In mobile app design, details are important. Using the right font in the right place can make or break the app design in terms of making it look outstanding to mediocre. Being able to navigate around the app, especially if manyjourneys can be made is key. If the users can't find what they are looking for or they can't navigate because of a slight error in design then the app experience will be bad.
The design needs to be intuitive, clear and attractive.
6 | File management is crucial
One major lesson I learnt the hard way was that file management is really important. My Photoshop file became MASSIVE by the end of the project and trust me, it was not pretty trying to open and make changes to the file. Given how well I got on with Sketch, I think that is definitely something to look into for future mobile app designs.
Mobile app design really requires a great deal of thinking, learning, experimenting and testing. Now that I have shared my 6 lessons that I learned about mobile app design I really hope that they are useful for you.
Have you ever designed a mobile app? Or have you recently had a mobile app designed for your business? How did it go?