6 Steps Of UX UI Design Process

・6 min read
6 Steps Of UX UI Design Process

Every process should consist of well thought through steps that not only help to plan out the work but also systematize what has to be done in order to achieve the set goal.

As Steve Jobs once said: ‘Design is not just what it looks like and feels like. Design is how it works’. Great user experience is what makes your product unique and appealing to the customers.

This process may be daunting at first, but with the right steps, designing will become a pleasurable experience.

Step 1: understand

The first step of the design process is about creating a strategy and getting to the core of the product development process. This is where we aim to understand the values standing behind our customer that will help us adjust the service to their vision. We should not be afraid to ask about marketing goals, selling points or strategies. Getting access to marketing material as well as consulting people responsible for sales and marketing will help to create client’s profile.

In this step, the design team discusses the product with the Product Manager. During a brainstorming session, you should determine the end-users and define the use cases. Ask about the client’s selling points of the product and their competition.

All the gathered information will give us some solid ground to build the product on. At this point, it can be good to consider creating a presentation for the client to keep them engaged and gather the first feedback.

Tip: Remember to document every step of the process - this will serve as a backup if at some point confusion arises as well as a tangible proof of your work.

Other things to consider here are: sending out questions about the product for the client to answer, selecting the contact person (people responsible for the project on the client’s side), creating a list of competing products.

Step 2: research

When the initial conversations are over you are ready to dive deeper. The second step is about making research (if you have a working product it is also about evaluating it), analyzing the competitors, latest trends, but always having in mind the guidelines prepared by your client.

The list of competing products should include a detailed analysis: strong and weak points, good features, interesting solutions as well as those we do not like. If a product we are creating already exists - prepare a detailed analysis for it as well.

Research should help you decide on the overall style of the product (follow the recurring themes or to branch out), but without going into details which fonts, graphics or colours to use. During this step, you can also think about the possible layout of the website. Creating a mood board where all the ideas are gathered and showing it to the client is a great way to, again, get feedback before starting the actual designing process. Having an ongoing conversation with the client is what helps us avoid mistakes and miscommunications.

Tip: useful links that can be used during the analysis

https://www.uxpin.com/studio/ebooks/ux-checklist/

https://uxdesign.cc/ux-checklists-bf2dda85787f

Step 3: sketch

The next step on your journey is to sketch. Use a whiteboard or paper to turn the information you have carefully gathered into a product vision. Share the lo-fi prototype with your client, ask about their opinion. This is a back and forth process of delivering an idea and receiving feedback. Working on such prototypes gives you more freedom in applying changes than to do so on a live product.

Ask yourself questions like is the system usable, how easy it is for an outsider to navigate and does it provide the desired outcome. You can also find a group of people from your company and ask them to be your first testing group.

Keep in mind to document your work flow and progress in the form of a presentation.

Step 4: design

Finally, it is time to start actually designing your product. This is the time to focus on colors and fonts, experiment with different layouts etc.

The prototype should be regularly tested by your testing group or you can make use of ‘hallway testing’. It is important to test on a fresh group from time to time, as they will give you a fresh look. They will be able to spot new concerns that the other group could have missed because they already know the product.

The assets that you are creating during this step should be consulted with the development team since not every idea will be easy, or even possible, to implement.

The actual process of designing is usually the longest step since you are not only creating the key screens but also adapting your product to various screen sizes, mobile devices, adding error messages, loading animations etc. Keep in mind that if your product is to be used also on mobile products it can influence the entire layout and your initial strategies.

Step 5: implement

When the client accepts your design, it can be actually implemented onto the webpage. If you are not implementing the design it is important to start collaborating with the front-end team early on. Design hand-off tools like Zeplin will come in handy here.

The fifth step also includes building the final user experience for web and mobile, some last small fixes to the UX, adding microinteractions or other details you maybe forgot about.

It is important to conduct a final review session with the stakeholders and the development team to present our final work, answer their possible questions and detect bugs early.

Step 6: evaluate

The final step of the UX journey is to evaluate the work. Although the process takes into account collaboration during every step of the development - a final quality assurance has to be made. In fact, design QA should be an inherent step in the process. Perform usability tests and create reports. Once your product is live, you should make use of tools like HotJar and Google Analytics to track the users’ path to find out how exactly they are using your product.

After some running time of your product it is worth coming back to it to re-check if everything is still working properly and possibly identify areas that might need improvement.

Useful links:

https://alistapart.com/

http://boxesandarrows.com/

https://www.gobysavvy.com/ux-optimization-blog

https://www.invisionapp.com/inside-design

https://www.nngroup.com/articles/

https://www.lukew.com/

https://www.smashingmagazine.com/category/user-experience

https://theuxblog.com/

https://usabilitygeek.com/

https://uxdesign.cc/

https://www.uxmatters.com/

https://uxplanet.org/

Related articles