Homefield

A back-office web application that helps manage and support the entire e-commerce order fulfillment process of an online custom sports apparel store.

Client
Industry
Duration

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.

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.

SquadLocker production facilities

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 design system

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.

Homefield modules

Locker Manager

Quote

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.

Aoja Cashman

UX Director, SquadLocker

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

Order details components

Order actions

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 actions

Order item

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 items
Order financial details

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.

Put-to-Light 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 hardware devices to connect the process with Homefield.

Order collection wall

Employees use wall racks with labeled bins to collect components for each order. This system relied entirely on the human factor. It involved a lot of manual checking, good memory, and attention to detail.

Order assembly wall
PTL hardware device

PTL Hardware devices

Each row on the physical wall rack is assigned a Bluetooth device with a display and an RGB light, while each column is assigned a specific color.

Scanning a barcode on an order item will light up the device in a specific row with a specific color helping employees pick more orders in less time and with fewer errors.

Creating a digital PTL wall

Using the Put-to-Light module in Homefield, 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 set up and use multiple such walls.

Creating new PTL wall

Put-to-light assembly

The 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.

Digital PTL wall
Quote

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!

Product Manager, SquadLocker

Landing Page Builder

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 can 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 segments

In addition to some global parameters like page background settings and link and accent colors, admins can add and configure multiple different content blocks.

Landing page segments
Landing page featured stores segment

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.

Landing page store slider segment

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.

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.

Organization landing page preview
Quote

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.

Aoja Cashman

UX Director, SquadLocker

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.

Schedule a Meeting