6 Steps of UX Design Process

At Digiteum, we love building new products. It’s incredible how you can take an idea from scratch, develop it and then bring a real product to life.

I myself used to design interfaces early in my career. Today, I am mostly engaged in the management processes in my company. However, design always stays in the list of my passions, though now it’s rather a hobby.

What strikes me most is how the UX design reveals the first image of the product. As soon as UX process follows the brainstorming sessions, research and analysis, it already gives the glimpse on of the future system.

Clearly, UX design is a complex process and, in general, a big topic in software development. Moreover, it is equipped with a serious toolkit and implies a wide range of approaches and techniques.

In my company, we managed to scale UX design process down to a set of steps just enough to develop a detailed UX/UI for almost any project. Each step helps shape a future system and communicate its functionality and appearance among the stakeholders - clients, design and development teams.

Here are 6 UX design steps and techniques used in this process.

Step 1. User Personas.

Persona is a collective image of users united by similar goals, priorities, skills, behavior patterns, characteristics, motivations and intents. Usually, it contains a name, picture, occupation, interests or any other relevant information that helps better understand a user.

Describing user personas is the first step of UX design process. It allows to build user experience based on the goals and needs of the identified personas and adjust UX to certain target audiences.

Moreover, this is a great way to trigger collaboration with a client, define the users of the system and then test and validate any design idea or decision against these potential users. Thus, elaborating user personas helps designers abstract from their own view and bias and feel what it’s like to be in the real user’s shoes. 

At this step:

1. Analyze future users of the system.
2. Group similar users into segments.
3. Describe a collective user persona for each segment.

Example: Here’s a couple of user personas for a photo book building system.

Step 2. User Scenarios.

User persona is a collective image of a user group. Elaborating user scenarios is the next logical step of the UX process. It allows describing how a certain user persona can interact with the future system according to his or her goals and characteristics.

In other words, user scenarios demonstrate user flows for one persona in the system. Once you have described the personas and defined their goals, you can build user scenarios (journeys) based on this information.

You can record user journeys on sticker notes, a board or use digital tools like OmniGraffle or Visio. Moreover, this UX design technique is perfect for team collaboration.

At this step:

1. Identify the goals of a certain persona and think through the actions a user needs to make to reach these goals.
2. Record the actions using short text notes and images.
3. Combine actions into a user scenario on a board or consolidated table.

Example: Paul the student buys flowers using the online ordering system.

Image credit: UX for the masses

Step 3. Information Architecture.

Information architecture (IA) demonstrates how content is distributed across the system, visualizes dependencies and navigation between preliminary screens/pages, shows a high-level layout concept.

This technique helps balance the system, for example, optimize the number of functions on one screen or scale many steps across different screens into one simple action.

More importantly, working on IA allows bridging the gaps in the user experience developed up to this point. Therefore, in order to build IA, you need to combine the information on the project’s personas, scenarios and system requirements.

At this step:

1. Use one of UX design techniques to label and categorize content.
2. Distribute categorized content in a high-level system layout.
3. Describe dependencies and navigation between the content parts in notes.

Example: IA for a wellness app for yoga instructors.

Step 4. Paper Prototype.

Paper prototype is literally a set of paper sketches for the future system design. This is a truly collaborative technique that enables fast iteration.

Every stakeholder can take part in the elaboration of paper stereotypes - clients, analysts, project managers, design and development teams. In fact, you don’t need to have design skills to create a paper prototype. On the contrary, often great results come from the combination of efforts and the merging of several ideas coming from different sources.

At this step:

1. Use sketching tools to draw different variants of a high-level UX design on paper/boards.
2. Collect the sketches and discuss them in teams.
3. Iterate sketches until you get to the agreement on the best possible variant at this stage.

Example: Sketches for a photo editing web system.

Step 5. Wireframes.

Making black and white wireframes is the next stage of the UX design process. This step implies transferring ideas from paper prototypes to a digital form and combining them with previously elaborated IA.

At IA and paper prototyping steps, we’ve created high-level functionality breakdown. Now, it’s time for detailing and finite layouts. Additionally, wireframing helps detect the faults at the previous iterations and fix them at relatively low cost.  

Note, we are building black and white wireframes and go without finite UI elements - colors, images, typography. Thus, we don’t switch focus from user experience to aesthetic perception and personal preferences.  

At this step:

1. Choose the tool for wireframing.
2. Create black and white wireframes based on the previously validated paper prototypes.
3. Test the resulting wireframes on different team members and other stakeholders.

Example: Wireframes of an iOS yoga app.

Step 6. Visual design.

Visual design augments a previously developed prototype with finite UI elements. These UI elements are developed according to the brand’s style, tone and identity, design trends and user expectations. In other words, at the last step of the UX design process, the system gets its final look and feel in colors.

Using validated visual designs, development teams can start working on the system’s interface.

At this step:

1. Choose the tools for visual design implementation and demonstration, for example, Figma or Photoshop.
2. Collect UI requirements and content - brand’s style guide, guilde on corporate colors and elements, images, etc.
3. Create visual design and test on different team members and other stakeholders.

Example: UI designs for a photo book building app.

These are the essential steps of the UX process that allows translating a project idea into a ready-to-use design for further development. Each of these stages usually implies a number of iterations and requires serious collaborative work.

Even though it takes time and costs money, a thorough UX design process helps avoid unnecessary spending on the redesign in the future for a number of reasons:

• it helps build a detailed user experience focused on the goals and needs of the personas that are based on real end users.
• it helps stakeholders experience the system’s look and feel before a single line of code is written.
• it helps the development team fully immerse into the concept of the future product.

This is an abridged post. Check my original post on UX design process at Digiteum Blog.

Don’t hesitate to reach out! I’m always happy to help with building a new digital product and in general to talk about the world of UX design.