About
Academy Sports + Outdoors is one of the nation's largest sporting goods and outdoor retailers. With over 300 stores, Academy offers a broad assortment of quality hunting, fishing, and camping equipment, along with sports and leisure products, footwear, apparel and much more.
Academy.com was launched in 2011 to support the company’s rapid growth. However, due to limited resources, the site’s homepage was never properly optimized with the best user experience in mind. The design adopted a desktop-first approach, leading to accessibility issues and a poor mobile experience.
The Goal
Redesign Academy’s homepage with a mobile-first approach, aligning with modern design trends to stay competitive in the industry. Aim for a design that facilitates easy personalization, boosts user engagement, and creates a more efficient, streamlined design and development process.
My Role
Project Lead
Led the UX team from research and ideation to high-fidelity wireframing. Closely collaborating with developers and product designers to ensure feasibility and create a template for a streamlined design and development process that could be utilized week to week. I also performed quality assurance checks to ensure the new designs and code met the desired standards.
UX Researcher & Designer
Researched competitors to identify industry standards and opportunities for improvement. Utilized website data analytics to understand current user behavior and how to optimize the experience in the most effective way. Presented findings and ideas to leadership and UX team for alignment.
Usability Testing & Performance Tracking
Collaborated with the Personalization Team to conduct A/B testing. Monitored user interactions and key metrics to identify areas for improvement. Made adjustments based on test data to further enhance the homepage’s performance and user experience.
Product Designer
Created a homepage design template and style guide, which was handed off to the production design team for weekly use, creating a more efficient design process and streamlining the handoff between design and development teams.
Current State
Mobile Experience Disconnect: The layout and functionality of the homepage was primarily optimized for desktop screens, leading to a poor mobile user experience.
Lack of Visual Appeal: The overall design felt dated, and minimal attention to aesthetics led to a bland, uninspiring user experience.
Imagery Formatting Challenges: There was a lack of flexibility when formatting imagery. Designers were constantly struggling to fit required imagery in the formatting that did not match with the image.
Inefficient Personalization: The design template and development process hindered efficient personalization, as content could not be easily swapped out to tailor the experience to users' needs and preferences.
Accessibility Concerns: The carousel feature and other homepage components presented challenges in adhering to ADA guidelines, making it difficult for all users to fully engage with the content.
Interaction Drop-off: The requirement for users to scroll to access additional content resulted in a significant decline in interaction rates, leading to missed promotional opportunities.
Research Methodologies
Research Findings
Ideation
In the ideation phase for the new modular format, it was crucial to collaborate closely with the development team from the start. This early engagement helped us envision how the code would facilitate the stacking, removal, and swapping of components for enhanced personalization and promotional flexibility.
One of the key challenges we faced was ensuring that the components were responsive across various devices. This required us to establish and align on precise specs for consistent image resizing, padding, and margins, allowing for a seamless user experience.
Design Solutions
One of the goals of creating a modular homepage format was to give the production designers more flexibility when it came to fitting provided imagery in a given space. The previous design lacked flexibility, and more than often, the marketing team would provide us images shot vertically and we were challenged to figure out how to make it look good in a horizontal space.
The new modular template design, provided a range of sizes and orientations making it easier to organize products in a given space.
A/B Testing
We started by A/B testing two modular sections (test) against the homepage carousel and event banner (control). We split homepage traffic 50/50 between the two experiences and monitored user engagement and bounce rate. Our primary objective was to see if exposing the promotions upfront, rather than requiring users to scroll, would boost engagement. We also wanted to assess whether organizing the clearance story into categories would lead to higher conversion rates - getting the user to lower funnel faster - compared to a direct link to the full clearance page.
Results
The test outperformed the control in visits (click throughs) generating a 62% increase. Additionally, the test saw a 46% increase in revenue and a 43% increase in orders. Despite the higher total revenue and orders, the conversion rate per click slightly declined in the test, dropping from 3.23% to 2.85%, reflecting a 12% decrease. The average order value (AOV) increased by 2% in the test experience.
Looking at individual categories within the test experience, the clearance section saw a significant boost, with a 47% increase in revenue, 45% increase in orders, and a 52% increase in engagement. The Mother’s Day category had more mixed results with a 108% increase in engagement and 11% increase in AOV, but seemed to underperform in other KPIs such as revenue (-13%), orders (-25%), and conversion (-62%). The swim category also seemed to underperform, with revenue down 86% and orders down 84%, indicating that the modular sections may not have been as effective for this category. On the other hand, the Hydroflask category showed impressive growth, with revenue increasing by 311% and orders by 571%. The Nike category also performed well, with a 68% increase in revenue and a 110% increase in orders, while the Shoes category saw a 269% increase in revenue and a 283% increase in orders.
Overall, while the modular sections boosted engagement and improved total revenue and orders, results varied across categories. Strong performers like Hydroflask, Nike, and Women’s Shoes benefited from the new layout, while Swim and Mother’s Day struggled. Despite a slight dip in conversion rate, the test was a success, showing positive impacts on engagement, revenue, and AOV.
*Results gathered from a 7-day A/B test
Implementation & Adoption
Once given the final approval to launch the new homepage, I collaborated with the manager of web design to develop a reusable homepage design template that would be used weekly by the production team. Leveraging Figma components, I created templates for all necessary component variations. The design followed a mobile-first approach, enabling designers to prioritize mobile layouts, which automatically generated the corresponding desktop designs.
I worked closely with the development team to hand off the various component variations, ensuring a seamless design-to-code process and pixel-perfect alignment.
During the adoption phase, I led hands-on working sessions with the design team, demonstrating how to efficiently use the new template and design style guide to maintain consistency across designs.
In an ever-evolving industry, our templates continue to adapt and enhance over time. The new modular homepage template fosters ongoing ideation and growth, ensuring its relevance and effectiveness years after the initial launch. The modular components have been seamlessly integrated across our entire website, serving various purposes - from brand and informational pages to marketing campaigns - demonstrating their versatility and value in driving engagement and success.
