03-LABlog_DesignProcess_March-web

The 3 stages of app design

Wondering how to make user-centric design a reality? At Love Agency, regardless of what we’re doing or what stage we’re at on a project, our users and their needs are always uppermost in our minds. We’ve formalised that focus into a three-step design process: define, design and validate.

 

  1. DEFINE

In this first stage we define our users, their behaviours and any particular problems we need to solve for them. With this essential information at hand, we can begin creating solutions for our defined problems and create some initial design concepts to take into design and user testing.

It’s the most critical phase of the entire process. We use qualitative, quantitative and generative methods to learn about our users, employing surveys, data analytics, direct observation and empathy to gain insights.

Based on this, and depending on what kind of data we have, we create three to five user personas (data based) or profiles (observation based).

We then use the behaviours identified in our research to create lists of user stories, goals and needs for each persona, as well as specific user scenarios. This is where empathy and ‘soft skills’ come into play – we put ourselves in our users’ shoes to understand how they’d see the scenarios we’ve created.

Next, we create user journeys for each persona. This is the path each user takes as they find your product or engage with your concept. At this stage we also conduct detailed competitor analysis, to help us understand and define the current market and user expectations.

Our research culminates in the creation of a ‘user needs’ scorecard. We list all the user needs we’ve identified and score them (out of ten) against three criteria: user need, business need and technical difficulty. Combining these three scores into a single total for each user need helps us generate a prioritised list of needs.

Finally, we:

  • List all user needs according to the priorities established in the scorecard
  • List all the attributes required to meet these needs
  • Create a sitemap from our information architecture map
  • Bring these together to create a high-level wireframe to set up the design phase.

 

  1. DESIGN

In the design phase we work from the concepts, wireframes and IA map created in phase one, which are our reference point for all that follows. They keep us focused on our users, their needs and the problems we’re trying to solve for them.

We begin by formalising our wireframes. The whole team gets involved – including designers, engineers and product directors – and our engineers use their up-to-date technical knowledge to push our designs even further. This helps us visualise transitions, finalise the information architecture and work out any technical challenges that design can help solve.

Our goal is to create a smart user interface (UI). This is more than just choosing the right colours, fonts and graphical elements; it extends to invisible UI elements like pro-loading data in the background and basic AI functions to help the app predict users’ next actions. Working in an agile environment, we quickly iterate and sketch to respond to design challenges, validate our work, then turn the wireframes into an engaging UI.

With these elements in place, we design the ‘delights’ that will bring the app to life and give users feedback on their interactions. We use mood boarding to set the tone, then mock up screens and UI elements, animations and transitions to ensure navigation is easy so users will never get ‘lost’ in the app.

We believe a delightful experience arises from an intuitive, appealing design that comes alive when you use it. But of course, care must be taken. The app shouldn’t be cumbersome, and we always keep in mind that animations and other interactions will be seen or experienced hundreds, if not thousands, of times by users.

 

  1. VALIDATE

In the validation phase we check that our designs solve the problems and meet the user goals defined in phase 1, and that the work done in phase 2 has made them user-centric and appealing to interact with.

There’s a technical side to this – prototyping designs and formally checking against project requirements – and also a rigorous human-centred testing and evaluation side.

Taking our user profiles, scenarios and goals as our starting point, we ‘role play’ using the app to test whether any design changes are needed. We bring in testers and focus groups so we can observe how users ín the wild’ come to understand the app.

And once we have a minimum viable product (MVP), we test it with real-life users and gather as much information and analytics, and as many observations, as possible.

It’s worth noting that some validation can take place between phases one and two. In an agile project environment, a lot of iterations will be made from defining and validating to get a concept ready for design. Even after it’s been designed, interactions can be further refined to make a better, more user-centric product.

Because that’s our goal – to create a beautiful app whose UI goes more than skin deep and plays a critical role in creating a great user experience (UX), with user goals met and an intuitive design. Those are the apps you don’t want to leave, even when you’ve finished the task you were using it for, simply because operating them is so enjoyable. It’s not easy, but having a clear-cut plan to achieve it is the first – and second, and third – step towards getting there.

__________________

Britta Angel

UX Lead

Love Agency