Whether you're an entrepreneur wanting to know more about how apps are designed, or a beginning UX/UI designer, this post will help you get the basics of design vocabulary along with the step by step process of prototyping an app (any kind of it, but we'll keep a mobile app in mind).
As a design and development company, we know more than a thing or two about this process and will illustrate it with some of our own examples.
But first: why should an app be prototyped in the first place? Well, here are five reasons for that:
- Getting the look and feel of the whole product before planning its architecture is a great way to avoid mistakes that will be extremely expensive to fix.
- A prototype allows gathering user feedback and improving the product's user experience even before it hits the shelves.
- Prototyping also allows planning ahead: if you have a product roadmap, you can choose the least troublesome way of adding new features to the user interface.
- Prototyping includes a few stages requiring a lot of communication between stakeholders. The whole process is designed to allow making changes on the go because of changed decisions. So in the end you'll get the UX and UI of the app that will be 100% agreed by all involved people.
- Finally, it's just the easiest way to design your app AND consider all the myriads of ideas that you might have about it.
To build an app prototype, you first need to start with a flow chart.
Flowcharts
Whatever your app's idea is, what you need to do first is to turn it into a scheme explaining possible user scenarios, i.e. what users should be offered with on every step of their journey of interacting with your app.
Such schemes are called flowcharts. Initially, flowcharts were used to represent an algorithmic solution for a problem. Hence they can be used in many tasks requiring visualization, from process documenting and bottleneck identification to task automation or delegation and project planning.
In software development EGO, just like any application design company, uses flowcharts to represent initial app logic. For instance, here is a common flowchart for user authorization in apps.
The more features an app offers to users, the bigger are the flowcharts to explain their functionality.
What makes a flow chart different from, say, a user flow, is using a special shared visual language, like rectangles for actions, diamonds for decisions, and arrows for flowlines. Different contexts might also offer additional symbols for use. So before making your first flow chart, make sure you have all the symbols you might use at hand and select the chart creating tool that fits you best.
Sketches
Once the flowchart is ready, a designer proceeds to making sketches. Sketching is basically brainstorming and idea processing. Polishing and editing will be done later.
You can use anything for sketching – a tissue, a board, or a tablet – as long as it doesn't slow you down in working with your ideas. In the end, you might want to make sure you don't have any blind spots or unaddressed elements in your flow, though you surely can return back to sketching later in case you missed something.
This stage is especially helpful to make basic navigation decisions, like if you need a control panel, and how many icons you want to have here, or how the settings menu should be called, and so on.
In the very early days, when EGO Creative Innovations was mostly a custom web design company, sketching was the central process for gathering technical requirements from our clients.
Wireframes
Once sketching is done, a designer proceeds to wireframing. Here, the design should represent the structure of the information and basic ways of users' interaction with the interface.
Unlike sketching, this stage requires attention to details, since all wireframes should follow the unified design logic. You know wireframing is complete if it:
- Provides clear page structure
- Follows strict information architecture
- Includes intended functionality
- Has consistent user flow
And most importantly, wireframing is complete when all the product stakeholders approve the wireframes. Because the whole idea of this process is to design your app's interface before the developers will start turning it into code. Creating wireframes is cheap, but making changes in the design when it is already done in code is not.
In the picture above, you can see that wireframes are usually black and white. That's because turning the logic into the actual design with colors is the next stage when you need to come up with mockups. And with wireframes you have three options.
- Low-fidelity wireframes. They omit detail and look like hand sketches. Those are usually done in the projects where the sketching phase is omitted.
- Mid-fidelity wireframes. Those boast accurate representation of interface elements and take advantage of different font sizes and shades of grey color to define different prominence of different elements.
- High-fidelity wireframes. These contain actual content and pictures in addition to all the advantages of mid-fidelity wireframes.
Being a mobile/web design company, we prefer going for mid-fidelity wireframes since actual content and pictures will be added on the mockup stage.
Mockups
Mockups are still static, but they represent the visual design of the app. Unlike wireframes, mockups should reveal the possible content on the page. This is where you'd also prefer to think through the typography and iconography. And if you have or plan to have apps on multiple platforms, this is the best time to think about the continuity of desktop /tablet/mobile interfaces.
In the end, on the mockup stage, you decide how your users will recognize your apps' visual identity.
Prototype
Now you can connect your mockups into a prototype imitating the user's interaction with the interface. With it, a user can click different elements and 'feel' how the app works.
Of course, it will always show the same content blocks, so this interaction is virtual, but it really helps in validating the idea, tracking user experience, and checking if apps' design performs as intended (whether the user understands where to tap and how to get the required thing done within the app).
Other than that, a prototype can really awe stakeholders and investors, if that's your case. As a prototyping company, we’ve been in that situation more than once.
Being a tangible version of a yet undone app, a prototype also helps plan the development cycle and budgets for it, thus removing uncertainties on your way to success. In the end, even a brilliant idea might die because of bad realization, but an average idea can win because of the attention to details and all the small decisions you can make through the prototyping stage.
User flow
The final design stage of prototyping is making a user flow.
A user flow is a hybrid of block scheme and visual interface. It still shows possible user scenarios, but this time it connects different screens rather than steps.
At this point, it might seem that there are too many steps in creating an app's design. If the prototype is already done, why care for a user flow?
A user flow is essential in creating a superior user experience since it allows you to pay attention to very important aspects of the user experience, such as:
- How many screens and taps it requires for a user to perform the desired task
- Is it clear for a user what is expected to be done next and what is their current progress on the task
- If you have a buyer persona for your project, a user flow can help you see if the app addresses not only their goals but also pains; whether it follows their behavior patterns and fits their motivations, etc.
- Do you stand out enough among competitors with your user experience?
With a user flow, you can also make sure there are no dead ends and unnecessary loops in the user journey, see if a specific scenario requires too much effort from a user, figure out if you can offer a better-tailored experience for certain target audiences of your app, and, last but not least, make sure your product roadmap puts essential features first.
Later, once the app is already released and actively used, you can use various analysis tools that will help you see the effectiveness of the user flow you designed (like if people complete their goals, where they get stuck anywhere, if there are any abnormal ‘mistaps’ etc.) and improve your UX by quickly addressing found issues.
And if you have an idea of a bigger change, you can always perform split testing, and the easiest way to plan the changes in the interface is to add them to the user flow chart.
So long story short, a user flow is a way of documenting your apps' design and changes you want to apply to it. If design and prototype companies of your choice practice creating them, you can be sure they’re experts in what they do.
Instead of Conclusion
Finally, here's the comparison table of different design stages in the process of prototyping. Feel free to use it as a crib.
And in case you need help in designing your app, we have a prototyping service plan. Within 3-4 weeks, we’ll make a prototype of your app and a presentation of the work done. Learn more about it here: https://www.ego-cms.com/plans
