How to Create App Design That Works
Design is essential to the success of a project. And the process of designing an app involves more than one designer. If an entire team — including business owners — take an active part in the app design process, they can create more beautiful and more useful products.
In our complete guide to app design that “works” we will walk you through Yalantis’s approach to designing excellent products.
Let’s ask some questions.
What does “design that works” mean?
Before we talk about creating “design that works,” we need to know what a “working design” actually means. We all know that there are two main design components for an app — UI and UX. What do these terms have in common? The answer is Users. Design “works” when users are happy. It’s as simple as that.
What is the process for creating app designs that work?
The design process is iterative. It looks more like a circle than like a straight path. There are several steps that you need to repeat, one after another, in every iteration until you come up with a design that really engages your users.
User experience design is a term that can be used to describe this circular step-by-step journey.
How can I create UX design?
There are a lot of approaches and algorithms in the UX design process. Here are a few of them:
- The UX design process suggested by effectiveui.com consists of five stages:
- Empathize — Learn about your customers
- Define — Construct a point of view based on customer needs and insights
- Ideate — Brainstorm many possible solutions
- Prototype — Build a representation of your solutions
- Test — Put your prototypes in front of users for feedback.
After testing, Effectiveui suggests returning to the “Ideate” stage and starting a new iteration from there.
- The UX design process suggested by Paul Hershey also suggests five stages of UX design:
- Preplanning
- Exploration
- Design
- Quality Assurance
- Feedback
These two approaches sound pretty similar, don’t they? There are lots of other similar schemes and algorithms created by designers all over the world. You can pick any process you like, but all of them come down to four basic steps:
Think (Understand how to make users happy)
1. Conduct consumer research:
- Who is the app’s target audience?
- What are their interests, needs, habits and lifestyles?
- Why do they need an app like yours?
2. Conduct market research:
- Analyse competitor’s apps.
- Find effective and ineffective solutions and patterns that have been used to implement those apps.
- Analyse your competitor’s apps’ audience — who they are, what they need, and why they’re using those apps.
3. Conduct stakeholder interviews:
- Ask your stakeholders for references, find out what they like and don’t like about competing apps, and ask what they would like to see in their ideal app. Make use of briefs, questionnaires, and moodboards.
- Elicit your stakeholders’ business goals.
As the result of your research, you need to create “personas” or descriptions of imaginary users of your future app. You need to define their goals and needs and write user stories based on their goals and needs. User stories are short scenarios that describe how users will interact with your app.
Use your experience and don’t be afraid to invent!
Create
Once you have gathered the information you need, you can start creating sketches. First, you need to draft your Information Architecture and Navigation:
- Create a mind map (site map) of your future application that will describe the app’s structure and the app’s logic (example).
- At this stage you can also create wireframes with textual content.
[Example of a mindmap for one of Yalantis virtual reality projects]
Next, create detailed wireframes. The best way to create wireframes is by using vector graphic editors (such as Sketch or Adobe Illustrator). Write comments for every screen and try to display the logic in as detailed a way as possible.
After the wireframes are ready, you can start building a prototype:
- Export all of your screens as separate images
- Use InVision (or any other tool you prefer) to build an interactive prototype with transitions
- Share your prototype
- Test the prototype (see the “Test” section below for details)
After your prototype has been tested and approved, start working on your visual design:
- Find an appropriate visual style using information from your research (design brief, moodboards, references).
- Don’t forget about developers: use Zeplin or Avocode for sharing specifications and assets.
Test
The earlier you start testing, the better. Once you have text wireframes, you can test them on real users. You should take advantage of every possible opportunity to get feedback. Ask your colleagues, parents, friends, and random people in your office building to accomplish certain tasks using your prototype and watch what happens.
Share your interactive prototype with everybody you know including your stakeholders. Let them test it as well. Continue collecting feedback even when you feel like everything is already perfect. After your product is released, start tracking analytics data and collecting user feedback.
Finally, go all the way back to the beginning: gather information, think, create a list of changes. Continue with wireframes, testing, design, testing, release, testing, gathering information…
Repeat: but when should I stop?
How many iterations do you need to create an app design that truly works? All of them! There is no such thing as a “final” design. There will always be something in your product that could be improved.
Consider your product a living creature: it should develop and evolve, getting better with each new version.
Do’s and Don’ts
Don’t try to fix all problems at once. Develop an MVP first, and try to fix major issues in the early version. Then, test every change you make as soon as possible.
In our next article we’ll give you our insights about how you can know that your design actually works. Stay tuned!
Read also:
Originally published at yalantis.com.
