UX design can be complicated to understand, especially for a non-designer, and people who don’t work in the tech world will likely not be familiar with the process. To start at the most basic level, UX design emphasizes the needs of users when designing any product, as UX design and usability go hand-in-hand. Usability is a quality attribute that assesses how easy user interfaces can be used.
Normally paired as UX/UI design, both UX and UI processes focus on building attractive products and help solve one of the biggest challenges: how can we help users to interact with a product with ease and satisfaction? Plus: how can we build a product that is really useful and solves a real problem?
In this guide, we will attempt to explain some basic components to help you start your own UX design process, and we will also show you some UI design steps.
Part I: Hypothesis
Question your ideas!
A UX design process usually starts with the formulation of a hypothesis, e.g. "Companies need a tool to reduce plastic consumption". Defining a hypothesis and then challenging it is the first step in the product development process.
Defining a problem
A problem space indicates all the various components that go into finding a solution for a problem; a bit like a frame. A problem space helps you to get a clear picture of what the problems are, work through ways to correct them, and drives the implementation of the solution.
The goal is to explore - through discussion and research - whether your problem is worth solving, and if yes, take action. Be sure to collect qualitative and quantitative information. On the one hand, to collect data and facts that invalidate or validate the hypothesis. And secondly, 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, for example, find out in interviews with companies whether such a tool would be used and whether it would sustainably solve or improve the problem of "too much plastic waste". This is where the classic product development process begins, where we create something.
Part II: Start an experiment
Once you have figured out your problem is worth solving, it is 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 moving slowly forward. Solutions that appear here do not have to be intended for eternity. Therefore: in this phase, especially for the first experiments, it is enough to test a few main features. 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 at first. We have made the experience that it is then all the more difficult for product developers to try out new ideas and instead they hold on to bad solutions for too long.
Start with your own design reviews.
The simplest way to start is by reviewing a product you like (or even one that you don’t like). It should be a website, app, etc. that also tries (in the broadest sense) to solve your set problem. Ask the following questions:
Why do exactly these features exist?
What is the problem the product is trying to solve?
Who is the target group of the product?
Why are they using these colours and fonts?
Why are they using this layout, and why are the individual components (e.g. buttons) arranged this way?
If you can answer these questions, you will most probably find the answer to “Why is this product looking so good and why do I like it so much or why does it not have a good standing on the market?”. If you were looking at products that you don't like, this might be the chance to come up with an improved solution.
Do your own UX user research for potential features
Start by asking your friends, family, and (potential or actual) users what they would like to see or expect from the product or service, and what the functionalities should be. Some research methods include interviews, ethnographic research (observe people in their natural setting), surveys, or journey maps (visualization of a person’s use of a product). Probably you will not get all the answers you are looking for, but some input to begin with.
When developing a product, the first design step should be to create wireframes. Wireframes are a simple structure of your website or app. It describes the functionality of a project as well as the interaction of the components, e.g. what will happen when you click on a certain button. This step will help you understand the flow, user experience, and layout.
If you are most comfortable with pen and paper, just use that for this step. It’s the cheapest way, and it is proven, that the mental transfer from digital screens to paper works very well for users.
And if you are most comfortable with digital tools, then our designers can recommend Balsamiq or Mockplus for drawing wireframes, but there is no right or wrong choice.
Part III: Evaluation
Finally... Test your solution
Back to our UX design process. Testing is the final and most critical stage of the entire process. Discuss your ideas and solutions with some potential users, like your friends. You will discover the pros and cons while testing it out and will be able to make changes accordingly. This is an essential and critical point in UX designing. After this testing phase, you will understand what worked out and what did not and can change the design before finalizing it.
Product development will require you to go through this cycle several times. Each time you will gain more and more knowledge about the problem space, the UI, and just the product in general. With this knowledge, you will be able to increase the quality and the overall User experience.
Important: First, you only test your wireframes or you make a small click prototype. You don't have to go into fine design yet. After this critical wireframe test, the UI design phase starts!
Now let’s start the UI design process
While UX is a series of tasks focused on the optimization of a product for an efficient and enjoyable experience, UI design will focus on the look and feel, and the presentation of the product.
Important: Keep in mind that UI design is only one part of the UX Design Process.
Decide on a Color Palette
You can take inspiration from other products similar to yours. The most important thing is that your colour palette should match your product’s characteristics. Also, be sure to pay attention to contrast. If you are looking for some inspiration for a colour palette, have a look at the colour palettes by Canva. Want to know which exact colour a website you like is using? Then try the Color Picker by ColorZilla.
Choose a font you like
Choose a font and define the base values of font size, font weight, line height, and letter spacing, to be consistent with heading and paragraph sizes. You can also use two fonts; the secondary font will then be responsible for supporting the primary font. Did you see a font you like on a website but don’t know which one it is? "Fonts Ninja" will show you which fonts were used on a certain website, or upload an image to WhatTheFont to find the closest matches in their database.
Start designing your components
Design is putting things together in harmony. To do so, you should start designing common components. For example:
Also, be sure to define the base height of buttons, inputs, modals, etc. for consistency.
This will also help you to build your style guide. A style guide is a document that UX/UI designers create to document the growing set of design standards for UI elements and interactions. In creating a style guide, designers ensure product consistency throughout the design process. We highly recommend creating one and think about a design system in the next step. This will bring together the design part and the software engineering part.
Use Icons and Illustrations
If you only use texts, your user is likely to get bored or to leave in shock. Instead, use the power of icons. And don't forget, one icon is worth a thousand words! But be sure to be consistent with the icon style and use related icons. It’s also a good practice to use never to use icons alone, but always in combination with text, so that the user knows for sure what it’s meant for.
Our designers recommend Google Fonts or Font Awesome, but there are a lot of other nice icons as well. Those are already consistent with each other.
If you want to know more about it, have a look at our blog or listen to our Podcast episode about UX Patterns for UI Design.
It’s time to put everything together!
After your first productive UI process, you will reach the most gratifying part. You already decided on colours, fonts, components, and icons. So now it’s time to put them together and look at what you have 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 gave you an idea about UX design. It’s a constantly evolving process and experience is directly proportional to practice. If you’re curious about UX design and if you constantly practice different combinations and styles, your designs and products will only improve and get more usable in time.
Our advice: Review, be inspired, practice, create, repeat, and have fun doing so. And if you need more help, contact us! You always get one hour of UX Strategy review for free!
More UX blog posts for you!