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.
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
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.