Knowledge Hub Tutorial 3

laptop and mouse on a wooden table
Amazon recently hosted the AWS Summit Berlin, around 8000 people participated. Amazon showed off the latest additions to their services, backed by talks suited for a wide audience, from beginners to experts.
Before I explain what UX and UI are in detail, I would like to show you what the product creation process looks like (Figure 1).
ui ux presentation

Product creation process

Notice that the product creation process has many interactions. There are combinations of UX and UI methods used in every stage and UX is responsible for understanding and analyzing the problem that should be solved, knowing the audience for who we solve the problem, and determining how good or bad the solution that we designed is. UI stands more for visualization and using knowledge about colors, typography, spacing, proximity, consistency and other aspects in design. My favorite explanation of what UX is versus what UI is and what the difference between them is, is shown below in Figure 2 and 3.

visual graph of a brain

Product creation process

In Figure 1 you can see the relevant UX and UI methods listed below each stage of the product creation process. I would like to give you a more detailed view of the most common methods that we use at Visual Meta:

  • Persona and Storytelling
  • Sketch, Wireframe, and Prototype
  • User Test and Interviews, Usability test and Scenario
  • Pattern library and Heuristic analysis

» Don’t try to create a product for everybody. Focus on one target group and if they like your product, most likely other people also will find it useful «

It is important to create the right persona, because the persona always reminds you who you are creating the product for. Without keeping this critical information in mind you can get lost implementing a variety of features and functionalities, just because it is possible. It is best to create a strong focus, and creating the right persona helps you to do this. As I heard at a Design Thinking workshop that I recently participated in:
Spark icon

Tip: It is important to create the right persona, because the persona always reminds you who you are creating the product for.

A great example of this principle in action is the story of cabin luggage creation. Cabin luggage was initially created for air stewards and stewardesses who needed a small bag that was easy to carry and could fit all of their essentials for the flight. The air stewards and stewardesses were the target group first using cabin luggage – but many other people also found it to be useful, and nowadays everyone uses it!

When we need to develop a product with a human to computer interface, a scenario is also an important step. Using the scenario we can specify which screens need to be designed. A Frontend ready product with a fully interactive design requires a lot of work! Therefore, we need to understand how, when and in which situation the user would interact with our product. Which screens step by step he or she will see.

To create a scenario we usually use a whiteboard split into areas for each screen. Together, the screens tell a story that the design team has created out of millions possible stories.
Storytelling gives us a clear understanding of how many screens we need, which screens exactly they should be, what is included in the screens, and which functionality we need to include in our prototype.

The Storyboard leads us to the stage of prototyping.

Sketch, Wireframe, and Prototype

There are a lot of tools for prototyping. Starting from paper drawing, Lego and Powerpoint continuing with professional prototyping programs like Sketch. Based on the tool you use for prototyping it can be either a low- or high-fidelity prototype. The more interaction close to reality and design understanding a prototype can provide the higher fidelity it has. Look at Figure 6 below.
Bitmap

User test and Interviews, Usability test and Scenarios

Testing is a method that can be used at any stage of product creation. The more often a company conducts tests, the better quality product will be developed with less time and development costs because it is always easier to fix a problem as early in the product creation process as possible, for example, before a design goes to development. At the understanding stage, a user test approach is mostly used. It is a method of collecting data about our users, more generic information about how they do this or that. The biggest difference between a user test and usability test is that during the first one you listen to what the user thinks he does. For the second approach, you observe what the user really does despite what he thinks he does. Sometimes you can see that actions are different compared to thoughts.
German flag
Download in German
England flag
Download in English
Italy flag
Download in Hungarian

You might also like

Become a partner

To get started, select your market and apply to list your products on our website.

To your Partner Dashboard

To monitor and steer your campaign, select your market and log in to your Partner Dashboard