James Lorentson UX Design
wfa_iphone8.png

WA State Fair

WA State Fair

Completely revamped fairgoer experience

 
sketch-logo-dark@2x.png
logo_lockup_analytics_icon_vertical_black_2x.png
omnigraffle-mac@2x.png
UT-Logo-2018.png
1_DeUpGV0IpUcQqo_YCPg8SA.png
Photoshop_CC_icon.png
WFA_iPhone-8-Gold-Perspective-Free-Mockup.png
 

The Challenge

The WA State Fair is one of the biggest fairs in the world and the largest in the Pacific Northwest.  The site and app were iterated on multiple times over the past several years, but now they are in need of a full redesign. For 2019, Ply brought in a UX specialist to build a more fairgoer-focused product. That’s where I come in…

My role

UX research, UX design, stakeholder meetings & presentations, handoff with visual design and devs.

 

Design Process

7+Magnifier+Search+Key+Word+Seo+Promotion+Marketing.1.png

Discover

Analytics
Market Research
Moderated User Interview
Moderated Usability Study User Survey
Competitive Assessment
Heuristic Markup
Site Audit

12+Planet+Space+Flag+Discovery+Bulb+Idea.1.png

DEFINE & IDEATE

Research Synthesis
Empathy Map
Feature Prioritization
Info Architecture
Card Sorts
Tree-Test
Sitemap & Appmap
User & Task Flows

7+Responsive+Monitor+Website+Phone+Interface+Page+Design.1.png

DESIGN

Data & CMS
Interaction Design
Design Principles
Fairgrounds Map Design
Low-Fidelity Wireframes
Mid-Fidelity Wireframes
Interactive Prototype

download.png

TEST & ITERATE

User Testing
Iterations


 

DISCOVER

 
HomePageImage_Bubble_ExtremeScream.jpg

Why do UX research?

In previous years, the web and app redesigns were driven primarily by analytics, company politics and a “if it’s not broke, don’t fix it” philosophy.

These things are all important, of course, but it became more and more apparent that obtaining firsthand knowledge of a customer's experience was critical. In addition, mobile app usage is low, actually very low, with less than 3% of fairgoers using it.

So for 2019, we would lift the lid, question assumptions and most importantly, talk with the users!

Research Goals

  • Discover how people use the website and mobile app, specifically around searching and finding information

  • Find pain points in the user experience

  • Create solutions to solve those pain points


Surveys & Google Analytics Takeaways

Demographics

  • Skews slightly female (55%)

  • Skews caucasian (65%)

  • Approximately 40% are between the ages of 25 - 44

Attendance Habits

  • Decision to attend is frequently made same day or within the past week

  • “Always attend” is one of the top reasons fairgoers give for attending, followed by kids activities, sounds fun, exhibits, and animals

  • Most attend in groups of 2-4 people

  • Most visits span 3-6 hours

  • 40-50% of attendees have attended all of the past 5 years

Geography

  • Pierce & King County make up the majority of attendees

Tickets & Technology

  • Most Fair admission tickets are still purchased at the gate

  • Most concert tickets are purchased online in advance

  • 63% have visited thefair.com

  • 70% are unaware the Fair has an app

  • 70% of people with the app use the map

  • 35% of people with the app use the planner


Conducting Interviews

$20 for 20 Minutes

Location: Fairgrounds

People: myself (UX designer), Patrick (CEO of Ply) & Amy (Fair marketing consultant)

Plan:

  1. Set up a booth near entrance gate

  2. Recruit participants

    1. Pre-Screener used to assess fitness

    2. Assign tasks to perform while at the fair with a return time for an interview

  3. Same tasks, different platforms

    1. 50% participants - mobile web

    2. 50% participants - mobile app

  4. Interview

    1. Using a separate table for privacy, sit down to ask participants about their experience

    2. Follow-up questions were asked to better understand user actions and attitudes

 
1_uShCwPAi7656WRj9nH9alw.jpeg
 
 
Screen Shot 2019-01-23 at 8.51.42 PM.png
 

Interview Takeaways

