Prep Sportswear is one of the largest U.S. manufacturers of customizable sports apparel. Its digital marketplace provides spirit gear to a broad range of customers. The platform includes High Schools, Colleges, Pro Sports, and more.
Prep Sportswear was an early e-commerce success but its last major e-commerce website overhaul was over 10 years ago. To keep up in the competitive market that it was in, it needed a major redesign. Specifically—A website that was up to modern standards and that included a fast shopping experience and a mobile-first approach. In summary, the core challenge was to update and modernize the existing UI and front-end without changing anything major from information architecture to back-end functionality.
Redesign and ship Prep Sportswear's e-commerce website
Working closely with my product team, these key e-commerce success metrics were identified:
Working with my product team, I led the following:
One of the first things that I did after identifying the main business and user problems with my product team and after creating a roadmap, was to take inventory of the existing system. It helped me gain an understanding of the different user flows, inconsistent interactions, and UI. It also served to provide visual context to stakeholders of the issues and scope of the project.
I crafted a user persona with the help of analytics and existing data from the customer service team to find out the core user and their pain points. Afterward, I conducted a usability study of the existing site to observe and gather fresh user insights. Below were some of the insights from the study.
Key Findings
Before I began working on the development of the new website, I wanted to do a bit more research. I conducted a comparative analysis with modern sports e-commerce sites to get inspiration on modern UI design trends. But I also wanted to research potential features that may be beneficial to our users, and that my team and myself would be able to implement from a development standpoint.
Wireframes
I began working on initial concepts once I felt I had sufficient user insights from the usability study, and both the site audit and comparative analysis were complete. I wanted to ensure that the main user pain points were addressed. The wireframes also served to bring alignment with stakeholders on core functionality and interaction.
Prototyping
After the wireframing process, I conducted a prototype using Figma, to validate my solution and gather quick user insights.
For this project, I conducted two usability studies.
Usability Test #1
This study only included the wireframes to validate the overall experience, from navigation to filtering. Even though this was mostly a UI design overhaul, there were still some significant layout and interaction design updates, specifically in mobile that needed to be validated by users.
Usability Test #2
After successfully running the first study and learning from the results. I set up a second study to validate the new UI and visual design solution.
Key results
After weeks of A/B testing with google optimize, we launched the site to all customers. The site was built on Prep Sportswear's first scalable design system that I led and created. Consistent UI patterns made the site more user-friendly and a new open grid system, modern typeface, and photography style helped make the brand and website feel more modern, and validated in the usability studies.
The homepage was one of the top-visited pages and the most critical page that provides users with a sense of the brand and product offerings. It was important for me to make sure that the homepage looked trustworthy, and that it delivered on the goals of having a modern and friendly user interface that would invite users to shop and make a purchase.
Product category pages are highly important to Prep Sportswear since many users come directly to this page via google and other search engines as their first point of exposure to the website. Most importantly, customers spend a long time on these pages, browsing and filtering through various products. Therefore it was important for me to ensure that top interaction features such as filtering were easy and intuitive to use. Creating a clutter-free page, with only the most vital details was equally important.
The most popular page on the entire site. Users spent the most time on the product detail page, exploring designs and product colors. The old product detail page overwhelmed users with too much information all at once, and therefore, it was important for me to create a page that was neat, organized, had a consistent UI, and was easy to use. In particular, the new solution also made the design feature much more user-friendly in mobile, which was a previous pain point for users.
I simplified the checkout process by using progress indicators to make it more clear for users to understand where they were in the process and what the next steps would be. Also, the new grid provides more white space and less visual clutter, making it easier for customers to focus on the shopping cart details as well as billing and shipping elements in the following steps. Lastly, since the core users love using promo codes, I made the promo code touch target friendly in mobile and more visible.
Want to learn more about this project? Contact me at luis@designlp.com
