Creating a Digital Marketplace for Youth Athletic Organizations
Reimagining the management and purchasing experience for athletic organizations’ digital storefronts.
Role
Owned the UX/UI for the project during its 6 month duration.
Involved
Requirements Gathering, Competitive Analysis, System Mapping, Medium-Fidelity UI Design
Product Collaborations
Kadie - UX Manager, Jessi & Brooke - Product Manager, Chad - Chief Strategy Officer
Development Team
Jarrett - Chief Technology Officer, Tommy - Software Engineer
An Insufficient Digital Marketplace Experience for Admin and Customers
PlayerFirst is a web application for youth sports organizations. The application allows organizations to digitally sell products to athletes' parents and attendees at events like tournaments.
The platform’s digital marketplace platform was severely underdeveloped and clunky, originally designed only to handle product categories like gate and parking.
What Users Are Saying…
Admin
“Product editing is cumbersome and lacks customization. I pay for an outside digital marketplace software because PlayerFirst doesn't have what I need."
Parent
“Purchasing products is spread out over several pages, and I’d prefer to see everything I need in one central shop. The site isn’t set up like I’m used to as a frequent online shopper."
A Growing List of Product Categories
With the first release of improvements to the digital marketplace, PlayerFirst would need to improve its existing functionality to expand to new product categories like apparel and reel footage for athletic recruiting.
Creating a Marketplace to Meet the Needs of Brands
The state of PlayerFirst's digital marketplace forced athletic brands already using the platform to seek costly outside solutions. A redesign was needed to bring these products sales back to PlayerFirst.
With a growing list of feature requests from brands, I collaborated with product stakeholders to organize features into a three-phase plan for rapid improvements. These requirements were based on feedback gathered from their client meetings.
Due to the time constraints of the project, user interviews were not possible. To promote rapid prototyping and quick fixes to the digital marketplace, I designed in only medium fidelity.
This case study covers the first release of the new digital marketplace, focusing on reimagining the existing architecture to lay the groundwork for expanding into new product categories.
Project Question
How might we better showcase and organize athletic brands’ products for improved discoverability through a reimagined digital marketplace?
Redesign Overview
Part 1
Admin Product Creation Process
Create a more intuitive product editing process that allows Admin to better present their products to customers.
Part 2
Admin Shop Manager
Allow products to be found and managed across the athletic programs that make up a brand.
Part 3
Customer Purchasing Experience
Reimagine how customers explore programs' stores for improved discoverability and engagement.
Project Requirements Sourced from Brands
Create a centralized store page for parents to discover products related to the programs and teams they are involved with.
Create a template for a product page that populates from admin inputs on the product creation form.
Enable products to be sold by outside brands and across all programs in a brand to prevent duplication and enhance sales reporting.
Enable a product's visibility to be shown, hidden, or private across each associated program's storefront.
Provide admin and customers with more guidance and visuals to create more intuitive experiences.
Ensure that all changes to the digital marketplace architecture take into account the existing functionality in other site areas.
2 Admin Product Creation Process
Analyzing the Current State Product Creation Process
I started with the product creation form because I saw it as the foundation for the project and the quickest context to iterate on to visually show to stakeholders that all desired features were accounted for.
After walking through the current state of product creation, I found that the table format made inputting product information difficult to understand. This original design's intent was to allow for easy bulk creation of products. While this is important, it's more vital to first create a usable product creation process for a single product.
I mapped current state into two steps…
Current State Product Creation
Step 1
Create New Product
Admin first inputs higher-level information associated with all products being created. Then, they input the information pertinent to each individual product in a table format.
Step 2
Edit Existing Product
Editing products can also only be done in a table format. Horizontally scrolling through the long list of product information is clunky.
Product Variants in PlayerFirst vs Other Digital Marketplaces
Product Variants In Competitor Platforms
On competitor's product pages, the customer is presented with options for the product, like shirt size or color, before adding to cart. The industry standard is to allow the same product to vary by one or more factors.
Product Variants on PlayerFirst
On PlayerFirst, products can't have these options, such as shirt size or color. Instead, the platform is designed to group products by category on categorical based pages. This workaround for variants sufficed when the platform was being used for simpler product types, like different priority levels of "Parking" as shown below.
Upgrading PlayerFirst with Product Variants
Due to tight deadlines, we were not able to include product variants in this initial release. However, the UX team was instructed to reframe the digital marketplace to handle products individually and not as variants of the category in preparation to match industry standards.
Investigating Product Creation in Competitor Softwares
I then researched other sites in the digital marketplace space, mainly SquareSpace and Shopify.
Overall, it was clear that PlayerFirst lacked the guidance and usability that competitors could provide in their form-based format.
Product Creation on Squarespace
Squarespace makes good use of popups for areas of the product form that need to be tackled on their own screen.
Product Creation on Shopify
Shopify aims to keep all data input within the form, using less popups than Squarespace, which is aligned with product stakeholders' preferences.
Iterating on Product Creation Form
Inspired by this competitive analysis, I began iterating through the product creation process. At weekly feedback sessions, this form was a major focus to ensure all project requirements were addressed according to stakeholders' vision. We considered a single-page product creation form but ultimately chose a stepped process to make the form feel more manageable.
Planning for Dynamic Product Forms
Editing vs Creating a New Product
The header adjusts based on whether the admin is starting a new product or editing an existing product. When starting a new product, a step progress indicator communicates the admin’s progress as all required fields must be filled out to submit the product. When editing, this component becomes tabs to allow admin to conveniently navigate to the section they wish to amend.
Create New Product Page Header
Edit Product Page Header
Setting Athletic Program Association
Products are created within an athletic brand, which contains programs, each with their own divisions and subsequent teams. This hierarchy is foundational for organizing athletes within a brand on the PlayerFirst platform.
The form needed the flexibility to associate a product with an entire brand, a specific program, specific divisions, or even specific team. Visual grouping was vital to communicating the hierarchy surrounding selected divisions and teams within each program. Being able to share products across all programs within a brand would significantly reduce duplication, making it easier for admin to edit products in their stores.
Setting Visibility within an Athletic Brand’s Programs
Visibility determines whether a product is available for sale within the programs, divisions, and teams it's associated with. A product can be hidden, public to all customers, or private and accessed only via link.
The visibility section format updates automatically based on program associations made earlier in the form. For a single program, visibility is set in a simple form. For all programs, it uses a table format to allow for bulk editing.
Setting Visibility Across Multiple Programs
Setting Visibility Across a Single Program
Adding 3rd Party Seller Brands
Your product can be shared with 3rd party sellers to sell it within their own program shops. I copied the workflow for Setting Athletic Program Association as they have similar goals.
From their view of the product form, outside brands are restricted from editing the product's basic information, pricing, inventory, and the programs authorized to sell it under the brand.
Final Workflow for Admin
Creating and Editing Products within the Shop Manager
The product form has four states based on whether the product is new or being edited, and if it’s owned internally or by an outside brand.
Detailing the specific fields shown for each of these states allowed developers to code the form with minimal ambiguity.
The new product creation process guides admin in creating a well defined, engaging product. Collecting and validating this info will ensure the product is effectively displayed in the backend shop manager and frontend storefront.
1
Creating a New Product Within Your Brand
Admin is guided step by step through creating their new product
2
Editing a Product Owned by Your Brand
All info can be edited after initial creation except product category
3
Editing a 3rd Party Product Owned By An Outside Brand
Certain info is set by the owner brand and cannot be edited by outside brands
3 Admin Shop Manager
Analyzing the Current State Shop Manager
The shop manager allows admin to view their library of products. Each row represents a product, showcasing key info and actions related to a product and its sales.
Products are grouped by category, as each product is representing a variant of the category. To prepare for the introduction of product options, this grouped list format would be flattened to a standard product list.
The shop manager feels overwhelming as it showcases all products across every program within a brand. As the amount of products in PlayerFirst rises, it becomes more important to provide a convenient way of filtering by program.
Current State Shop Manager
Step 1
Shop Manager for All Products in Brand
Showcases products in scrollable table format. The header is not descriptive of the shop manager's purpose.
Step 2
Product Order History
A separate page to view orders for a single product, accessed via product actions on the main shop manager page.
Investigating Shop Managers in Competitor Softwares
Next, I returned to Squarespace and Shopify to investigate their shop managers.
Both platforms list each product in a concise table, with the data shown determined by the tab the admin is on.
Quicker tab-based filtering in PlayerFirst would reduce the number of products an admin is scanning at one time.
Lastly, Squarespace provides convenient insights that would help inform admin in PlayerFirst about the state of their product sales
Squarespace Shop Manager
Squarespace organizes products by category via tabs. Products within each tab are organized into a succinct table. Certain key info can be modified within the table.
Shopify Shop Manager
Shopify organizes products by its visibility via tabs. Products are shown in a succinct table, similarly to Squarespace. Table denotes the channels the product is being sold in.
Iterating on Shop Manager
Inspired by this competitive analysis, I began iterating through the shop manager more heavily once product creation was near stakeholder approval.
Final Workflow for Admin
Organizing Products within the Shop Manager
The final shop manager provides the admin with quick access to explore products by program or across the entire brand.
The Brand Shop Manager showcases products from across the entire brand. However, a single program's products can be isolated through the Program Shops tab, which acts as the landing page. These different vantage points allow admin to focus in on products at the brand or program level quickly and intuitively.
With this first step towards modernizing PlayerFirst's digital marketplace, I also setup the shop manager to handle variants in the future by no longer grouping products by category within the shop manager. This and other issues, like the number of columns shown in each product table, would be resolved later.
1
Brand Shop Manager
Manage products across the entire brand
2
Program Shop Manager
Manage products from a single program
3
Product Order History
View all orders for a single product
4 Customer Purchasing Experience
Analyzing the Current State Purchasing Experience
PlayerFirst's frontend didn't have a central storefront. Instead, products are organized into separate pages by category, accessible via the nav bar. This setup stems from the platform's product variant workaround, where products are treated as variants of the category.
Parents must click into each of these categorical product pages via the navigation bar, creating a disjointed shopping experience.
During this project, another UX team was separately redesigning the frontend's checkout process. Since my work on this last part of the project involved the same frontend space, clear communication and design alignment were crucial for success.
Current Purchasing Experience
Step 1
Select A Category from the Navigation
Products can only be viewed by a single category within the frontend.
Step 2
Select from the Product Options in the Category
Information about the product variants comes before selecting the products you want to purchase. This goes against industry standards as parents have to scroll first to purchase the product.
Investigating Purchasing Experience in Competitor Softwares
To learn about how other sites funnel parents towards their desired products, I investigated Dicks and Fanatics. These are leading online retailers in the athletic space.
I discovered that in order to guide parents towards the rights set of products, both sites encourage customers to select what they are looking for via a series of increasingly more specific product groupings.
PlayerFirst needs to help customers find products by guiding them to select the product category and specific program they’re interested in.
Dicks Purchasing Experience
Dicks funnels customers towards a specific product category (Ex: Women's > Clothing > Shirts & Tops").
Fanatics Purchasing Experience
Fanatics funnel customers towards a specific brand within a league (Ex: NFL > Eagles>).
Inspired by this competitive analysis, I began iterating through the shop manager more heavily once product creation was near stakeholder approval. The final design needed to provide the ability to filter effectively while minimizing development work. Since the platform is behind on mobile optimization, I needed to create designs that could be easily adapted for mobile.
Storefront Iterations
Product Page Iterations
Final Workflow for Parents
Customer Purchasing Experience
Introducing a central shop to PlayerFirst's front end provides a more fluid and enjoyable shopping experience. Rather than having to explore categories of products on separate pages, everything a parent needs is in one place. Parents can only explore products by program to match the front end's current setup and reduce development for now.
Product pages will now be a space to read more about a product, which is especially important for products like parking that require logistical info. From this new page, customers can select the quantity, and product variants in a future release, before adding the product to cart.
The overall project aims to match the product discoverability found on competitor platforms.
1
Storefront
Customers see all products by default and can filter by program and category
2
Product Page
Learn more about the product and add to cart
5 Feedback & Next Steps
Confirming the Solution with Athletic Organizations
The tight time constraints and wide scope of the project prevented the UX team from imagining the designs in high fidelity. However, working in medium fidelity allowed the team to rapidly iterate, producing a digital marketplace with their most requested features.
Working closely with product stakeholders, who served as intermediaries between the UX team and athletic organizations, was crucial for aligning our designs with user needs.
To continue to encourage athletic organizations to adopt PlayerFirst as their digital marketplace platform, PlayerFirst moved quickly to develop this first release. Future releases would continue to modernize the platform to increase the commerce done within PlayerFirst.
"This upgrade will bring my product sales back to the platform I count on for everything else in my organization. Can't wait to stop paying to sell my products on another website."
"I feel more in control of my brand's products with the new instructions and overall form format of the improved product creation process."
“I am excited to be able to share products across program shops and even with outside brands. This is going to reduce so much of the duplication that currently exists within the system."
" I can finally send my parents to a single marketplace page where they can easily find everything they need. These improvements bring PlayerFirst in line with other platforms.
