10 Steps to Build a Mobile App
by Milton Wani
This article is my humble attempt at writing a UX Designer’s Guide to take you on a journey from planning to production. Use my BabyMama app prototype as an example of how you can turn your ideas into a functional prototype.
Figure 1: The development of an app using low-fidelity prototypes.
BabyMama is my first mobile app prototype. It was designed to help pregnant and new mothers who live remote or in rural places to have access to a health professional. I was inspired by my previous work at the Public Health Agency of Canada, when I worked as a project manager to publish a booklet and report on maternal and infant health experiences. I come to this as a man to learn about the experiences of women.
This app was designed to showcase the mobile app development process. The medium is the message, and thus the truest benefit of building BabyMama came from understanding the process. A process that I knew could be repeated again and again, but faster and better.
There are other apps like mine. A study published in 2014 by comScore found that most smartphone users download an average of zero apps per month. Unfortunately, without a client to push and pull, this app was designed in a vacuum. What I missed most was having the right feedback and the constant users to test on.
You have great idea
You can picture all the things it will do and all the people who will like it. Before you rush in too quickly, a cold hard fact is that most new apps will fail to achieve any success — building a mobile app is challenging. Your first question should be, “What is the problem to be solved?”
Figure2: Capstone milestones help to know where you are going before you start.
The user experience design process will help you to understand the market you are entering into. Even the best design processes will fail to succeed if there is no need — but there is a world of difference between may fail and will fail. This guide is here to help you succeed.
1. Find the Needle in the Haystack
Having an idea is a great first start but without a clear picture of where you are going, you will waste your time and money.
Figure 2: Ideas are messy and implementing them comes with hurdles.
Establish the Design Brief
Begin with a Design Brief, a document that helps you put your ideas on paper so we can discuss the opportunity or breakdown of a problem.
Figure 3: Design Brief shows problems from observations of mothers and fathers with babies
Never underestimate the power of observation. When you take your time to observe people in action, you might find something is not working or an opportunity to make life better.
Define the Problem
When it comes to understanding a problem, always ask these questions: who, what, where, when, how, how much, and why. In the words of Dan Roam, author of The Back of the Napkin, “Don’t propose a solution before you know the problem”. You need to validate there is a need.
Figure 4: The problem needs to be defined by asking who, what, where, when, how and why.
For anyone interested in generating new ideas and problem solving in groups, I highly recommend Game Storming by D. Gray, S. Brown and J. Macanufo.
2. Do Market Research
The user experience design development process requires a careful blend of business strategy and ux design. Market research is a key next step.
Define Your Target Persona
Using a persona helps think about who you want to help and more clearly define the purpose and mission of your app through the users’ eyes. What is it going to do? What is its core appeal? What concrete problem is it going to solve or how is life going to be made better?
Figure 5: Defining a clear goal for the app with a persona helps you know where you are going.
Know the Value Proposition
While you might think you are the first person to come up with the idea, there are more than a million apps for Android and iOS. You need to look at what is out there and learn from them — your competitors’ mistakes and their app’s features.
Figure 6: An inspiration board looks the market place of ideas to find what can be learned.
This is also the right time to think about the technical aspects of your app. Do you want to build for an Android or iOS? On a tablet or smartphone? You need to get a clearer picture of whether your idea is truly feasible from a technical standpoint. This also extends to understanding any legal restrictions (e.g. copyright and privacy questions).
Marketing and Monetization
Now that you have confirmed the technical feasibility of your app, think about your Go-To-Market strategy. How will your app generate revenue? Will you charge to download or will it be free but with ads? Think about how many users might join as well.
Figure 7: Social media provides insights into API tools and marketing ideas to reach customer.
3. Understand the Use Case Stories
So far, we established the persona, problem scenario and the value proposition to tell us what our users think about and what motivates them. Now we need to think about what people want to do.
Figure 8: Use Case stories come from the persona, problem scenario and the value proposition.
Use a storyboard to sketch what you expect users to do to use your app. The idea is to build a roadmap that will help you understand the how and why user will navigate through your app.
Figure 9: The storyboard forms a clearer picture of what your app will do for users.
Start with Sketches
By starting with sketches, you create an easy to erase and change foundation for future user interface designs that shows the main features and structures of your app.
As a designer, you might also want to consider learning mobile form needs. The more you know about how users prefer to navigate through apps, the easier it is to start the first designs. Look at:
- Mobile Design Pattern Gallery, by Theresa Neil
- iOS Human Interface Guidelines
- Google Design Guidelines, Accessibility, Usability
Figure 10: A rough sketch of your app helps everyone on your team understand the mission.
By creating a sketch, you also create a paper prototype. Now you can use this tool to help you to discuss the information architecture and what users and team members expect to see.
Don’t Forget Process Mapping
Never start a wireframe without first mapping where you want users to go. Wireframing is the process of creating a mockup or prototype of your app. Process mapping shows the connection between the use case stories and the content. Even though the diagram below shows a prototype version displayed as a process map, it is best to begin with a simpler linking with words.
Figure 11: Sort use case stories into orders that match users’ expectations.
Figure 12: Earliest outline of information hierarchy and home page wireframe.
4. Define the Back End of Your App
Use your paper prototype and storyboard to lay the foundation to help the developers understand your back-end needs (e.g. server, APIs and data). You will use these as references when talking with developers to understand if there are any limitations that will affect your app’s design.
5. Heuristic Evaluation
Heuristic evaluation (also known as design critique or design evaluation) is a design feedback that will save you time and effort later by finding usability problems with the help of design and subject matter experts. Jakob Nielsen’s 10 heuristics design principles and Usability.gov provide an excellent resource for understanding common usability problems. This is also a good time to gather the content to add to the app.
Figure 12: An example from BabyMama of the critique to ensure aesthetics and minimal design.
6. Production Development Plan
Take a little break, you have come a long way. This is a crucial point. Now is the time to have a development plan with your team and talk about what you need. No coding has started. Ideally, all the changes have settled to your minimum-viable product and you know what you want.
Figure 13: The pivot moment, a perfect time to decide whether to go forward or stop.
This is also a good time to take another look at your Design Brief. Are there any other ideas or need that were missed?
Establish the Development Plan
The future is always hard to predict, but at least with a basic outline you can talk with the team about the four variables of your project: resources, time, scope and quality.
Figure 14: Agile method of development focus on days rather than hours. This re-emphasizes our focus on the quality of a project than the time per hour.
Create the Interactive Prototype
This is a good time to have your content and digital mockup ready for early user testing. The more interactive, the easier the preparations for coding and user testing.
To look at an earlier digital mock up, go here: https://www.youtube.com/watch?v=NZ4czLb68hU
7. Test Your Prototype
Finally, the user testing begins!
User testing is done either a moderated user test (talking with users) or unmoderated (self-guided user test). It can also be done remotely or in a lab-like setting.
Figure 15: BabyMam used Gotomeeting.com and a telephone for remote, moderated testing and SurveyMonkey and URL prototype to do remote, unmoderated testing.
Valuable feedback can be received through pre- and post-test questions. The outline below shows an example of the feedback received for the BabyMama app.
Figure 16: The Use Case stories will give you a good idea on what tasks to test.
8. Test Again (Yes, Again)
But this time, you need to move beyond the testing of a single prototype to A/B testing. Perhaps you want to compare the arrangement of buttons. A small change can mean big differences when it comes to click-through and conversation rates.
Figure 17: BabyMama used UserTesting.com and the URL prototype to do remote A/B testing.
9. Define Back End of Your App (Again)
Your interactive (URL) prototype is ready for another conversation with the developers to talk about your back-end needs (e.g. server, APIs and data). This is another time to think about the limitations that will affect your app’s design.
You will notice that a pattern is emerging: user test to code and back again to user test. You will have to decide when the app is finally finished and the time to launch.
10. Launch Your App
Launching your app can take many forms.
This is how I did it: https://www.youtube.com/watch?v=hQDMXpixkgM