User design

You have to build out the entire visual experience before you move on to the dev phase:

  • Designing the visual look and feel of the UI
  • Wireframing and IA to build the site’s scaffolding
  • Design interaction and user flows

Information architecture

IA is about preventing your users from feeling lost:

  • structuring and organizing data and content and labeling it:
  • establising relationships between the different pages and content
  • informs the navigation and content strategy of the site
  • orients the user and lets them know what they might expect next

This step is about documenting the website structure and types of content on each page so you know that user needs are met.

Site mapping

A map of your websites structure and content:

  • some form of a chart that shows the hierarchy and relationships between the pages of content
  • breakdown of all major landing pages and subpages and how they are linked
  • high-level overview–focus is how you get to the content, not the details
    • help create journey maps
  • maybe a diagram or a spreadsheet
  • You can include the sitemap in the footer too

Search engines use XML sitemaps:

  • find a tool to generate the file
  • helps search engines with SEO

Sitemap and content inventory should inform the main navigation menu on your website:

  • include breadcrumbs so users can see how they got where they are and find their way back

Content inventory and audit

When you work on reorg’ing an existing project, you might take an inventory and dump it into a spreadsheet. New websites can benefit from the spreadsheet too. Include the following (pg 96):

  • Page the content lives on
  • Page metadata
  • Title of content or summary of what the piece of content is
  • Author
  • URL
  • File format (image, article, UI, etc)
  • Description of content
  • Date content was created

A content audit determines whether the content should be thrown away, rewritten, or kept as is. Ask these questions:

  • Is the content meeting its goals?
  • does it provide value?
  • is it meeting user goals?
  • is it meeting buisness goals?
  • does it match the voice and tone of the brand?
  • is it getting views/attention?

These questions help develop a road map and align with user and business needs.

User flows and journeys

After you have a sitemap and define your IA, you can create your user flows and user journeys:

User flows

User flows focus on providing clarity about each step in the process that completes a task:

  • routes users take to complete a task on your app
  • includes the entrypoint and every step until the user completes their goal
  • can be a flow chart with labels for each interaction, or detailed wireframe
  • helps ID points in user experience that you can optimize

User journey

User journey maps create a narrative from a user persona’s point of view:

  • maps out the experience of your main user persona and ties in an emotional element to identify what your user is thinking and feeling at each stage in their journey with your product
  • steps can occur in digital or physical world

Steps to create a user journey (pg 99):

  1. Define the target user persona
  2. Decide the scenario or scope of the user journey. Who is this user, and what are they trying to achieve? What are their expectations?
  3. Map the scenario steps to what the user may be thinking, doing, or feeling when completing the step
  4. Identify opportunities for improvement

Consider creating a user journey for a person that is stressed:

  • these people probably aren’t thinking clearly, so you’ll want to reduce the number of barriers for them

Designing your site and application

After you plan the content, start building in this general order:

  1. Wireframes
  2. Static visual design
  3. Interaction design

Wireframes

These are the initial outline where you explore the layout:

  • don’t worry about color or type
  • establish relationships between the content on the different pages and create a blueprint for expected functionality

There are wireframing levels:

  • low-fidelity wireframes are very rough drafts that are sketches of what it could look like
  • medium-fidelity wireframes are created with a tool like figma, balsamiq, or axure RP. These provide good accuracy without being pixel-specific
    • Might include type weights, greyscale, and other basic graphic decisions
    • Use lorem ipsum
  • high-fidelity wireframes are detailed and pixel-specific
    • don’t use color except on CTAs or important things. It will distract
    • try to use real text, not placeholder

UI design and full-color mockups

UI design is the visual and interactive elements of the website:

  • when people land on your website, they see the colors, space, type, etc, and form a first impression that determines whether they continue on your site

Prototyping

This tests the usability of your design:

  • low-fidelity prototypes: create these with pen and paper for a walkthrough with your user
  • high-fidelity prototypes: have some level of interactivity with clickable components
    • you want users to ask questions when showing them this prototype

Prototyping is iterative research, so test often and repeat.