Homefield
We helped digitize the whole e-commerce back-office order fulfillment process of an online custom sports apparel store. The final product is an end-to-end web application that helps to manage and support their processes.
Our role
Wireframing
Prototyping
Interaction Design
Design System
UX Quality Assurance
Project overview
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.
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.
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.
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.
It’s their dedication to the process and the effort they put into getting it right is what I find most impressive about McKnight Media. They’re willing to iterate and revise what’s necessary to deliver the best quality. Also, their design capabilities and UX knowledge are outstanding.
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 details: Components
Order actions dropdown
Admins can manually override most aspects of an order. One of the most recent options includes "Mark as Shipped..." status for cases where integration with a 3rd party system fails and order status needs to be updated manually.
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.
Order financial details
Finance can be mind-boggling. We've helped admins by enabling them to quickly view the price breakdown for each order in Order Management by simply clicking on the total price.
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.
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.
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.
The McKnight Media team has been eager and flexible throughout our time working together. When working on a design, they are exceptionally receptive to input from product, engineering, and end users. They have a knack for taking an idea, iterating on it, and coming back with something better than we expected.
The best part of working with them has been their positivity, energy, and seamless fit into our project teams. We have been lucky to call McKnight Media partners!
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.
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.
Builder prototype
Building an organization's landing page is a smooth process. Users quickly add content blocks and customize their parameters through modals. They can edit, reorder or remove Blocks at any moment. The updates are visible without the need to publish the changes explicitly.
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.
McKnight Media will be invested in your company’s success. They’ll take time to understand your business and design digital products and UX that’ll meet your users’ needs. Moreover, their team will rise until they get it right.
Ready to Discuss Your Project?
If you have a project that fits our niche, we’d love to chat and see how we can help.