Project Description
During my time at Fanatics, I worked as a lead designer redesign of nflshop.com. The purpose of this project was to move the old NFL Shop store onto a new platform with a brand new interface, and to enhance the user experience.
My Role:
For this project, I was responsible for leading the; design process, user interface design, user experience design and interaction design. I worked closely with the NFL Business Stakeholders, UX Research Team, Marketing Team, Product Managers and Front-end Engineers.
Project Objectives:
• Move NFL Shop over to Foundation (New Platform)
• Create templates that will later be used for other league sites. Such as; MLB Shop, NBA Shop, MLB Shop, Nascar Shop and NHL Shop
• Create scalable team headers that will be unique to each team
• Enhance the “Shop By Team” Experience
UX Problem
When we did our user interviews, we discovered that users were having a hard time navigating through the site.
The user wasn’t making the connection that the navigation wasn’t specific to that team, and they would lose interest after getting rerouted to league listing pages.
Design Process
1. Exam the current user experience
2. Interview 12 participants (Work with the UX Research Team)
3. Redesign the user flow and revise the IA
4. Create low fidelity designs for feedback
5. Create click-through prototypes for presentation
6. Conduct user testing with the new prototype (Work with the UX Research Team)
Current Experience
We noticed some barriers when navigating through the site. Users were getting confused when they would get redirected to a category landing page, while trying to filter their search on a teams landing page. Users were forced to repeat their search after clicking on one of the category links on the navigation.
First Flow: The user lands on the Denver Broncos team page from the homepage. The user tries to filter their search by clicking on Men's from the top navigation. The user is now redirected to Men's category listing page. From here the user clicks on the Denver Broncos again, to get a filtered selection of Men's Denver Broncos products.
Second Flow: The user lands on the Denver Broncos team landing page from the homepage. The user clicks on the Men's filter from the left navigation, to get a filtered selection of the Men's Denver Broncos products.
User Interviews
This study was run to evaluate the users experience in navigation and switching to a different team. We worked with a group of 14 participants (25-55). We had our participants walkthrough the shopping experience, having them focus on using the navigation and switching to different teams — while asking for their opinion.
We uncovered three main issues from this study:
1. Navigation wasn’t clear.
2. Users didn’t feel confident in switching to a different team.
3. Getting redirected to a category landing page by clicking on a header link was frustrating and it felt redundant.
Demographics: 14 participants
Revised Experience & Hypothesis
The main issue for users was the lack of clarity in the navigation and switching teams. Our hypothesis was to create a global navigation that was clear — it behaves differently at the global level (team selection) vs. team level (team specific). Once in a team, users will be able to search within that team's catalog without having to get redirected. They will also have the ability to switch teams.
Below is an ideal user flow for the redesign.
Wireframes & Iterations
The images below show a snippet of the wireframing and design iteration process that we went through. The challenge here was to focus on creating a seamless navigation experience for users, but also keeping in mind the second challenge: redesigning the UI for the whole shop.
We used this time work on the navigation design along with the information architecture. We worked with product managers and the NFL business stakeholders. We created two sets of navigation: one for the global header and the other for the team headers.
UI Redesign
During the UX enhancements for the navigation, I was also leading the UI and visual design. We made sure that our redesign was created with the NFL brand and the NFL teams in mind.
The redesign goals included:
• Creating themed templates for the; header, footer, team landing pages, category pages, product detail pages, shopping cart, checkout pages and order confirmation page
• Creating scalable team headers that will be unique to each team
• Creating a set of UI components
• Designing vector icons for the header and footer
• Preparing all 32 team logos for the team headers
• Building a style guide and specifications for the engineers
Prototypes & Deliverables
We used Sketch for all of the designs, photoshop for the banners and InvisionApp to put together an interactive prototype for presentation.
The mobile experience was redesigned by the Mobile & Apps Team, to follow the improvements we did to the desktop experience. This was done as a phase 2 project.
See this experience live - www.nflshop.com
Users Testing & Feedback
We tested the redesigned experience with our users from our initial testing group, to see if there were any unexpected findings and areas for improvement. Eighty-nine percent of our users preferred the new header design. They felt that it was much easier to jump between categories than having to scroll here and find it on the filter navigation.
Participants did not have an issue changing teams in the new design. :)
We worked in collaboration with our UX Research Team to help conduct this test and the user interviews.