Play 3 - Design the User Experience

User experience (UX) is any interaction a user has with a product, application, system, or service, as well as the feelings users face while journeying towards their end-goal.

Design The Experience

Design The User Experience

While user stories are helpful in understanding the end goal, user experience (UX) is about the journey the user takes and their experience as they attempt to get to that end destination. UX focuses on the design of individual customer touchpoints that contribute to the total customer experience. Many elements, such as written content, the look and feel, and the way a user navigates a system, contribute to the user experience. The customer personas you developed will help you identify the types of users you have so that you can design experiences based on their profiles.

A Note on Accessibility

Creating accessible websites and other digital platforms is the law. Section 508 of the Rehabilitation Act requires agencies to give people with disabilities equal access to information. At the most basic level, this involves checking color contrast, adding alternative text to images and graphics, ensuring your designs have a defined hierarchy that translates to semantic HTML, and testing keyboard navigation once a prototype is built by developers.

In the context of diversity and inclusion, all users benefit from accessibility best practices, not just a small subset. In addition to users who are affected by a permanent disability, there are many more users experiencing a temporary difficulty from short-term impairments or their environment. Users with wrist injuries could find alternative forms of interface navigation useful, or those with motion sensitivity would appreciate the ability to pause/play background animations on a website.

When software professionals design with accessibility at the forefront of their decisions, it doesn’t need to be a separate set of concerns; rather, it should be what guides your team’s UI design process. In addition, testing on a wide userbase with differing accessibility needs can reveal the pain points of an interface – and ways to get as close to success as possible.

Solution Ideation

Before jumping into ideation, it’s important to prioritize the customers’ needs. Most projects have budget or time constraints that will force a project to launch without all the bells and whistles. This prioritization exercise is critical to understanding what are “must-haves” vs. “nice-to-haves” and aligns everyone’s expectations before diving into solutions. Document the “must-haves” vs. “nice-to-haves” and use it during ideation.

Diversity leads to the greatest innovations. Ideation is best conducted when different roles, such as designers, business analysts, developers, and product owners, are involved to weigh in with expertise and additional knowledge. During these sessions, you should explore as many ideas as possible, challenge assumptions, and think outside the box.

Ideation Techniques

Brainstorming

Brainstorming

A way to generate ideas that could solve a potential problem

User Interview

User Interviews

One on one discussions that talk about a specific issue

Low-Fidelity Sketches

Low Fidelity Hand Sketches

A method used by many to depict the high-level structure and layout of the product/application

Conversations around technology possibilities and limitations may also occur during this phase and it is through deep collaboration that the best solutions, despite constraints, will surface.

Execution

After identifying and understanding your customer at a deeper level, developing a strategy, understanding the user requirements, and ideating, it is time to bring all the insights and ideas together. When it comes to experiences, the goal is to make it simple, intuitive, and delightful. Using industry standards and incorporating a design system, such as the United States Web Design System (USWDS), will help guide the consistency and simplicity you are trying to achieve.

Creating low fidelity wireframes (e.g. by hand or using a sketching tool such as Balsamiq) first will get the general idea of the proposed solution out for discussion. This is an iterative process that allows you to focus on functionality and navigation rather than the complex details of the application at this stage. Once there is alignment and approval on the process flows, you may move to creating high-fidelity prototypes. Mockups are designed to establish look and feel and are used as a visual basis for the prototypes. These prototypes will be highly detailed to accurately represent the final product. Continue to iterate and improve the design by testing and gathering user feedback along the way.

UX Process Flow Diagram