UX Design Process
User experience or UX design process is one of the most important parts of a digital product creation. UX determines how a customer, employee or visitor interacts with your website, application or other digital product - whether your system allows users to fulfill their goals, accomplish tasks and matches their expectations.
As a result, positive experience encourages user trust and loyalty, leads to credibility, customer retention and higher conversions. On the contrary, negative experience results in user frustration and low customer satisfaction. Hardly will a user get back to the system after poor experience, let alone recommend it to anyone else.
In general, a basic UX design process consists of three major stages: analysis, user experience development and visual design.
The analysis enables the design team to better understand the users of the future system, their goals, expectations, tasks. However, it shouldn't be mixed up with the initial business analysis at the beginning of the project when we interview our clients, define their needs, collect requirements, study the market and go through in-depth company research.
User experience development shapes the future system in the form of black and white wireframes, sketches and even clickable product prototypes. Then, visual design closes the UX process with ready-to-go designs, for example, in Figma or Photoshop.
Now, I’m going to go through these stages in more detail and define the key steps of a user experience design process.
6-step UX design process
1. Describe 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.
For a UX design process, we analyze and group future system users into segments and build one, two or more personas that represent each segment. This technique allows us to design the system that would address the specific needs of a certain persona and therefore serve the related target audience.
Case Study: EHR user interface development for NextGate platform
Benefit: Using personas, we ensure the UX we build reflects the goals and requirements of our users and helps us avoid self-referential design. We can personalize UX to these users and focus on solving the challenges relevant to them.
Example: Personas for Printique* photo book building flow help build user journeys for each user category.
2. Build user scenarios
Now that we have the personas and previously documented system requirements, we can build user scenarios for every goal. Usually, a user scenario consists of short texts sometimes illustrated with images that describe the actions focused on meeting a specific user need. Altogether, these notes combine into a scenario map and tell the story of user journeys for a specific persona.
Benefit: Dynamic and easy to iterate, user scenarios bring users to life and can demonstrate user activity across the whole product or service. Besides, this design technique is ideal for team collaboration.
Example: This user scenario shows a set of actions for a student Paul who needs to buy flowers for his mother using online ordering system.
Image credit: UX for the masses
3. Develop information architecture
Once we know who our users are and what their needs are, we can move to the next step and build information architecture. Here we determine the information structure for the system - visualize interactions and dependencies between system pages/screens, build a preliminary layout, create content matrices. In other words, we decide and show what will be on different pages or screens of the future system and how they will be connected with each other.
At this step, we often use such design techniques as free listing and card sorting to build navigation design.
The card sorting technique implies sorting out labeled cards into specific groups. Groups analysis then allows to better understand content categories and user expectations for the system content and navigation.
Free listing is a similar technique. It implies listing similar terms associated with a given topic and analyzing patterns, preferences and expectations for the future content.
Read: SaaS platform design case study
Benefit: Information architecture gives the first glimpse to the future system look as it allows to build a preliminary layout and determine UX flow.
Example: UX flow for an Uber-like app for yoga instructors and students. This UX flow demonstrates the layout for the instructor’s app. Click the image to get a more detailed view.
4. Draw sketches (paper prototypes)
Paper prototyping is used to make sketches of the future system design with pencils, markers and sticker notes. Paper prototyping is a great UX design technique because it allows to quickly explore different design variants and experiment with design solutions individually or in teams.
Benefit: Paper prototyping allows to quickly iterate the design at low cost. Moreover, it’s a great collaboration tool. Using large sketch boards, UX groups that consist of designers, developers, project managers and business analysts can work together on the design and see the big picture of the whole system at once.
Example: Sketches for the Printique's* photo book builder.
Check our website design and development services and let's start your project.
5. Make wireframes
At this step of UX process, we build a more advanced design of the future system. Black and white wireframes demonstrate the interface on individual pages, more accurate layout with elements, labeled, interactions and behavior, however, avoids finished UI features like colors and images.
Often, wireframes can be organized into clickable prototypes using such tools as Marvel or InVisionApp. These prototypes help test the design at this stage, leave comments and collaborate on improvements before the final design stage.
Benefit: Wireframes allow to explore and test the flows and functionality of the future system in a simple way. At this step, design teams and decision-makers and not distracted by color schemes, typography and text but rather focus on usability, functionality and smooth experience. It's very useful when you build a complex digital product, for instance, create an IoT app design.
Example: These wireframes demonstrate two pages of an iOS app for yoga instructors.
Searching for an experienced mobile application development services company? Contact Digiteum.
6. Create visual design
UX design process finishes with the visual design step. At this stage, we turn black and white wireframes into colorful interfaces that align with the brand’s identity, style, design trends and user expectations.
Using professional design tools like Figma and Photoshop, we enable collaboration and transparency of UI design process and deliver finite designs for each system page/screen. Once approved, these designs can be transferred to development teams for implementation.
Benefit: UI designs demonstrate the complete interface of the future system. At this step, stakeholders and decision-makers confirm the system’s look and feel reflect the original project requirements, brand’s image and user expectations.
Case Study: Corporate website development and brand book design for a global HR platform
Example: Check a set of UI designs for an actual Printique* mobile app.
Every step of UX design process implies tight collaboration between teams, product owners and stakeholders. This is an essential part of an iterative design process. In fact, every phase of UX design ends up with receiving feedback from the client, addressing comments, making necessary changes and getting approval before moving to the next stage. Thus, we ensure transparency and efficiency.
UX design process development: major contributors, techniques, feedback cycles
In general, UX process is important for building a functional and elegant digital system. And as we know, smart UX and beautiful UI is a true way to user loyalty and successful engagement.
Detailed analysis and iterative development of the design enables building a well-tested, reliable system with minimum chances of usability faults or dead-ends. In other words, a step-by-step UX process prevents from costly and time-consuming redesigning and fixing.
Contact Digiteum team to learn about our digital product design services and talk about your project.
*Formerly AdoramaPix
