Designing the User Experience: User Journeys and Visual Design | UX Series Part 3 of 6

Context

Designing the user experience (UX) is a multifaceted process, involving the creation of user journeys and incorporating visual design elements to enhance user interaction.

What are User Journeys in UX

User journeys are the steps a user takes to complete a task, both online and offline. They are a critical component of UX design, as they help designers and other team members understand the user's needs and expectations.

You should always what tasks the user has to complete and the steps the user takes to complete it. This is not just an online process. It's also an offline process. For example, if you are designing a website for a restaurant, you need to take into account the user journey of the user when they are in the restaurant. If you are designing a complex system or an enterprise system, you need to take into account the user journey of the user from before the even use your product.

The 'Happy Path' and Alternatives

Designers anticipate the ideal path (happy path) users should follow, along with alternative routes that might include errors or unexpected user actions, typos in search, or other issues. This helps designers identify potential alternative routes and create a seamless user experience.

The Importance of Visual Design

Graphic and visual design is a way of telling your users how they should feel about you and your product before even using the product or knowing you. This can make r break the user experience. -- https://www.usability.gov/what-and-why/visual-design.html

When I mean visual design I mean brand, graphic design and the look and feel of the product.

And this is a lot more than just adding pretty colours. These are some things you should keep in mind, as Visual Design encompasses elements beyond aesthetics:

1. Typography: Choice of fonts and text styling.
2. Colors: Use of color schemes to evoke emotions and clarity.
3. Imagery: Deciding between photographic or illustrative styles.
4. Layout Elements: Utilizing space, shapes, and lines for visual hierarchy.
5. Symbols: Incorporating visual cues for intuitive navigation.
6. Branding: Conveying the brand message through design elements.
7. Accessibility: Ensuring that the design is accessible to all users.
8. Consistency: Maintaining consistency across all design elements.
9. Information Architecture: Organizing content for logical flow and navigation.

and these are just a few of the things you need to take into account when designing the visual design of a product.

In my opinion, all UX Teams should have a good graphic designer, or at least a good graphic designer should be part of the company.

All team members can and will contribute to the visual design, but a skilled designer adds the "Golden Touch" or "Designer's Touch" to the visual design efforts, providing that essential element that is usually unattainable without their expertise and that makes everything flow.

A skilled designer also understands that he/she needs to work with the team and not against the team and need all the different inputs to create the best possible design. She/ he also knows that the design is not about them and that it may and will change based on user feedback and other inputs.

Some tools for Visual Design

Mood Boards

Mood boards are a collection of images, colors, and other design elements that help designers visualize the look and feel of the product. They are a great way to communicate ideas and get feedback from stakeholders.

Colour Theory

Color theory is the study of how colors interact with each other and how they can be used to evoke emotions and convey meaning. It is a crucial element of visual design, as colors can be used to create a visual hierarchy and guide users through the design. (check our fictional example in the previous article)

When to Integrate Visual Design

• Early Concepts: used to communicate ideas and generate interest.
• During Analysis: During requirement gathering, interactive prototypes are encouraged. In this step is tempting to add visual design into the prototypes, but you have to take into account the effort and resources needed to do this, as this step is a highly iterative process.
• Later in Design: When you are more confident about the features of your product, you can build more visual aspects into the prototype. This is called a High-fidelity prototype which is highly functional and can be interactive .

Information Architecture in UX

Information Architecture (IA) involves organizing and labeling content to ensure a logical and user-friendly flow. Key elements include content organization, navigation, search, and personalization. Testing and refinement are essential for effective IA.

In simple words, Information Architecture is how you organize your information for something. The outcome is a logical, clear and user-friendly flow through all the content of your sites.

Important: Test and refine: there will be parts that you did not understand correctly.

Important

• Good Information Architecture is invisible. You don't notice it when it's good, but you notice it when it's bad.
• Good Information Architecture is important to Google and other search engines. If you have a good IA, your site will be easier to index and rank higher in search engines.

Key Elements of Information Architecture

1. Organizing your content: How do you organize your content? How do you group your content? How do you label your content?
2. Labelling (Words and icons) of the different parts
3. Navigations (how does the user move around your site)
4. Search
5. Personalization. For example recommendations based on past activities.

Tools for Information Architecture

• Card Sorting: A technique for organizing content into logical groups. It involves writing content on cards and asking users to group them into categories. This helps designers understand how users think about the content and how they expect it to be organized.
• Tree Testing: A technique for testing the effectiveness of a site's navigation. It involves asking users to complete tasks by clicking through a site's navigation. This helps designers identify issues with the navigation and improve the IA.
• User Testing: for identifying issues in the design and gathering valuable feedback for improvement.

Prototyping and User Testing

Prototyping involves creating models or mockups to visualize the design. It ranges from simple sketches to interactive, high-fidelity prototypes.

Prototype: a model or a mockup or an early version of a product before the real product is build. It’s faster and cheaper in the long term.

Humans are visual and tactile creatures and makes the idea tangible to start conversations.

-- from the course

The detail and tools used are going to change during he proces.

User Testing is essential for identifying issues in the design and gathering valuable feedback for improvement.

Key Takeaways

The journey of designing UX requires careful consideration of user journeys, visual design, and continuous user testing. Each element plays a vital role in creating an engaging and effective user experience.

Recommended reading according to the course

-Discover more about User Journeys and Visual Design

---