UX design can be difficult to understand, especially for a non-designer. Not everyone from the tech world will be familiar with the process either. To start very simply: UX design focuses on the needs of the user:in the design of any product. UX design and usability go hand in hand.
Usability is a quality feature that assesses how easy a user interface is to operate.
Usually paired as UX/UI design, both UX and UI processes focus on building attractive products and help solve a major challenge: How can we help users interact with a product easily and successfully?
In this guide we will explain some basic components to help you start your own UX design process. Since UI design is part of the UX design process, we will also illustrate some UI design steps. Have fun!
Step I: Hypothesis
Question the idea
The beginning of the UX design process usually starts with the formulation of a hypothesis, e.g. "companies need a tool to reduce plastic consumption" or "our product could use a new feature". Defining a hypothesis and then questioning it is the first step in the product development process with UX design.
Defining the problem space with UX Design
A problem space displays all the different components that contribute to the solution of a problem; a bit like a picture frame. A problem space helps to get a clear picture of the problems, to work out ways to solve them and to drive the implementation of the solution.
The aim is to find out through discussion and (user) research whether the problem is worth solving, and if so, to consider different solutions.
It is important to collect qualitative and quantitative information. On the one hand, to collect data and facts that invalidate or validate the hypothesis. And on the other hand, to get to the core of the problem in discussions and interviews.
If we take our hypothesis "Companies need a tool to reduce plastic consumption", we should find out in interviews with companies, for example, whether such a tool would be used and whether it would solve or improve the problem of "too much plastic waste" in the long term. This is where the classic product development process begins, where we create something. For our hypothesis "our product could use a new feature", we would analyse current user behaviour and conduct user surveys.
This phase (also called UX Research) is the very best way to generate knowledge and waste unnecessary resources. If a completely different problem emerges in phase I, you will be very happy not to have developed an unnecessary product or feature.
Step II: Start the experiment
You found out that your problem is real and that a product or new feature would solve it? Congratulations!
Then it's time to prototype possible solutions and evaluate the market. This is where the classic product development process begins, where we create something.
Tip: We are feeling our way along. Solutions that are created here do not have to be intended for eternity. Therefore: in this phase, especially for the first experiments, it is sufficient to test a few main features or elements.
Also, the whole thing does not have to be perfect yet. At this point, we must not hesitate to discard features and thus parts of the product. So don't try too hard to perfect everything aesthetically for now. In our experience, perfection makes it harder for product developers to try out new ideas, and instead people hold on to bad solutions for too long.
Start with your own design reviews
The easiest way to start is to test a product that already exists on the market. A website, an app, etc. that also tries to solve (in the broadest sense) your set problem and asks you the following questions:
- What exactly is the problem that the product is trying to solve?
- Who is the target group of the product?
- Why are there the features that there are?
- Why are these colours and fonts used?
- Why is this layout used and why are the individual components (e.g. buttons) arranged in this way?
If you can answer these questions, you will most likely find the answer to the question "Why is the product successful or not? And now you have the chance to create a better product!
Do your own UX user research for potential features
Start by asking your friends, family and (potential or actual) users what they want or expect from the product or service and what the features should look like. Some research methods include interviews, ethnographic research (observing people in their natural environment), surveys or so-called journey maps (visualising how a person uses a product). You probably won't get all the answers you are looking for, but some ideas to get you started.
When developing a product, the first design step should be to create wireframes. Wireframes are a simple structure of a website or app. They describe the functionality of a project as well as the interaction of the components, e.g. what happens when you click on a certain button. This step will help you understand the flow, user experience and layout. If you feel most comfortable with pen and paper, just use that for this step. This is the most cost-effective way, and it has been proven that the mental transfer from digital content to paper works very well for users.
Step III: Test your solution
Back to our UX design process. Testing is the last and most critical phase of the whole process. Discuss your ideas and solutions with some potential users, e.g. your friends. Testing is where you will discover the pros and cons and make changes accordingly. This is an essential and critical point in UX design. After this testing phase, you will understand what works and what doesn't and you can change the design before finalising it.
In product development, you will have to go through this cycle several times. Each time you will gain more and more knowledge about the problem area, the user interface and your users. With this knowledge, you will be able to improve the quality and overall user experience.
Important: At first, you only test your wireframes or you make a small click prototype. You don't have to go into fine design yet.
The UI design process
Important: Don't forget that UI design is only one part of the UX design process!
Decide on a colour palette
You can get inspiration from other products that are similar to yours. The most important thing is that your colour palette should match the characteristics of the product. You should also pay attention to colour contrast. If you are looking for inspiration for a colour palette, take a look at Canva's colour palettes. Or would you like to know exactly what colour a website you like uses? Then try the colour picker from ColorZilla try it out.
Choose a font that you like
Selects a font and sets the basic values for font size, font weight, line height and letter spacing to match the heading and paragraph sizes. Two fonts can also be used; the secondary font is then responsible for supporting the primary font.
Have you seen a font you like on a website but don't know which one it is? Fonts Ninja helps you find out which fonts have been used on a particular website. Or upload an image to WhatTheFont to find the most similar matches in their database.
Now start designing your components
Design means putting things together harmoniously. To achieve this, one should start by designing universally valid components. For example:
- Form elements
- Selection box
- Bread Crumbs
Also be sure to define the base height of buttons, inputs, modals, etc. to ensure consistency.
This will also help you to create your style guide. A style guide is a document that UX/UI designers create to document the growing body of design standards for UI elements and interactions. By creating a style guide, designers ensure consistency in product design throughout the design process. We recommend creating a style guide and thinking about a design system as a second step. This will link the design part with the software engineering part.
Uses icons and illustrations
If you only use text, it is likely that the user will get bored or leave in shock. Instead, use the power of icons. And don't forget: An icon is worth a thousand words! But make sure that the style of the icons is consistent and that coherent icons are used. It is also a good habit to never use icons alone, but always in combination with text so that the user clearly knows what it is for.
Our designers recommend Google Fonts or Font Awesome, but there are also a lot of other beautiful icons. These are already consistent with each other.
More useful UX patterns that will help you design your UI according to proven usability standards:
Time to put it all together!
After this first productive UI process, you get to the most beautiful part. You have already decided on colours, fonts, components and icons. So now it's time to put them together and see what you've already achieved!
Tip: Even if you consider the product finished and ready, there is always room for improvement. Therefore, you should continue to seek feedback and opinions to improve your product over time, even after the official release!
We hope this article has given you some insight into UX design. It is a constantly evolving process and the experience comes with time. If you are curious about UX design and constantly try different combinations and styles, your designs and products will become better and more user-friendly over time.
Our advice to you: research, get inspired, practice, create, repeat, and have fun. And if you need more help, contact us! We always give you one hour of UX strategy review for free!