5 User experience design

 

This chapter covers

  • Defining information architecture and its usefulness for website and content planning
  • How to organize and structure website data and/or content
  • How to build user flow diagrams to identify the paths a user can take to complete tasks on a website or application
  • The visual cycle, beginning with wireframing, followed by visual design and prototyping

Before you can start building a house’s structure, you must have your foundation in place. That is what your initial user research insights are—the foundation for the rest of your website or application. These insights equip you with a solid start to begin designing a solution focused on your users’ needs.

As discussed in chapter 3, user experience design is a broad phrase because it can cover many different aspects that aren’t necessarily considered design as you may think of it. In one of my roles, my title was Experience Designer, which encompasses the phase of work we’ll discuss in this chapter.

This phase covers not only the visual look and feel of the site and the user interface but also building a website’s scaffolding using information architecture and wireframes, as well as interaction and how a user flows through your website. It involves planning and building out the whole visual experience of the website before moving on to the development phase.

5.1 Information architecture

5.1.1 Site mapping

5.1.2 Content inventory and audit

5.2 User flows and user journeys

5.2.1 User flows

5.2.2 User journeys

5.3 Designing your site and application

5.3.1 Wireframing

5.3.2 User interface design and full-color mock-ups

5.3.3 Prototyping

Summary