Enterprise data content design

H-E-B Digital

Humanizing warehousing data
COBOL -> web app

Overview

H-E-B is an established regional brand that has been in business for more than 100 years.

As part of a graduate internship, I joined the team that was designing a new web-based application to replace an aging mainframe app that cost $14M/year to maintain. The COBOL app was fast, but not optimized for user experience. Users often had to manually page through several screens to complete one task.

Our goal was to design experiences that better reflected user needs and workflows. I worked primarily on designs for warehouse partners (all employees were called "partners").


What I did

  • Conducted generative research to understand the problem space and the partners who operate in the warehouse space

  • Designed UI workflows consisting of interactive data and content experiences based on user insights

  • Conducted evaluative testing of prototypes

Impacts

$14M/yr
Money that will be saved when they retire the mainframe app


30
The number of screens reduced from some workflows


Decreased time on task
Increased time to work on other warehouse goals


Decreased environmental footprint & operating costs
Reduced the need to print


Where we started:

Screenshot of content from the previous website. Describes the company's mission.
Screenshot of content from the previous website. Describes a type of hearing test. Includes a stock photo of two humans participating in a hearing test.
Screenshot of the previous website home page. Blue, white, orange with a city skyline.

Where we ended up:

Screenshot of the new home page on a laptop screen. Photo of a woman. Blue, dark blue, and white color palette.
An image of the Our Mission page from the new website design. Two women pictured.
Illustration showing where in the body hearing loss can occur

"Hivemind is much better [than the mainframe app] – cleaner, easier to navigate, don’t have to sign in as many times, no longer outdated, filters allow you to pinpoint what you’re looking for -- all information is right here."

-- User during prototype testing


Case study



01.

Humanizing the supply chain data experience was about making sense of complexity and embracing chaos (i.e., trusting users).

Localized behaviors made it challenging to uncover the fundamental problems we were solving.

Humanizing complexity
OpenClose
Understanding physical space
OpenClose
Understanding warehouse rhythms
OpenClose
What were the fundamental issues?
OpenClose

02.

Warehouse users operate collectively to achieve facility goals, blurring the lines between job title and job function.

How do you design for collective interaction?

Users
OpenClose
Archetypes
OpenClose
Journeys
OpenClose
Understanding users through their goals, workflows, and decisions

03.

To design content for supply chain, one first has to learn the language.

Once you understand the language, you can understand and design for users' mental models.

Content research
OpenClose
Data from users' POV
OpenClose
Supporting users' decisions
OpenClose
Designing for the way users work
OpenClose
Understanding how users talked and thought about data they used
Designing layouts that surfaced the data users needed to support their decisions
Designing interactive features that match users' observed work styles

04.

For the system to work, the parts need to communicate effectively.

We designed state machines, tool tips, system feedback messages, training and onboarding to enhance the user experience.

State machines
OpenClose
Tool tips
OpenClose
System messages
OpenClose
Onboarding
OpenClose

State machines

This state machine informed a UI tracker component to communicate order status.

Tool tips

Getting this tool tip wrong would have turned into extra work, delays, and frustration for our users. It would also cost the company money.

A "Ti x Hi" describes the size and configuration of a pallet, and it varies from warehouse to warehouse. It's important for users to know which warehouse's Ti x Hi is being shown.

System messages

Sometimes a "simple" system message isn't so simple. The UX writing could be improved here, but the technical details are also important to the user. This was a rare error, but users would need this context to workaround it if they encountered it.

Onboarding

This was a major change from the COBOL-based UI that users had been using, so it was important to have an on-demand tutorial that could walk them through the key features of the new experience. There are changes I would make now...but all of the content is based on research about which aspects are important or confusing to users.


05.

Testing helped us refine our designs and move the organization forward.

Prototype testing

After delays due to the first wave of covid, we were finally able conduct some prototype testing.

We were able to apply our understanding of user workflows to create a task analysis exercise with our interactice prototype (in Figma).

The results of these tests were encouraging, and led to minor refinements.

Design system

In a separate project, I also conducted baseline generative testing for a design system. At this stage, we were exploring needs, perceptions, and expectations. I also did some message testing.

Methods used: interviews, highlighter test, manual sentiment analysis, adapted fill-in-the-blank test

Keep the conversation going: