UX 101 – What is the UX Design Process?

Welcome back to our UX 101 Series! In this series, we're taking you through the entire UX process, from research to implementation. (If you're new to the series, you might want to check out our research blog post first.) For now, let's dive into the most exciting and creative stage - the UX design process.

Get ready to explore the wonderful world of UX design and pick up tips on how to turn your research into a beautiful and functional product.

The UX (User Experience) design is a critical phase in the process, one that involves creating a conceptual design for the user interface. The challenge and goal are to take the insights gathered from the research stage and transform them into a functional, intuitive interface that meets the needs and expectations of the user – and, of course, is visually appealing.

UX design: a three-stage process

The first stages of UX design are the process of sketching and wireframing our conceptual ideas to explore and identify the best options for the interface’s layout and structure. These basic sketches and blueprints don’t need to include visual elements like colours or graphics; instead, they focus on the placement of content, page navigation, and functionality.

Your previous research should guide you through this stage; if you’ve narrowed down your findings to a set of key requirements, you can start including those in your sketches.

Formation’s UX Designer, May, adds:

“After all the stakeholders are happy with the new schematic, we will move to the design stage for creating a wireframe. This may include sketching and creating low-fidelity wireframes or mock-ups. It can help us to test the basic functionality and structure of the website interface.”

This stage in the UX design process is not only a logical approach to fighting through any creative blocks, but it also enables you to quickly iterate through multiple design concepts and arrive at a design that best meets the user’s needs.

Think of it as elaborate brainstorming. You want to get an idea of what your initial concepts might look like, but it would be time-consuming to make prototypes for all your concepts. The best approach is to get all your ideas drawn out, pick the best few out of your sketches, and develop those.

1. UX sketches

Once you’ve identified your goals through your research, all you need is a pencil and paper, or access to digital tools like Sketch or Figma, to sketch out your ideas. Don’t worry about making them perfect – the goal is to explore different options and get some feedback.

The easiest way to get started with sketching is to draw medium-sized square outlines for your initial designs. Whether you choose the shape of a mobile screen or a desktop screen, it’ll help to keep your designs uniform and be easily understandable to others. There are also lots of printable UX design templates available online if you want to speed up the process and keep things looking uniform. Have a go at sketching out initial layouts of the page based on your findings. Once you have a pile of initial designs, you can select some for wireframing.

May adds: “How you choose to sketch your ideas depends on personal preference. Personally, I like to draw it on white paper or using FigJam.”

2. Wireframing

Let's talk about wireframing – one of the coolest steps in the UX design process! It's not just about creating a structure for your design; it's about visualising your ideas in a more structured and detailed way. Plus, wireframes can help you test your design ideas with real users before diving into the actual design.

Whether you use tools like Sketch, Figma, Adobe XD or even just a pen and paper, wireframes are typically made up of basic page or screen layouts with placeholders for content and functionality. You can add annotations or notes to explain how your design should work.

As you design your wireframes, take time to experiment with different design elements and interactions. Focus on key features like navigation, content, and calls to action (CTA), and make sure your wireframes communicate the structure and functionality of your design.

Once you have a solid wireframe, start adding more colour, typography, and images. Just remember: the wireframe is still a low-fidelity representation of your design, so don't get too caught up in the finer details just yet.

Finally, testing and feedback are crucial! Asking for feedback early on can help you spot errors and make changes before moving on to high-fidelity prototyping. So don't be afraid to share your wireframes and get some feedback from your team or real users.

Happy wireframing!

3. High-fidelity prototyping

After you've made your initial sketches and done your wireframing, high-fidelity prototypes are the next stage in the UX design process. This is an area of expertise for our very own UX designer, May. "Here at Formation, I create high-fidelity digital prototypes for websites and software that are clickable and multi-page,” she says.

Why are prototypes important? Well, they allow you to test your design ideas with real users in a more realistic way, simulating the actual interactions and flows users will experience in your final product. Plus, prototyping helps identify any issues or problems with your design before it's released, so you can make changes and improvements before investing too much time and resources into the actual development.

Now, let's focus on high-fidelity prototyping.

If you're not familiar with the term, don't worry. it basically means a digital, interactive representation of a product that closely resembles the final design in terms of both details and functionality. According to May, "Once the interface is completed, I will use Adobe XD to create a prototype that demonstrates the basic functionality and user flow of the product."

Once you have a prototype, you can test it with real users to get valuable feedback and insights on how to improve your design. You can use various methods to test your prototype, such as usability testing, A/B testing, or user interviews, but we'll cover that in our next UX blog.

For now, let's focus on the importance of prototyping in UX design process, a crucial step that allows you to validate your ideas and make improvements early on.

To work with May and Formation's team of UX design specialists on your own digital project, get in touch today!