Intive Blog

From the Sketch to the Prototype

How can we identify the potential issues users might have? How can we design with a focus on solving those issues? User-centered design is an iterative design process by which designers focus on the user and their needs.  

Due to its iterative nature, in user-centered design the process is never complete, and we’re always starting over. But even though we may not see the finish line, we can determine three stages that outline the type of work to be done. These are the analysis, design and evaluation stages, and we’ll discuss them shortly. 

 

 

 

First Stage: Analysis 

Why is it important to know the user? Sole Mari, former intiver -and a good friend of our house-, UX professor at Coderhouse and editor of the UXPA magazine, says it’s essential to know who will be the potential users of our app in order to empathize with themwhich is one of the core aspects in user-centered design. Empathizing with our users will help us understand their situation, context and needs first-hand, and will provide us with real data to define the issue to solve. So how do we do that? One way is to create a user persona profile with different qualitative and quantitative tools. 

Which aspects can we analyze thanks to the user persona profile? 

  • Needs, goals, behavior patterns 
  • Personality traits 
  • Users relationship with the digital universe (access to technology, use of apps) 
  • Situation/context of the issue to solve 

What do we achieve during this stage? 

  • Empathy with someone we dont know 
  • Knowledge of their situation and context 
  • Connection with their needs and feelings 
  • Identification of the issue to solve 
  • Definition of possible solutions 

Second Stage: Design 

Based on the issue we identified in the previous stage, we can devise a solution and start designing using techniques such as sketching and wireframing. 

What are the advantages of creating a manual sketch or wireframe? 

  • Manual activities foster creativityDoing a manual sketch or wireframe will allow us to think out of the box and use our imagination. 
  • Everybody can do it, there’s no need for specific technologies, tools or knowledge. There aren’t right or wrong ideas: Everything is fair. 
  • These are simple, fast and economical techniques. 
  • Even in a rough way, we can sketch designs quickly. 

 

 

Steps for creating a manual wireframe or sketch: 

  1. Consider how the navigation will be
  2. Design each one of the screens
  3. Consider the constant elements (menus, icons, etc.)
  4. Think ofuseful structures (modals, drop-downs, lists, filters, etc.) 

Third Stage: Evaluation 

In order to validate the solution we propose, the next step is to test the app through user testing, which we believe is the most simple and economical way. In that way we will be able to observe behavior patterns, strong points and difficulties.  

First, we have to create a script for the test and do the testing internally. Then we can do the testing with users, assigning tasks based on roles. 

Tasks assignment based on roles in user testing: 

The moderator is the person who reads the script to the user. They don’t set a specific path for the user to follow, except if the user doesn’t know how to continue. 

The facilitator is the person who displays the sketch that should appear when the user taps or clicks on buttons. 

The team observes in order to detect reactions and behaviors, all of which they should write down in detail. 

The user follows instructions, is encouraged to express their opinion at all times and tell which is their line of thinking and acting. At the end of the test, we can also ask them questions.  

It’s very important to define parameters in order to obtain a good test sample. And it goes without saying, the user who’s testing the app mustn’t be involved in the app’s design process. 

Once we get the results, we can analyze them through methodologies like the System Usability Scale (a questionnaire and evaluation scale for users) or the task success rate (which gives a 100% score when the user is able to complete a task on their own, a 50% score when the user is able to complete a task with some help and a 0% score when the user fails to complete a task). 

Documentation is Key 

Registering everything that occurs along the process is critical for identifying improvement areas after iterating a few times. In this way, we will be able to build a process of continuous learning that will allow us to keep evolving and delivering value during each stage of the product’s life cycle. 

What are other tools or methodologies you use to design with a focus on the user? 

Paula Becchetti

Paula is the editor of intive’s blog. She holds a degree in Audiovisual Communication from Universidad Nacional de San Martín (UNSAM) and is a Content Manager specialized in blogs, web content, email marketing and social media. Her extensive experience in the software industry makes her very valuable when it comes to translate technical content into a colloquial language. According to her own words: “I connect with the world through technology, but also through everything that breathes, sport, music and my travels.”

Add comment