Content

  1. People want more information about events, rides and food.

  2. Open times for more than the gate (i.e. rides, storefronts, etc)

  3. People don’t and won’t always categorize things the way that we do.

  4. People often looked for something in one category, when the item they were looking for was in another.

  5. Long lists of information are unruly and lead to users bouncing.

App (Map)

  1. 2.8/5 avg rating

  2. 4 had trouble understanding what icons mean

  3. People want more information on the map

  4. Map zooms infinitely beyond the tile

  5. Map is slow

  6. Search results could show on map

App (Planner)

  1. 3.2/5 avg rating

  2. Hard to find events with just a long list

  3. Notifications for added events would be helpful

Mobile Web

  1. App Download and benefits should be front and center.

  2. Map doesn’t work well on mobile web.

Search

  1. Search list disappointing

  2. Search list nomenclature unhelpful

  3. Search list alphabetical, not sorted by proximity


Empathy Map

Combining the findings from the surveys, market research and interviews, I created an Empathy Map

Visualizing user attitudes and behaviors in an empathy map helps teams align on a deep understanding of end users.

Personas were already in place so we updated them and focused them to include real-world user goals and concerns.

 
1546631835808.jpg
 
 

Site Audit & Analytics

A content audit is a qualitative analysis of all the online content. It exposes where your content actually lives, how it’s performing, and where the thematic gaps are.

Before I could audit the content, I created a Content Inventory, a comprehensive list of the name, location, and description of each asset published by The Fair.

Later, I’ll use the data from this audit to help build the sitemap!


Analyzing Heuristics (Usability)

1546631835813.png

We look at heuristics to assess the basic quality of the product and spot potential opportunities for improvement. 

How does a user experience the product from beginning to end?

How I tested it:

  • Four participants walked through major pages and screens for website, mobile-web, and app

  • We flagged and annotated anything that violated usability principles with a flag

  • Those findings were collected and consolidated

 
 
edited.jpg

Heuristic Takeaways

Organization

          1. Menus are confusing and busy.

          2. Long lists of text

          3. Important content should fit within mobile viewport

System feedback

          1. Keep users informed about the status of the view

Reduce Steps

          1. Minimize clicks and friction for common user flows

Visual hierarchy

          1. Reconsider when/where we need a large hero image

          2. Minimize low-quality content that competes for attention

          3. Compact long lists of content for improved scanability

Consistency

          1. Features and functionality should work the same across the platforms


Competitor Assessments

A UX competitor assessment involves assessing competitor apps and websites to see how they design for their users—potentially solving for similar user needs.

A decent analysis help us gain an objective overview rather than get fixated on specific features.

  1. We first get clear on the issues WA Fair site and app have (previous phase) and the problems we're looking to solve (user research).

  2. Then, we go to the competitors to understand how they have tackled these problems and can assess how well their solutions would help your users.

Screen Shot 2019-02-07 at 4.46.16 PM.png
Screen Shot 2019-02-07 at 4.52.27 PM.png
 

Timely

          1. Content that adapts to current/upcoming events. (More research needed)

Navigation

          1. Communicate navigational indentation, provide back arrows that go back to last state, conform to standards for deleting an event (remove it from Planner)

          2. Drop down the menu items independently.

          3. Organize better (card sort/site audit)

Simplify

          1. Provide enough info to make decision w/out clicking in to page

          2. Reduce paths to pages

          3. Add expanding and collapsing lists for long lists of text

Map

          1. Improve filtering and pin color contrast.

          2. Add more info when user clicks on pin.

Calendar

          1. Make it clear that Calendar is different than My Planner

          2. Display events with MORE info and better pictures in a visual concise and interesting way.

          3. Would help to have global events, filter by category and keyword and be searchable.

Activity Detail

          1. Hero takes up too much space, often irrelevant and no CTA.

Search

          1. Search bar in Nav.

          2. 
Auto-complete recommendations.

          3. 
Tag content or allow search to see more than titles.

          4. 
