nsfsport.comNSF International's Certified for Sport® Website Redesign
Overview
The Certified for Sport® program helps athletes, coaches and consumers make educated decisions when looking for sports supplements. They certify that what is on a product label matches what is in the bottle. The main goal of the new website was to reflect the program’s mobile app design and functionality for a more seamless transition between the two brand touchpoints.
Problem statement: How can we help consumers choose safer sports supplements while providing a more cohesive user journey?
Role
UX/UI Designer/Lead Developer
Deliverables
Heuristic Evaluation, Sitemap, Wireframes, Mockups, Final Website
Role / Activities
I was the sole designer and main front-end developer on our in-house team which included a web manager/programmer, marketing and business stakeholders. I was responsible for ensuring the design fit with the newly built mobile application, while collaborating with the web manager and marketing on ideation. I worked closely with the web manager/programmer to design and develop the compare and filterable product listings functionality for the site which allow consumers to search for certified sports supplements.
Solving complex problems requires good teamwork.
Wireframe Examples
Project Details / Process
I performed a heuristic evaluation on the previous site and made recommendations for improvement such as ensuring the new site is mobile responsive, coming up with a consistent plan for updating content and adding form validation. I worked with the web manager and the internal marketing team on the needs analysis and sitemap. I created low-fidelity sketches and wireframes which we refined with the broader team. After reviewing the mobile app UI screens I incorporated design elements and the color palette into the mockups to create a more cohesive feel with the app.
Multiple touchpoints may influence the experience a user has with your brand.
Solutions
This redesign project included significantly more functionality for the certified product search than their previous website. We added the ability to search and filter by more criteria and show multiple product photos with an image slider. On the search results page product families are grouped so there is one expandable entry for a product that comes in different flavors and sizes improving scannability.
Users can also compare the attributes of up to three different products on a compare screen. In order to determine how best to display the compare piece on larger screens I researched compare functionality on several large e-commerce websites to influence the features and functionality in this context.
Look for ways to limit the number of steps it takes a user to complete a task.
Before
After
Results
The redesigned website has search features and design elements similar to the mobile app, creating a more cohesive brand experience between touchpoints. We also provided users with multiple avenues to find and compare safer sports supplements.
User engagement metrics imply our changes are making a difference. The product search results page continues to be the most visited page of the site. Twelve months after we launched, unique pageviews were up more than 400%, overall users for the site were up 30%, new users were up 30% and sessions were up 28% over the previous year.
Consistency across brand platforms can help improve the user journey.