+73%
MOBILE
BASKET RATES
INCREASED
X2
BOOST IN
MOBILE
REVENUE
+122%
MOBILE
CONVERSION
INCREASED
-21%
DECREASE IN
CHECKOUT
ABANDONMENT
THE RESULTS
GNC Doubles Mobile Revenue
The General Nutrition Corporation (GNC) specializes in health and nutrition products. With a vast range of vitamins, supplements, and wellness items, GNC has established itself as a go-to destination for individuals seeking to enhance their overall health and fitness.
THE CHALLENGE
Following a recent website redesign, GNC saw a significant drop in mobile conversion rates, raising concerns about its impact on other key user experience metrics. As the Sr. Principal UX Designer at Salesforce, I spearheaded a UX audit, aimed at uncovering usability issues and providing insights on how to optimize the new design.
MY ROLE
Responsibilities
Leadership and Communication
During the project's lifecycle, I facilitated communication between Salesforce, the client, and their partners. I reviewed and provided feedback on work delegated to partners, helping ensure alignment between GNC's and Salesforce's goals and objectives.
Research
Utilizing shopper journey data, I delivered a report to our client and partners, translating insights into arrears of focus for optimization and testing. Additionally, I contributed to the development of storyboards formed by persona-driven use cases.
Experience Strategy & Ideation
In collaboration with business leaders, I identified and prioritized product enhancements, new features, and other essential requirements. To ensure alignment with project objectives and desired outcomes, I actively participated in development team meetings, providing guidance and direction.
Prototype and Design
I created wireframes, high-fidelity comps, and designs to visually communicate opportunities and solutions. Presenting these recommendations to client executives, ensuring they were actively involved and aligned with the decisions being made.
DISCOVERY
Stakeholder Meeting
GNC was able to provide valuable customer insights from their recent surveys, including detailed customer personas. We discussed business goals, objectives, and specific challenges they were facing. I worked with them to define the project scope and deliverables.
RESEARCH
Quantitative Data
Benchmarks
I started reviewing GNC’s data from the Salesforce benchmarks and dashboards reports to see how the site was performing compared to the Health and Wellness vertical on the Commerce Cloud platform.
In my data assessment, I review a variety of benchmarks that range from inbound traffic patterns by device, search metrics, add to basket rates, abandoned checkout, AOV, page views, and of course the all-important conversion rate. While GNC's desktop experience was performing well, there were glaring issues with the mobile KPIs.
-
Search usage was stronger being 198% higher than the benchmark, however the convert rate from those who searched was 15% lower.
-
For GNC shoppers who did not search, their conversion rate was 43% lower than those who did.
-
Mobile add to basket rates were 30% lower than the benchmark and 20% off from GNC’s previous year.
-
Checkouts started was 32% lower than the competitive space and 27% lower than the previous year.
-
The abandoned checkout rate was 27% higher than the vertical and 23% higher than the previous year.
-
This led to GNC's mobile conversion rate to be 50% lower than the benchmark and adversely impacting overall revenue compared to previous periods.
PERSONAS
Qualitative Data
GNC shoppers range from the fitness enthusiast who seeks performance-boosting supplements like protein powder, the busy professional prioritizes convenient solutions like subscriptions for their daily vitamins and the health-conscious Individual, who is focused on preventative care, browsing multivitamins and targeted support for specific health concerns.
Customer Feedback
GNC had completed several weeks of collecting customer feedback and shared with us those responses. A clear pattern emerged, revealing customer frustration with navigating to products. They expressed frustration with not understanding where to find the products and the number of page loads to get to results. Once shoppers found their way to products they were overwhelmed with the number of results and the interactions with the filters.
-
"I'm a loyal customer of GNC but lately I've been getting really frustrated with trying to find the products I want. The links seem to be hidden or missing, and I end up spending way too much time clicking around just to find what I'm looking for. Please fix this!"
-
"Why are there so many clicks needed to get to a product page? I wanted to reorder some fish oil capsules, but it took me clicking through 'Vitamins & Supplements,' then another page and finally I got to Fish Oils.”
-
"Navigating through the GNC website has become a headache for me. I can never seem to find the product links. I just end up searching.”
-
"Trying to filter for protein powders on your website is so frustrating! There are a ton of options listed in the filters but you can only select one at a time. I had to keep waiting to open the filters and scrolling to select the different brands and flavors."
-
“I want to filter vitamins by both brand and diet, but as soon as I choose a brand, the diet filter disappears. I have to keep going back and forth, re-selecting and which takes forever.”
In addition to the feedback above users also expressed frustration with the path to the checkout funnel and repeatedly being sent to the cart each time they added a product to their bag.
ANALYZE & DESIGN
Key Insights
I began the visual inspection of the GNC site. This involved closely examining the site's information architecture, user flows and design elements. With the gathered data and customer feedback in mind, I was able to pinpoint areas of improvement and translate those insights into actionable design recommendations. I created wireframes and prototypes to ensure that the audit offered a clear roadmap for optimizing the website and ultimately enhancing the customer experience.
Navigation
Observation:
The Benchmark data revealed a significant difference in conversion rates between users who navigated the website organically and those who used the search feature. The organic navigation group had a lower conversion rate of 43%, suggesting potential issues with the site's navigation. Further analysis indicated that the navigation lacked visual hierarchy and had a flat appearance. Another contributing factor was the absence of a prominent and clear call to action for "shopping," which could have further hindered conversion rates.
Recommendation:
Redesign the navigation so that it is easier for users to scan. Use different font sizes, colors, and spacing so that the different options have their own presence. Relabel the department category with a more actionable term like “Shop”.
Original Design
Revised Design
Drill Downs
Observation:
The navigation had an additional issue: when shoppers clicked on a label, they were taken to a category landing page. They had to click on the plus icon to see the subcategories, but they were unaware of this. Usability studies have shown that only 25% of users click on the icon for expanding navigation. Most shoppers click on the more prominent text rather than the icon.
Recommendation:
GNC's average mobile session had 3.14 page views, sending users to category landing pages was wasting page loads. I recommended to bypass category landing pages and drive traffic to products quicker by having both the label and icon display the subcategories.
Original Design
Revised Design
Filters
Observation:
GNC's conversion rate for users who performed a search was noted to be 15% lower and add to basket rates were 30% lower when compared to benchmark data. This suggests customers are not able to refine the results for products that they are interested in.
When customers interacted with the filters on product list pages, there were 475 pixels between the top of the screen and the first refinement, this was wasted space. Additionally, the filters would close upon each selection, creating extra page loads and requiring shoppers who wanted to make multiple selections to repeatedly reopen the filter.
Recommendation:
Utilize a panel to display the filters instead of a drop-down to make better use of the available space. To reduce page loads and allow for multiple selections, anchor calls to action to the bottom of the screen. Once the shopper has made all of their desired selections, they can click "View Results."
Original Design
Revised Design
Path to checkout
Observation:
There was a 32% lower than average checkout start rate. When shoppers added items to their cart, they were automatically directed to the cart page. GNC consumers typically purchase an average of 3.4 units per transaction. The automatic redirection to the cart results in additional page loads for those who wish to proceed with further shopping. Shoppers were getting frustrated by continuously being sent to the cart before they were ready to checkout.
Recommendation:
Incorporate a mini-cart function that notifies shoppers when they have added an item to their cart. This feature should provide them with the option to continue shopping or go to the cart. A mini-cart also provides an opportunity to present upsells and/or display promotions, such as free shipping messages.
Revised Design
Checkout forms
Observation:
GNC Shoppers were abandoning the checkout 27% higher than the benchmark. In the checkout funnel, address fields were not coded to populate browse stored information. Automatically filling in form fields can reduce checkout times by 60% and increase conversion rates by 20%. There was an anchored “Place Order” button at the shipping address step, shoppers still needed to select a shipping method and provide payment details.
Recommendation:
Implement form coding to allow shoppers to quickly populate fields by selecting their saved personal information. Eliminate the anchored "Place Order" button and instead introduce inline buttons labeled with the next step.
Original Design
THE RESULTS
Successful Engagement
The above were some of the recommendations that were compiled in a report and presented to GNC Executives. We work together to prioritize the suggestions so that they could begin getting them developed, tested and moved live.
After the recommendations were put into place we continue to monitor the site performance with ongoing A/B testing and benchmarking, GNC experienced the following results:
-
Mobile basket rates increased 73%
-
Mobile convert rates improved by a 122%
-
Mobile abandon checkout decreased 21%
-
All of this lead to Mobile revenue doubling
GNC leadership was so pleased with the outcome of my efforts, that I was now considered a trusted advisor and resource for their other ongoing design projects. Because they wanted to circumvent potential issues before launch, I was brought in to be a consultant at the beginning of projects. I worked closely with their internal resources and partners to assure that best practices were in place.