Provide relevant info in list of results (not unuseful nomenclature referring to gates and addresses.

Food

          1. Make it easier to find.


Organizing the Findings

edited.jpg

Feature Prioritization

We needed a way to prioritize our potential features. I introduced the team to the RICE model, which scores each feature by 4 criteria:

Reach - how many customers will this project impact over the year?
Impact - how much will this project increase conversion rate when a customer encounters it?
Confidence - how strong is the supporting evidence?
Effort - how much time will this take?

formula.png
 
 
 
 
 

INFORMATION ARCHITECTURE

 

Card sorting is a method used to help design or evaluate the information architecture of a site.  They help make site content discoverable and easy to find.

 
 

Open Sort

  • Discover how people understand and categorize information

  • No predetermined categories

  • Performed in-person for benefit of group discussions

 

Hybrid Sort

  • In a hybrid card sort, you create pre-defined categories and allow participants to create their own as well

  • Used because we have a rough idea of information architecture

  • Performed online to get a larger data set


Tree Test (aka TreeJack)

Tree testing tells you how easily people can find information on your website, and exactly where people get lost.

The card sorts told us how people think the content should be grouped and labeled. I created a draft sitemap based on the results of the card sort and site requirements, and I run a tree test to see how it performs based on common user tasks.

Tree testing can answer questions like:

  • Do my labels make sense to people?

  • Is my content grouped logically to people?

  • Can people find the information they want easily and quickly? If not, what’s stopping them?

PARTICIPANTS
I recruited participants by sending an incentivized email to The Fair’s newsletter subscribers. Participants were given tasks and presented with a text-based hierarchy. Upon completion, I reviewed success rate, error-free rate and time to completion.

 

Card Sort & Tree Test FINDINGS

CLARITY & SIMPLIFICATION

  • Most are confused by the difference between Events Center, Events Calendar, Planner, and Calendar

  • Most people prefer General Information to Plan Your Visit or Visitor Info

  • Most removed cards that they found redundant or trivial

  • Consider making each title self-explanatory

        • For instance, is Performers for those performing or those who want to see them perform?

  • Most people thought Rodeo should be its own category

INTEGRATIONS

  • Most thought Deals & Discounts should live under or be integrated with Tickets.

  • My Faves as an alternative way to Save more than just scheduled activities (ie. food, rides)

 

Integrations (Cont’d)

  • Search results on Map

FEATURES

  • Interactive Map and Schedule are seen as App features to be downgraded in importance on the web.

  • Improved Search

    • People have very different ideas about where to find things.

    • Adding multiple paths helps, but is messy and overwhelming.

    • Predictive searches

      • Tagging and Learn by Doing

  • Build systems that can be accessed using user’s vocab and teach grouping along the way.



Diagraming the CMS

In addition to a new website and app, we moved all of the data from a proprietary CMS over to Dato for a better Fair Admin user experience.

This diagram went through numerous iterations, nearly daily, as we wrestled with the connections between one thing and the next.

The fair has a tremendous amount of information and until now much of that information was duplicated and disconnected.

342649944.jpg

Sitemap V1

WFA_App+Sitemap.jpg

Sitemap (Detailed)

342435263.png

App Map

wfa_037_-_app_map_12102018.png

App Flows


Sketches, Sketches & More Sketches

I like to start with whiteboard or Invision Freehand before any project.

It allows for quick ideation, exploration and creativity.


Low-Fidelity Wireframes

Starting with boxes helps identify recurring elements and also helps inform the design in a developer friendly way.

wfa_mobileapp_low-res_reduced.png

Elements and Conditional Logic

Over several days, I fleshed out every conceivable action within the app.

One of the main elements is a drastically improved and highly complex Search, which required explicit rules to get just right. I ran through several app flows and iterated to make things as simple and cohesive as possible.


Wireframes

wireframes.jpg

App Interactive Prototype

After each iteration to the wireframes, user testes were performed to identify issues.

 

Visual Design in Progress…

What a great project! The Fair’s tremendous amount of information required a complete overhaul to their data/CMS as well as the information architecture. I introduced a new way of interacting with the app that created a more exploratory and enjoyable experience.

Thanks for reading!