Industry design tips on building a great mobile app: from defining your idea to prototyping it out with Justinmind
Mobile app developers: Taking your first steps
As a CEO of an app design & development company I often get approached by people who want to share their app idea. Though ideas are often different, everyone has the same question: what should I do next?
This question is the reason why most people never execute the great app ideas they have. They simply don’t know what to do next. In this post we’ll cover what you need to do once you’ve come up with an idea for a mobile app. I suggest dividing your next steps into 4 groups:
- Define your mobile app by documenting your features
- Research your mobile app idea with a business stress test
- Preparing to execute your mobile app design
- Executing your mobile app design with wireframes and prototypes
Let’s go through each step individually.
Define your mobile app by documenting your features
In order to turn your idea into a tangible product, you need to understand its every little detail. Let’s say your idea is to create a ride-sharing app, like Uber. You want to create an app that will make traveling easier and less expensive. But is that enough information for a designer to design it? Is it enough for a developer to code?
Of course not. In fact, it’s not even enough for you to fully understand your own business. There are many questions that you need to answer. For example: how will the trip cost be calculated? Are you targeting a specific market, such as university students? Will there be a selection of car models to choose from? Can you select the arrival time in advance or does the journey begin the moment you order it?
The features list includes all the features of your application. Start building this list with the main features and then add in secondary components, such as the login screen and registration. In the case of a ride-sharing app, the main features might include:
- Drivers can create a trip by selecting the start and end point and adding information about their car (make, model, color, number of available seats).
- The cost of each trip per passenger will be calculated using the formula: total trip distance in miles MULTIPLIED BY $2 and DIVIDED BY the number of available seats PLUS $1 transaction fee.
- The driver’s revenue per completed trip will be calculated using the formula: total trip distance in miles MULTIPLIED BY $2.
- Users can see available trips on the map or in a list format, marking the beginning of their journey. Trips that are displayed can be filtered by choosing starting point, end point, and driver rating.
- Passengers can order a ride by selecting a trip from one of the available options.
In other words, when creating a features list you need to validate every assumption you have and be as detailed as possible. Your final features list will most likely have around 20 bullet points’ worth of features, no matter how simple your app is. Once this is done, you should have a well-defined idea that you can start prototyping. Justinmind is one of the best wireframing tools out there for creating low to high-fidelity wireframes and prototypes in your design process.
Research your mobile app idea with a business stress test
Before you invest any more time in your mobile app, you need to ensure that your idea passes a “business stress test”. How? By researching your app idea and assumptions further.
To do this we use our special App Business Canvas. Let’s go through its main components.
- Target Audience: Which users will most benefit from your using app?
- Value Proposition: How does your application benefit users?
- Platforms: Which platforms will the app work on? Is there a web version?
- Customer Relationships: How will your users communicate with you? How do you prevent a bad review on the App Store?
- Monetization: How will your mobile app earn money? Cost to download? Freemium? Ads?
- Key Resources: What is needed for the app to function after it is developed? For example, does your app require at least 10 drivers in each city for it to provide ride-sharing services?
- Key Activities: What is needed for the app to function well? For example, do you check driving history? Do you ban drivers with low ratings?
- Key Integrations: Which third-party integrations might you need? Are you using maps? Accessing a database of restaurants?
- Cost Structure: Who will wireframe, design and develop your app? What would that cost?
Preparing to execute your mobile app design
Now that we have a well-defined mobile app idea that’s passed our business stress test, it’s time to prepare for execution. Generally speaking, software products can be built using one of the two popular methodologies: waterfall or agile.
The waterfall approach requires you to create the product in stages. For example, first you’ll create wireframes of the whole app, then you’ll refine the design of the app. Only after this will you start to fully develop the app.
The agile approach focuses on features as opposed to stages. For example, first you might choose to create a trip creation feature. Then you’ll design and code this section in full before anything else is designed.
The main advantage of the agile approach is that it allows you to backtrack at any moment. If after building one feature you decide to change something about another section, the time you’d already spent designing it wouldn’t be wasted, as it would be with waterfall.
If you decide to use the agile approach, you’ll create user stories and work on them prior to building out other parts of the mobile app.
So first you need to create a block diagram with your main user story. In our ride-sharing car example, note that we have two user personas: passengers and drivers, and therefore need to prototype with both personas in mind.
You can read more about building persons in this Justinmind article.
Your passenger user flow might look like the one below:
Executing your mobile app design with wireframes and prototypes
Once you have your main user flow it’s time to start wireframing it. Creating a wireframe in the design process allows us to confirm and validate the outline of the app before moving on to stylistic details.
When wireframing remember those simple tips:
- Don’t use color: color will distract you from creating the perfect user flow.
- Use real content: one of the most common problems is using placeholder text that you will need to be replace in the final design and risk shifting your whole screen outline.
- Avoid barriers of entry: don’t force people to register or do anything else before they reach their desired end goal unless absolutely necessary.
- Keep it simple: don’t over-complicate things. Stick to creating the perfect user journey, not the design details.
Once you’ve completed your wireframes, it’s time to begin our test & adjust phase.
First, we want to get feedback from real people. To do that we need to create a mid to high-fidelity prototype. This YouTube video will show you how to make a prototype with Justinmind if you need some tips.
Once the prototype is ready to be presented, it’s time to test and ask real people about what they think. Start with your friends and family. But don’t just talk with people you know to get positive feedback. Doubts and queries are what you should be looking for to highlight some things you might have missed.
After the initial feedback round, go back to your prototypes and make the adjustments. Then, move on to the final design. This should be a series of iterations (repetitions) for every section of the app: wireframe -> prototype -> gather feedback -> adjust -> design -> prototype -> adjust.
Just Do It!
Hopefully, this article has provided some helpful guidance on how to get started with your mobile app. That being said, the best advice I ever heard came from Nike: Just Do It! Don’t waste time. Just get out there and start working on your project. No doubt your dreams will become a reality!
This is a guestpost by Vasily Malyshev, CEO of Messapps and serial entrepreneur.