Departments » User Experience » Processes

Basic UX Offering

Deliverables

There are two different sets of deliverables, one after project's kick-off call, the other at the consulting meeting:

 1. Discovery Package (Post kick-off call)

  • Discovery Survey
  • Invisionapp Project
  • Heat-mapping code

2. UX Study

Basic analytics report

Depending on the analytics tool that you use, metrics name will change so the first steps is to familiarize yourself with the specific naming conventions of the tool you are using to generate this report, however, for this example we will use Google Analytics.

The report generated with the basic UX offering includes a list of the most visited pages sorted by unique page views, here are the steps to generate the report:

  1. Login to Google Analytics

  2. Navigate to the property you want to generate the report

  3. Since Analytics trends is influenced by seasonal information, you want to generate a report based on one year worth of data:
    ux-ga-001

  4. Sort the report by Unique Page Views
    ux-ga-002

  5. If the website your are working on implements page titles, then it is faster if you change the primary dimension to Page Title
    ux-ga-003

  6. Make sure that all pages are visible on the current page view, otherwise they will not be included in the report once you export it
    ux-ga-004

  7. Export the report, typically to an Excel file
    ux-ga-005

  8. Open the Excel report and customize it to your needs, typically you may want to:
    1. Add the date range of the report itself
    2. Add some distinctive styling to the header
    3. Add an auto-filter to the header so that it can be sortable by the various metrics included in the report
    4. Quickly examine the last pages of the report, look for any anomalies like redirect pages to inappropriate content used in black SEO, translation pages, etc. Normally you will want to get rid of those records
    5. Calculate the "Content Weight Column"
    • Count the total unique visits and place the number normally at the top of your worksheet
    • Locate the first record of your report and write the following formula:
      (UV * 100) / TUV
      where
      UV = Unique Visits for the page
      TUV = Total Unique Visits for the report
      ux-ga-006

    • Calculate the rest of the pages using a consecutive sum:
      [ (UV * 100) / $TUV ] + PCV
      where
      UV = Unique Visits for the page
      $TUV = Total Unique Visits for the report (add $ to indicate excel that the value of that cell is fixed)
      PCV = Previous Cell Value
      ux-ga-007

Place this report in the "Study" folder, it will be sent to the client at the end of the UX workshop along with the other deliverables.

Home page heat-maps

Heat-mapping is a technique used to measure areas of interest on a page. Similar to Google Analytics, the heat-mapping tool has to be put in the website, normally in the form of a JavaScript code that consumes an API.

In order to generate these heat-maps, Vision uses a third party software, this software is Lucky Orange. In order to start tracking events on a website a new tracking site has to be added in Lucky Orange, minimum configuration is needed and the result of this configuration is a JavaScript snippet that must be placed on the client's website. Normally 3 weeks of tracking should be enough to detect trends on a website and use the information to generate insights.

This code tracks the following events:

  1. Clicks
  2. Hover over
  3. On first load of the page, how much of the current screen is seen by visitors (scroll)

The deliverable is a set of images that will be presented to the client during the UX workshop (AKA consulting meeting), these heat-maps are used later in the process to inform the home page wireframe creation.

Clicks

Clicks-precise

Hover

Scroll
scroll

Place these heat-maps in the "Study" folder, they will be sent to the client along with all of the other deliverables at the end of the UX workshop.

 

Usability Presentation

This presentation is a template that can be found at the Project folder under: Consulting\Usability\Usability Presentation.pptx

This presentation is divided into 2 sections:

  1. Basic usability concepts (slides 1 - 14)
  2. Usability Study (slides 15 - end)

Normally you will customize the second part of this presentation to include:

  1. Website priorities (taken from planning survey)
  2. Website redesign goals (taken from planning survey)
  3. Purpose of website visitors (taken from planning survey)
  4. Likes (taken from planning survey)
  5. Dislikes (taken from planning survey)
  6. What do people ask on the phone or via email (taken from planning survey)
  7. Analytics report (include top 15 pages minimum, taken from analytics report)

When you are done, place the presentation in the "Study" folder and generate a PDF file that will be sent to the client at the end of the UX workshop.

 

 

3 Wireframe Options

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

Based on the discoveries of your UX study, prepare a wireframe that helps accomplishing user's tasks, here are some wireframe best practices:

  • Avoid lorem ipsum, content is not secondary - content is design, design is content. Take five minutes to go over the client's website and build the wireframe using their content, this will help you create context and minimize the number of questions
  • Avoid using color, choose one or tow colors, normally gray and stick to them, this will help contextualize the information while keeping it simple, this also facilitates the visual design work as designers are not limited

  • Avoid images other than known icons

  • Annotate your wireframes, this avoids creating confusion among your team members, an annotated wireframe creates alignment between the different teams

  • Always be mindful of the constraints of the system you are wireframing for, while in doubt talk to the development team first