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.
Wireframing
Prototyping
Interaction Design
Design System
UX Quality Assurance
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
In addition to some global parameters like page background settings and link and accent colors, admins can add and configure multiple different content blocks.
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.
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.
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.
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.
If you have a project that fits our niche, we’d love to chat and see how we can help.