WISCONSIN LOTTERY

Website Redesign

 

CHALLENGE

During my time at HY, WI Lottery tasked us to redesign their website. The old site structure is not organized or intuitive and the overall website is out of date. Often users will call the hotline to get information when they can’t find it on the website. 

The goal is to refresh and organize the website, so it’s optimized and simplified for users, while increasing overall web traffic. 

**Despite the structure of the pages and how difficult it is to find content, users are still managing to find the information they need because of the dire need to find the lottery numbers for this week’s games.

SOLUTION

We created a refresh and re-organization of the website through more intuitive IA and up to date design. The new website has overall site simplification & optimized for users, as well as is 508 compliant.

 

MY ROLES

+ Lead UX

+ UX Researcher

+ Strategist

TEAM

+PM

+Analytics Specialist

+Digital Designer

+Devs

DELIVERABLES

+ User Flows

+ User stories & Feature Specs Doc

+ Hi-fi Prototype+

+Usability Testing

+ Journey Mapping

+ Manual Accessibility Checklist

 

DISCOVERY

Users & Use cases

Our team started with website analytics from the existing site to identify the top visited landing pages, what users are searching for in terms of keywords to better understand what their tasks are when arriving to the website.


I created user task flows to identify how users are currently utilizing the website and identify areas and gaps of opportunities. Because of their tight timeline, WI Lottery opted to do an abbreviated version of discovery, so most of the discovery work was lo fidelity. WI Lottery also have an annual report from IPSOS for their audience and more in-depth understanding of their segmentation. We relied heavily on that to learn more about our user groups since it was an abbreviated discovery phase. There was also a lite competitive analysis of other state’s lottery website. This phase ended with a recommendations list for Ideation.

 
Katherinekrichards_WILottery_Personas.jpg
 

IDEATE

User Stories Breakout

After analyzing a list of requirements and identify the scope of work from the Discovery phase, I started creating user stories and adding to the backlog to prioritize as a development team.

 
Katherinekrichards_WILottery_kanban.png
 
 

Old Website

Before we dive into the redesign and the process of that, below are some screenshots of the old WI Lottery website. There is overall a lot of duplicate content and the IA was not intuitive or organized, making it more difficult for end users to find the content/ information they needed quickly.

 

Sitemap & Page Templates

The left image shows the varying page templates. Because this is built within Drupal (CMS), it’s intention is to simplify the number of page types available so it’s easier maintenance for the clients moving forward. The right image shows the proposed WI Lottery sitemap. Click on the image to enlarge.

 

Hi-Fi Prototype

Once the user flows of top tasks were identified from the discovery phase, I went right to work and created high fidelity prototypes. This helped significantly when we performed usability testing. Below are some screenshots of the wireframes. If you want to see the entire prototype, click on the button below to see it in full functionality.

 
KatherineKRichards_WILottery_LottoLandingPage
 
 

Designs

Before designs started, we started usability testing using participants WI Lottery had in a pool from their existing gamers in parallel to design work to eliminate long waiting time. The feedback from usability tests were taken and made into designs as updates.

 
WILottery_InstantGameDetailPage
WILottery_LottoGameLanding
 
WILottery_InstantGameLanding
 
WILottery_FAQ
 
 

Usability Testing & Journey Mapping

From there, I facilitated moderated remote usability testing with 7 users who are not as familiar with the WI Lottery website to gauge what new users would do. They were given specific tasks and used a hi-fidelity prototype. 

 

GOAL

The current WI Lottery website IA structure is not organized and the overall site is out of date. Often users will call the hotline to get information when they can’t find it on the website. 

The goal is to refresh the website so it’s optimized and simplified for users, while increasing overall web traffic and decreasing the total number of hotline phone calls. 

 

TASKs

1. Homepage Thoughts/ first impressions

2. How to learn more on how to play for a Lotto Game

3. How to find new Instant Games

4. How to stay up to date for new lotto game numbers

 

 

Identify the assumptions, what was identified from Discovery that we are testing today

WILottery_UsabilityTest
 

Overall Wins & Opportunities

WILottery_QuickWins
 

High level issues prioritized

WILottery_UpdatesPrioritized
 
 

508 Compliant

Because WI Lottery’s website is a government website, it is required that we follow the 508 compliance, meaning all users, regardless of disability status, can access technology. 508 Compliant websites are compatible with assistive technology (Source: WCAG & Microsoft Inclusive Design Kit). With every website we build, it is our job to make sure we’re solving for all people, not just the bigger population. But I’ve never had the opportunity to dive further with accessibility, so this was a very interesting project for me. I did a lot of research to create a manual accessibility checklist specific to this client. I also did a few internal meetings to educate and inform the internal team on ways different departments can participate and think with accessibility best practices in mind for future websites. I hope to continue this internal and external education on accessibility to come.

It was actually wonderful timing that I was also speaking on Accessibility for a UX Podcast. You can learn more about it here or hear the podcast directly here (Episode 5).

Manual Checklist I compiled from 3 varying sources.

Manual Checklist I compiled from 3 varying sources.

Wonderful Posters from https://accessibility.blog.gov.uk/

 

I also led and facilitated an internal workshop to simulate scenarios with some of these situational or temporary disabilities to help the internal HY team build empathy. I utilized Microsoft Service’s Design Toolkit as an inspiration, as well as a Chrome plugin called Funkify, where it offers simulation for varying disabilities on a live website. I emphasized that this exercise is to offer participants an understanding of what it is like to be elderly and disabled. It is not intended to replace a lifetime of experiences and that they are only simulating this for a brief moment. This exercise will not give you a full understanding of what it really is like live with a disability. But awareness and education is a good start!

 
Screen Shot 2018-11-13 at 4.20.02 PM.png
Screen Shot 2018-11-13 at 4.21.19 PM.png
 

Workshop feedback

lorem ipsum
— internal team A
lorem ipsum
— internal team b
lorem ipsum
— internal team C