HOMEFIELD
Client
SQUADLOCKER
Timeline
4+ Years
Service
UX DESIGN
HOMEFIELD
overview
ABOUT PROJECT
Homefield is a web application used by SquadLocker employees to manage various aspects of their custom sports apparel business and to support customers during order fulfillment.
We helped our client shape the user experience of their powerful internal control panel. We have created consistent UI patterns from scratch, lowered the learning curve, and increased productivity.
There are many moving parts in the order fulfillment process. In this case study, we will be focusing on some modules that we're especially proud of:
- The Locker Manager - Everything in SquadLocker revolves around Lockers and their associated graphics and available products.
- Order Management - One of the most used modules in Homefield, it gives admins an overview and complete control of each order and all its items.
- Put-to-Light Wall - An exciting combination of software and Bluetooth hardware devices to bridge the gap between digital and physical fulfillment.
- Organization Landing Page Builder - Organizations using SquadLocker can build custom, publically available landing pages highlighting their products.
LIBRARY
Homefield design system
Like any extensive design system, we've refactored the Homefield Design System multiple times as design tools and software evolved. We're incredibly proud of the table components, which we've built to be super-efficient, allowing us to construct any table in minutes - no matter how complex.
In-house
Squadlocker’s production facilities
SquadLocker currently offers embroidery, heat-applied graphics, and direct-to-garment printing methods for personalizing products.
All apparel is sourced from quality partners such as Adidas, Under Armour, and Nike. Ultimately, with record order fulfillment times, SquadLocker is a leader in the industry playing field.
MODULES
Homefield modules
The Homefield home screen is the central hub of administration modules. Employees have access to screens equivalent to their responsibilities. Not all modules are used at the same frequency. This case study will showcase some of the most frequently used ones.
LOCKER
MANAGER
How to Build Merch
Lockers are the main building blocks of SquadLocker. Admin users set them up for their sports teams as a bundle of products, product collections, logo graphics, rosters, roster members, and voucher orders.
SquadLocker also supports organizations, which means multiple lockers can be part of the same organization - e.g., a school. This hierarchy makes managing complex structures straightforward and efficient.
SOME
MODULES
Order Management
Supporting customers by viewing or editing their orders is an essential and most frequently used hub of the Homefield app. Specific orders can be located quickly by numerous parameters, not just the Order ID.
The order details page consists of two parts. One-third of the page displays essential order information, such as order date and shipping information. The rest shows all products and quantities plus personalization components.
ORDER ITEM: META DATA
Each order item on the order details page has metadata describing various attributes associated with the item. These attributes include quantity, size, color, price paid, fundraising raised, if the item is required, if a vendor fulfills it, and many more.
PTL WALL
Digitalizing a PTL Wall
One of the more challenging tasks when fulfilling SquadLocker orders is ensuring all components from an order end up in the same place and are appropriately labeled.
We've worked with the product and development teams to help improve this process by using Put-to-Light (PTL) hardware devices to connect the process with Homefield.
GETTING TO KNOW THE ORDER COLLECTION WALL
Employees used wall racks with labeled bins to collect components for each order. This system relied entirely on the human factor. This process involved a lot of manual checking, good memory, and attention to detail. It wasn’t bad, but it was missing a connection to their digital platform.
ADDING PTL HARDWARE DEVICES
The first step was to digitize the wall. Each row on the physical wall rack was assigned a PTL device - a Bluetooth device with a display and an RGB light. Each column was assigned a specific color.
The result: Scanning a barcode on an order item will light up the device in a specific row with a specific color and help employees pick more orders in less time and with fewer errors.
LET'S CREATE
CREATING A DIGITAL PTL WALL
The idea was to use the same PTL module in the Homefield app. Admins can set up a digital representation of the physical wall rack, assign colors to columns and connect the PTL devices by ID. In the production facility, employees would set up and use multiple such walls.
assembly
Put-to-light assembly: A digital PTL wall
Our digital representation of a physical wall looks very familiar. Bluetooth PTL devices map rows, and colors map columns. Order bins are assigned to empty slots, and the picking procedure can be done by scanning order items with a barcode scanner.
BUILD PAGE
Landing Page Builder Prototype
In this initiative, we wanted to give organizations a powerful tool and offer them the ability to expose their stores publicly. For the first phase of this feature, only Homefield admins will be able to build custom landing pages for organizations.
Organization landing pages serve as a sort of marketing hubs. They allow admins to showcase products from multiple lockers within an organization.
ADDING CONTENT BLOCKS
In addition to some global parameters like page background settings and link and accent colors, admins can add and configure multiple different content blocks.
FEATURED STORES BLOCK
One of the main blocks is showcasing up to four featured stores. Admins can search through an organization's lockers and select which four lockers they want to highlight.
FEATURED
STORES
STORE SLIDER BLOCK
Another essential content block is a more complex version of the "Featured stores" block. The store slider allows admins to spotlight multiple stores grouped within custom categories such as sports or leagues.
Responsive
Responsive landing page preview
Content blocks are automatically responsive by default, so landing pages are perfectly laid out on smaller devices such as tablets or smartphones.
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together
·
Let's work together