nwsl_website3.png

Role : User Experience Designer

Deliverables : Heuristic evaluation, information architecture, redesigned pages, creating new pages

Tools : Sketch, Typeform

Client : A+E Networks & National Women’s Soccer League

 

BACKGROUND

The National Women’s Soccer League and Lifetime paired up to revamp the digital ecosystem for the league. This included redesigning the existing website.

nwsl lifetime screenshot copy.png

Step 1: User Research

Typeform Survey 3 copy.png

Qualitative Surveys & Guerrilla Interviews

Users described their go-to process for watching games on game days. This lead to phone interviews to understand the experience a bit more in depth.

Key Insights that emerged [insert image & paragraph]


Step 2: Heuristic Evaluation

This step enabled us to learn the re-design process of existing pages, as well as pinpointing which pages to create from scratch. We realized through our interviews that there were several high-priority pieces of information that fans were unable to access. To address this pain-point, we thought about the overall information architecture and developed new pages for the redesigned website.

 

Step 3: Creating the Site Map and thinking through the overall information architecture.

 
NWSLwebsitemap.png
 

Step 4: Offering a variety of wireframes as options

Player Pages - Wireframes

News Index Pages - Wireframes

News DropDown Wireframe.jpg

News index drop-down menu

Thinking through how news and articles should be indexed.

Article Pages - Wireframes

NWSL Articles Page Wire V1.jpg

Version 1: Continuous scroll reading navigation

Users are able to scan through news headlines through one continuous scroll.

NWSL Articles Page Wire V3.jpg

Version 2: Continuous Scroll Reading Navigation with Ads

Using ads as breakpoints

 

Transactions Page

NWSL current transactions.png

Transactions Page on the original site

Not very informative

Transaction Page Wireframe

How do people find information about the players?

 

Creating an index page of all of the players : Wireframes