case study
Prep Sportswear
Designing a better customizable team shop experience
overview

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, as well as a feature that allows its users to build their own Custom Team Shop.

The custom team shop gives users the ability to create their own fully customizable e-commerce store, all while using Prep Sportswear's platform and fulfillment center. The feature also includes a fundraising component that gives shop owners a percentage of funds from sold merchandise. And as a result, the feature is very popular with certain users.

The problem

To set up a team store, users had to fill out a form on a landing page that provided very little context about the overall team shop product, its features, its benefits, or how long and difficult the process might be. This put off too many potential customers as it persuaded them to look for other similar products online—some of which were direct competitors of Prep Sportswear.

The numbers didn't lie.

  • 24% completion rate for the form and decreasing YOY
  • Of the users who did complete the form, It took them an average of 8-10 minutes
  • Overall revenue from the feature was decreasing YOY
goals

Redesign and ship Prep Sportswear's Team Builder feature

  • Reduce user pain points and friction by removing usability issues
  • Build a user friendly process
  • Bring the UI and design to modern standards
  • Innovate on the product with additional customization features
  • Create a mobile first design approach
UX & Business Metrics

Working closely with my product team, these key success metrics were identified:

  • Improve customer satisfaction
  • Decrease customer support calls
  • Increased speed and efficiency of use
  • Increased completion rate of form
  • Increased usage after sign up
  • Reverse decreasing revenue trend
my role

Working with my product team, I led the following:

  • Experience strategy
  • Research & Usability testing
  • Wireframing
  • Prototyping
  • UI & Visual Design
  • Split A/B testing
my process

After the project brief meeting, I led a Lean UX Canvas brainstorm meeting with my Product Manager and product team to shift the conversation from outputs to outcomes. This also allowed me to gather SME's with vital knowledge about the feature and users—including customer service reps.

User persona

Based on analytics and data I created a user persona to help me and my team identify our target users, their needs, and pain points.

comparative analysis

I conducted a comparative analysis to get myself aquatinted with similar e-commerce services and platforms as well to gather inspiration for my solution. I gained several insights that helped prep me for the next stage in my process.

user flow

After defining the larger picture, I created a user flow to define the steps our core user would need to take to complete their goal. The user flow above demonstrates the steps our main persona "Coach Cooper" would need to take to build his team store. My goal was to create a simple and intuitive process that addressed and met the needs of our users.

development

Sketches & Wireframes

As I normally do, I started the development and ideation process with a whiteboarding session involving my team to generate some quick concepts but also to get the team inspired and thinking out of the box.

Prototyping

After sketching various possible solutions, I created a prototype of an MVP that I would allow me to test and gather quick user insights that address the core pain points.

user testing

I conducted a usability test both in-house and with usertesting.com to quickly validate my early prototype concepts. After receiving some early critical feedback, I went back to the drawing board and made edits and modifications to both the user flow and overall onboarding experience that also included content changes.

Key results

  • Most users were able to complete the onboarding process in less than 5 minutes, which was a huge improvement from the original form landing page
  • A few users were confused about the product selection screen
  • Overall, users felt the landing page and onboarding experience provided them with sufficient context and it was "easy to comprehend" but there were still some usability and content issue we needed to address
the solution

A successful MVP. After several iterations and improvements to the overall product (guided with user testing feedback), our team launched the new landing page and onboarding experience with great success. We made a complete reversal of decreasing sign-ups and completion times, which was one of our main metrics for success.

Landing Page

The landing page served as an introduction to the product, therefore it was crucial to ensure that it provided sufficient context about the product and its benefits. The new landing page did exactly that and user testing insights validated it. And as a result, we noticed a significant uptick in users beginning the onboarding process as soon as we launched the new design. A complete reversal from the original concept.

onboarding

One of the biggest problems with the original form concept was getting users to fill out the form and sign up. The new concept replaces the form concept with an onboarding experience that is simple, inviting, and intuitive. The new onboarding process guides the user and asks them to fill out a few preferences to quickly set up their team shop. The new concept is personalized and caters to the user type. And when the user believes the experience will be tailored to their needs—they'll be more receptive and willing to use your product or service, as was proven in this case.

outcomes
750k
66%
Revenue generated after only 6 months from launch. Up 200% YOY.
Completion rate after 3 months from launching. This was 44% higher than the legacy product.

The new solution was a successful MVP. But I believe there's always so much more a product team should do after an MVP launch to improve and innovate on a product. Given more time, I would have loved to explore some of my early concepts as well the idea of adding graceful micro-interactions and elegant motion, to name a few enhancements.

visit
say hello

Want to learn more about this project? Contact me at luis@designlp.com