Key takeaways
|
Over 90 percent of consumer's mobile time is spent using apps, according to data from Yahoo Flurry. The speed with which the mobile market has grown and continues to grow has seen app designers implement a more iterative approach to mobile app development. The mobile app development process differs from website development in that lifecycles are much more frequent, and developers have to bear in mind different devices, screen sizes and operating systems, both in the design stages and when user testing. Traditional website development styles, aimed at creating one version of a website, don’t tend to work as well when it comes to mobile app development, which calls for a more agile approach.
All of which has, unsurprisingly, led to the adoption of iterative, rapid development processes. Prototypes have a role to play in this agile approach, enabling developers to build, test, iterate, re-test and re-build rapidly and at lower cost (not to mention allowing all stakeholders into the process early on). A prototype of your mobile UI design is an essential part of a mobile app’s design process.
This post breaks down the mobile app development process into 12 steps and explains the role of iterative prototyping throughout.
Step 1 – Define the goal or USP of your app
Inspiration may play a role in coming up with a winning mobile app, but that inspiration has to be channeled and directed into clear goals from the outset. The first step on the journey to bringing an app to market is to ask and answer some core questions: what is the app’s primary function? What problem does it solve? Who is the primary beneficiary or audience?
In seeking the answers to these questions you’ll hopefully come around to defining what makes your app ‘sticky’ – the reason why users will want to have your app in their pocket and to be connected to your brand at all times. Apps provide a unique chance for boosting brand loyalty, so define your USP for users at the outset of your development process. For example, Spotify’s USP is to give users legal, take-anywhere access to millions of songs. It’s likely that at the start of their development process the people at Spotify defined a problem or situation faced by users – concerns about illegal or unpaid downloading, an increasingly mobile lifestyle - and set out to solve that problem.
Coming up with a strong USP obviously requires a good target audience analysis, so at this stage in your app development you’ll need to discover your ideal clients and their pain/pleasure points. Focus groups and questionnaires will help you develop user profiles, and should be filled out with generalized mobile preferences and behaviors
Identifying your goal, USP and target audience will allow you to define a minimum viable product (MVP), a skeleton of product features that you can test-drive before building a full solution.
Step 2 – Wireframe on paper with your team
Once you’ve defined your goals and what makes you different, it may be tempting to jump straight into designing with a tool such as Photoshop. But if you’re working with a team (or even solo), taking a step back and paper wireframing will mean that, if you have to change a foundational element of your design, the change will be relatively quick and painless.
Sketch out a rough paper prototype to visualize key functionality and main user flows. While paper prototyping is normally used to map out individual UIs, it can also be helpful in devising customer journeys and navigation flows if done right. You can stick with the basics and just use sharpies and stickers to map your app, but there are also a surprising array of tools and templates available to help you make the most of the paper wireframe stage. There are plenty of downloadable mobile screen templates available online, which you can combine with paper cut-outs of buttons and icons (also available) to create paper prototypes that look good enough to be presented to potential investors if need be. If you´re planning on doing a lot of developing for one particular operating system, you can invest in a metal stencil UI Stencils, which allow you to stencil widgets freely onto your wireframe for both iOS and Android.
No matter the tools or methodology you eventually choose, this is the moment to get everyone on the team on board with what you’re working towards; once that’s established, you can think about going digital and wireframing it in a prototyping tool.
Step 3 – Check out the competition and learn from their mistakes
With an average of 1000 apps submitted to Apple’s app store daily in 2015, it’s a fair bet that someone somewhere has attempted to solve the problem you’re trying to solve, or provide the user with the same functionality. Instead of casting a wary eye on these competitors, learn from them – both the failures and the successes.
Research into the competition should help you in 4 key areas
- Reveal who is doing the same thing
- Provide inspiration
- Give an insight into technical requirements and functionality
- Produce examples of marketability and profitability
Search the app store and Google play for relevant terms or keywords and look at related apps and terms as well. Note down all the relevant apps and check out the customer reviews section, as well as making judicious use of online fora to see what real users are saying.
If an existing app contains functionality that you really like, you can check if it uses open source controls. To find these, go to the apps acknowledgements page and find which open source components the app uses; it’s possible you can use something similar to make a better user experience. The open source marketplace Cocoa Controls is a great resource for finding out the open source controls used by your competitors.
Of course, a thorough competition analysis also has the potential to reveal that your big app idea has already been successfully developed and launched by someone else. If your app solution has already been invented, check out how well it’s doing by using brand recognition or awareness tools, or a free tool to help you figure out the brand sentiment around your competitor.
If you can’t define what value your product will add to the existing topography, or if you can’t come up with a solid risk mitigation strategy, it’s probably time to call it a day and move on to your next mobile development project. Keeping detailed records of your design and development process, even if you stall at this stage, will mean that learning lessons and constant improvement become part of your methodology.
Step 4 – Story-mapping and gathering requirements
With your objectives defined and competitors identified, you can either take things digital or stick with the paper trail a little longer. If you want to keep things analog you might now want to start building out user stories, once again on paper and post-its; this is a great way to make sure you stay open-minded and creative with your story-mapping before getting into pixels.
That said, mapping your user stories the old-fashioned way can have disadvantages on occasions, particularly if your team is remote, or you’re looking for a dynamic storyboard which stays live and integrated throughout the whole design process. If you do decide to go digital with your user stories, tools such as StoriesOnBoard and FeatureMap offer browser-based solutions that allow you connect with different teams.
While storyboarding tools like those mentioned above are great for many projects, if you’re implementing an agile methodology overall they can be obstructive in terms of reporting. In this case, you might want to instead move on to working with an interactive prototyping tool. At the start of an app development project, wireframing a basic prototype in a digital tool such as Axure, InVision or Justinmind can help elicit visually new and better requirements from stakeholders, and make sure everyone is in agreement with the project’s ambit.
At this stage, your basic wireframe functions as a visualization of the solution to the problem identified in Step 1, and having the requirements gathered together within your prototyping tool obviates the need for hefty explicatory requirements docs.
Step 5 – Define user scenarios
Using your wireframe, you can begin to ascertain if the app is working in the way that you or the client wants, as well as being user-centered. Prototyping tools allow you to define navigation flows by creating and testing user scenarios, made up of your wireframe screens, and actions on the part of the user. You can link different components to each other in the scenario and thus map navigational flow; these can be converted into functional flows once you move your wireframe up to high fidelity prototype.
At this point you’ll be honing your project requirements, demonstrating workflows to stakeholders and pointing out any areas for discussion. Asking stakeholders or clients directly how they want specific elements to function is good practice, as is posing ‘what-if’ scenarios and walking through workflows to expose hidden requirements. You can add comments in your prototyping tool so that even if you can’t gather all stakeholders together they can still work collaboratively on refining requirements.
Step 6 - Update requirements
You may find at this point that you’re missing a screen, a navigation flow goes down a one-way alley or you’ve failed to address a requirement sufficiently. This is a great time to find that problem, rather than when you’ve had a developer code your whole app. Within your prototyping tool you can customize requirements and add new fields on an individual basis.
Step 7 – Build a high fidelity prototype incorporating stakeholders’ comments
Once you’ve got a full set of revised, agreed requirements the next step is to shift your static mockup to a high fidelity prototype. Add realistic animations and transitions to the existing wireframe to show potential interactions and test out the scenarios previously hypothesized.
Shifting up to interactive without yet going full steam ahead to code means there will be less room for ‘interpretation’ (read, misunderstanding) between design and development teams later on.
Step 8 – User test your prototype on various mobile systems
User testing is the cornerstone of producing a good mobile app; testing exposes bugs and reveals redundant design elements that might have gone unnoticed. The user testing stage is key to keeping the project on-budget too: changing basic UI concepts once they’re coded won’t be too expensive, but doing a massive overhaul of a coded feature can be hugely costly, occasionally increasing spend by up to 100% if the whole app has to be changed.
User-testing can be done in numerous ways, and finding the right combination for your software will ensure a thorough process. User testing software such as Validately and Crazy Egg obviate the need to set up your own user testing lab, complete with target audience and hardware, and many prototyping tools are fully integrated with such software. Combining these tools with your own A/B tests or other techniques, all of which can be run on a variety of operating systems with your high fidelity prototype, means that you’ll collect expansive user feedback.
However, a word to the wise – early stage testing on prototypes is key when you’re looking to cut costs, but testing on the actual coded software should definitely not be delayed until the last minute. Depending on your project, you might want to break away from the prototype at this stage and bring the developers in the code your ideas. There’s no 100% weatherproof substitute for seeing how users interact with your actual software, and iterating on the coded software will ensure you stay agile.
Step 9 - Validate requirements
At this stage of the app development project, you can check the final rules with your iterative prototype before moving on to code. On projects that still leverage static requirements, a comprehensive document review will be done; with an interactive prototype you can share the proposed solution with all stakeholders and, from there, carry out iterative prototyping based on the comments they leave in the prototyping tool.
Step 10 – Let the developers lay the foundations
Now you have in hand a clearly defined app, you can call in the developers and have them lay the groundwork for their agile development sprints. As a foundation, the development team should set up APIs, servers and storage; pass along the requirements and prototypes to give them a good base from which to start iterating.
Step 11 – Build your UI skins and cycle feedback
Using the comments gathered both from stakeholders and user testing, developers can now transfer your prototype screens and interactions into high-fidelity skins. Developers might choose to use a backend service like Kinvey, and to bolster their front-end work with SDK tools such as Adobe PhoneGap. Data storage and integration, server side logic and versioning should now become the focus of the project as far as back-end goes; for front-end, prototype screens are hard coded into the UI.
Whatever technology the development team leverages, it’s paramount at this technical juncture to maintain a user-centric perspective and incorporate the user feedback acquired up until now.
On managing your development team, agile is the watchword. To stay agile, the dev team should prioritize flexibility, fast change-response, iterative approaches and useful customer collaboration. You can organize the team into Scrum sprints to achieve these development ideals, but be aware that Scrum sometimes comes with its own problems… however you organize, iterative development and the user experience are still at the heart of the process.
Step 12 – User testing… again
At these closing stages you should actually have your mobile app fully coded and in your hands, free from dummy content and full of polished UI elements. But before you get too excited, it’s time for one more round of user testing on all devices and with a range of users. If the project doesn’t have funds to organize this final user testing stage, there are options: call in a “user marketplace” such as ATryBox and have them find adequate user groups and run tests, or involve a testing app such as Validately or Framer.
And if you want to get creative with user testing here are plenty of unexpected options, from triading to drunk testing.
Where to go from here
Iterative prototyping can be a potent weapon in your mobile app development arsenal. From the centrality of users and user stories, to front-end/back-end tools and final stage user testing, each development project passes through certain gateposts on the path to realization and launch. While these markers are helpful in organizing both your tasks and your expectations, no two mobile development projects are the same: by using tools and methodologies that allow your team to be reactive as well as proactive, collaborative and creative, you’ll ultimately build apps that speak to users’ needs and provide great UX.
About the Author
Cassandra Naji is Marketing Content Editor at Justinmind, a prototyping tool that allows you to prototype web and mobile apps so you can visualize and test your software solution before writing a single line of code. Before she was a techie, Cassandra was an old-fashioned journalist and communications professional in Cambodia and Taiwan. She is now based in Barcelona.
