WA State Fair
Completely revamped fairgoer experience
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…
UX research, UX design, stakeholder meetings & presentations, handoff with visual design and devs.
Moderated User Interview
Moderated Usability Study User Survey
DEFINE & IDEATE
Sitemap & Appmap
User & Task Flows
Data & CMS
Fairgrounds Map Design
TEST & ITERATE
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!
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
Skews slightly female (55%)
Skews caucasian (65%)
Approximately 40% are between the ages of 25 - 44
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
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
$20 for 20 Minutes
People: myself (UX designer), Patrick (CEO of Ply) & Amy (Fair marketing consultant)
Set up a booth near entrance gate
Pre-Screener used to assess fitness
Assign tasks to perform while at the fair with a return time for an interview
Same tasks, different platforms
50% participants - mobile web
50% participants - mobile app
Using a separate table for privacy, sit down to ask participants about their experience
Follow-up questions were asked to better understand user actions and attitudes
People want more information about events, rides and food.
Open times for more than the gate (i.e. rides, storefronts, etc)
People don’t and won’t always categorize things the way that we do.
People often looked for something in one category, when the item they were looking for was in another.
Long lists of information are unruly and lead to users bouncing.
2.8/5 avg rating
4 had trouble understanding what icons mean
People want more information on the map
Map zooms infinitely beyond the tile
Map is slow
Search results could show on map
3.2/5 avg rating
Hard to find events with just a long list
Notifications for added events would be helpful
App Download and benefits should be front and center.
Map doesn’t work well on mobile web.
Search list disappointing
Search list nomenclature unhelpful
Search list alphabetical, not sorted by proximity
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.
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)
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
Menus are confusing and busy.
Long lists of text
Important content should fit within mobile viewport
Keep users informed about the status of the view
Minimize clicks and friction for common user flows
Reconsider when/where we need a large hero image
Minimize low-quality content that competes for attention
Compact long lists of content for improved scanability
Features and functionality should work the same across the platforms
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.
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).
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.
Content that adapts to current/upcoming events. (More research needed)
Communicate navigational indentation, provide back arrows that go back to last state, conform to standards for deleting an event (remove it from Planner)
Drop down the menu items independently.
Organize better (card sort/site audit)
Provide enough info to make decision w/out clicking in to page
Reduce paths to pages
Add expanding and collapsing lists for long lists of text
Improve filtering and pin color contrast.
Add more info when user clicks on pin.
Make it clear that Calendar is different than My Planner
Display events with MORE info and better pictures in a visual concise and interesting way.
Would help to have global events, filter by category and keyword and be searchable.
Hero takes up too much space, often irrelevant and no CTA.
Search bar in Nav.
Tag content or allow search to see more than titles.
Provide relevant info in list of results (not unuseful nomenclature referring to gates and addresses.
Make it easier to find.
Organizing the Findings
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?
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.
Discover how people understand and categorize information
No predetermined categories
Performed in-person for benefit of group discussions
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?
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
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)
Search results on Map
Interactive Map and Schedule are seen as App features to be downgraded in importance on the web.
People have very different ideas about where to find things.
Adding multiple paths helps, but is messy and overwhelming.
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.
Sketches, Sketches & More Sketches
I like to start with whiteboard or Invision Freehand before any project.
It allows for quick ideation, exploration and creativity.
Starting with boxes helps identify recurring elements and also helps inform the design in a developer friendly way.
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.
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.