Some designers see the UX design process as having four steps and some see it as five, but all consider UX design as a collaborative, team process with steps that repeat as they are needed. The UX design process sets out to discover what users need or want to do, where problems come up for them, and how a product can be designed to help them meet their goals. The UX design process is based on asking questions, analyzing data, using the results to design the product, and testing to see if the product meets the users’ needs.
The First Step: Listen to What the User Has to Say
In the initial stage of UX design, it is important to focus on the users, not on the product. This step is often called Empathyor Understandingbecause the role of the UX Designer is to connect with the users. This is done through research in the form of surveys and interviews to find out what the experience of the user is like. What are they trying to do and where do they run into problems? What do they enjoy about the experience and what do they dislike? Observing and listening are important skills at the empathy stage of the process.
The Second Step: Define the Problem
In the definition phase, the UX Designer uses the data collected through research to create a detailed description of the user experience. This phase involves creating user personas, scenarios, and journey maps to uncover patterns and trends.
Personas
Personas are descriptions of fictional users of a product. They are brief, only one or two pages, with a photo, vital statistics, a short bio, and other information relevant to the project. These descriptions are made up from a pool of answers from real users who participated in surveys and interviews. Because they are created early in the design process, personas can be a useful tool to keep the project on track.
Scenarios
Scenarios are the settings for the stories told about users and the way they use a website or app. Scenarios help with usability testing and ideation when coming up with new ideas for a design. Scenarios can be simple and task-focused or more complicated and include more detail.
Journey Maps
Journey maps incorporate personas and scenarios to look at how a user accomplishes particular goals. The scenario is broken down into phases and the steps the user takes within them. There are user journey maps and customer journey maps. While they are very similar, a user journey map is more common when a team is designing a new product such as a website, while a customer journey map can be used to study satisfaction with an existing product and help to increase sales.
The Third Step: Generate Ideas
Once the patterns emerge, design enters the third phase in which team members generate ideas about how to solve problems and improve the experience. These ideas should be based on the results of the earlier research and the outcome of the definition phase. An important aspect of the ideation phase is that there should be no prejudging of ideas; anything goes at this stage. Don’t let real-world issues such as perceived cost or timelines enter the discussion. Evaluation comes later.
Workshops
Ideation usually takes place in a workshop setting. This means getting the design team together, either in-person or remotely. For an in-person meeting, you will need some supplies, like Post-It Notes, markers, paper, tape, colored dots, and a whiteboard. For a remote meeting, you can use one of the digital design apps that have collaboration features. See below for more on that.
Based on what you know about the user from the first two phases, come up with some questions that begin with the phrase, “How might we…” to elicit positive responses. You can also employ some of many techniques designed to encourage creative thinking like analogies, brainstorming, challenging assumptions, or mind mapping. The ideation techniques you choose will depend upon the members of the team and the nature of the problem.
Wireframes
After the team has generated some ideas for tackling the design problem, a few ideas are chosen to test, and a rough sketch of the product is developed. These sketches lead to wireframes and prototypes. You might even do some sketching at the workshop. Wireframes are two-dimensional representations of the structure of a proposed webpage or mobile app. They lay out the basic structure of a page before content and other elements are added. Wireframes are stripped down; they have no color or text to distract from the structure of the elements on the page. The wireframes can be simple line drawings on paper or digital representations developed with design software.
The Fourth Step: Prototyping
A prototype is a simulation of a website or app that gives an idea of how the product will look and feel to users. Wireframes are similar to prototypes in that they are also simulations, but wireframes are about the structure of the site, and prototypes are about how the product actually works.
There are low-fidelity prototypes and high-fidelity prototypes, which refers to the amount of detail included, with low-fidelity versions having few details and high-fidelity being close to the finished product. The amount of detail in the prototypes is useful for looking at user behavior during the testing phase. Prototypes are usually created with digital design software.
The Fifth Step: Testing
The next phase is testing the product or website to see if the user experience is what the team expected. Depending upon the test results, there is often a redesign phase to improve the product further. When the team is satisfied with the results, the design is passed off to the developers.
The Design Process is Collaborative and Iterative
While there are steps to the design process, it is important to remember that they can occur over and over again as needed. As the features of the design develop, more research is sometimes needed or another ideation session. Wireframes and prototypes evolve with time. While it is impractical for the design process to go on indefinitely, improvements are always possible.
It is also important for the team to stay in contact with each other and to work together in a collaborative space. This can help keep the design focused on the user rather than on members of the team. There are many useful digital design applications available that allow for collaborative design.
Adobe XD
Adobe XD is a design tool based on vector graphics that allows you to create digital designs for everything from mobile apps to websites. XD is part of Adobe’s Creative Cloud and works well with other CC apps like Photoshop, Illustrator, and Animate. There are many repeating features that make your workflow move faster, and XD also includes collaboration features that make it easy to share and test prototypes. You can run XD on both macOS and Windows.
Sketch
Sketch is a Mac application that doesn’t work on Windows. You can use vector editing tools or design at the pixel level. It allows you to scale to any size of screen and speed up your workflow with mathematical shortcuts. As with XD, there are repeatable components and you can organize your design so everything is easy to find. Sketch recently added real-time collaboration, so now it is easier for a team to work together, and you can also create libraries of the elements the team is using. There are also many plugins available to customize your workspace.
InVision
InVision works to support the entire design process from brainstorming, designing, testing, collaborating, and delivering. The application includes Studio, Cloud, Freehand, Craft, and Enterprise. InVision works on both macOS and Windows.
Figma
Figma is another design application. It includes FigJam which provides an online whiteboard for collaboration to let your design team plan, define, and workshop together. You can use the pen tool for vector graphics or plugins like an instant arc design. Auto Layout moves and stretches items automatically, and Figma makes the work move along efficiently. Figma runs on a browser so it will work with macOS, Windows, or Linux systems.
Where to Learn UX Design
If you would like to learn more about UX/UI design to switch to a new career, one of the best ways to do that is to sign up for classes. You can choose classes that meet in-person or online to learn design software and other applications. Some people prefer to attend brick-and-mortar sessions when learning new information, but that isn’t always available. Live online classes have a similar set-up with a real-time, remote instructor who can answer questions and take control of your monitor—with permission—to show you how to do things. Training is part or full-time and available weekdays, weeknights, or weekends.
The best way to prepare for a career shift to a field like UX design is to enroll in a bootcamp or certificate program. These are intensive training courses that run from a few weeks to a few months and will cover motion graphics and animation in much more depth than tutorials can. Another plus of training is that you will leave class with a professional-quality sample video portfolio that you can show to prospective employers.
It’s easy to learn UX design and start a new career. Check out Noble Desktop’s UX design classes. Choose between in-person sessions in NYC at Noble’s location or sign up for live online UX design courses and attend from anywhere. Use Noble Desktop’s Classes Near Me to find other UX design bootcamps in your area.