Keeping athletes hydrated on and off the field

How can we keep athletes hydrated while shipping more orders, removing complexities, increasing operating efficiency and opening up revenue streams for Gatorade?

Fig.1 – Gatorade TeamZone is a B2B eCommerce platform allowing Professional and Collegiate sports teams to order nutritional items for their teams.

Through the design of an ecommerce platform we were able to provide sports teams with the improved ability to place and receive orders while making things easier, closing gaps in lost income and opening revenue streams.

The team

  • Jon Sorrentino – Design Team Lead, Senior UI/UX Designer
  • Dane Wesolko – Senior UI/UX Designer

The challenge

Gatorade, professional and collegiate sports teams all across the country partner to provide athletes with the best possible products to keep fit while on and off the field. Resulting in a program that lets Sports Directors, Dietitians and/or Trainers purchase Gatorade products using their teams allocation each season. As simple as it sounds, this process was proving to be cumbersome and inefficient.

The internal team at Pepsi Ecomm and Gatorade relied heavily on two employees to maintain accounts, manually enter data, aid in facilitating orders, assist with error handling as well as a plethora of other tasks. Outdated software, disconnected databases, poor inventory communication and order management were creating tons of stresses. All of this frustration was proving to be a thorn in everyone’s side. Myself and an extremely talented cross-collaborative team stepped in to provide a solution.

Fig.2 – Clickable prototypes were used during testing and as a way to communicate our overall vision.

Finding opportunity

Prior to my engagement Pepsi Ecomm established project goals and expectations. I was then on-boarded as a contract Senior UI/UX Designer where Jon Sorrentino—Design Team Lead, Senior UI/UX Designer and I began by setting up an initial component library out of existing elements and created wireframes for review during initial user interviews. While interviewing it was uncovered that:

  • Lack of information on orders and product availability was a major pain point.
  • A lot of confusion and frustration was present on all regards.

Working through

After deeply analyzing our findings I began iterating on the first set of concepts. Working on the partner experience my attention turned towards what was being said about orders. There was a lack of communication around status and inventory. Causing sports team members to frantically rush trying to fulfill incomplete orders. Not only was this a burden for users it was a missed opportunity for Gatorade.

My design process began with brainstorming and mocking up concepts in Figma, a cloud-based design and prototyping software. At first my focus was on order management and creation rather than what you would typically expect. This direction was chosen due to the nature of the end-users requirements and workflow processes. User flow diagrams and annotated wireframes helped shape the overall experience, page models and content structure. Due to time constraints it was best to pivot direction and incorporate existing patterns into the design that followed a more traditional ecommerce experience.

Fig.3 – The product page was one we paid close attention to in order to create a seamless shopping experience. Inspiration was drawn from some great examples.

Shifting gears out of Figma feedback was incorporated into high fidelity prototypes and further deliverables were provided via Adobe XD, a cloud-based design and prototyping software. This decision helped speed up our ability to rapidly prototype. Further research was conducted throughout. Feedback was applied until an MLP (Minimum Loveable Product) was established and we knew what we could deliver in time.

Upon completing the initial work, components and page models were provided to engineering for use in developing the front-end. Participation in cross-collaborative grooming efforts helped aid in project management and ensured all timelines and milestones were met.

Attention was then on future state ideas and conducting research regarding industry best practices via Baymard Institute’s premium library. Through these findings Pepsi Ecomm was provided with benchmarks, recommendations and suggested improvements that could be applied to all of their ecommerce platforms.

Fig.4 – A research deck showcasing future improvements will help to continue to make this a more pleasent user experience for sports teams all over.

No further work was contracted, all deliverables were provided and Pepsi Ecomm continued with development. Deliverables created were:

  • Component library—aiding in faster design and development
  • User flow diagrams—outlining tasks performed
  • Low fidelity wireframes—ironing out content structure and page diagrams
  • High fidelity design comps—showing the final product with brand styling
  • Interactive prototypes—communicating the vision and behavior of the platform
  • Research deck—providing best practices and suggestions toward improvements

The results

In working with PepsiCo Ecomm and Gatorade in three months we designed an MLP of TeamZone. By building this platform we were better able to facilitate professional and collegiate sports teams needs. TeamZone makes it easier to access Gatorade products and:

  • Place orders using team allocations
  • Gain insight on orders, substitutes and shipping

As a result it is expected that more orders will be shipped, users will get better clarity around order status and what to do in the event of an issue and it will be easier to work with the TeamZone platform. Gatorade will also be able to execute on new opportunities.

Reflections

Project timelines forced us to be creative within boundaries. Initially I had wanted to explore the idea of an order creation and management experience since users place orders in large chunks during certain times of the year usually in large amounts and similar or same products. It was my thought that managing it this way could actually make it easier.