Dot Foods Commerce Design System

Role: Design Director, Project Lead, strategist

Responsibilities: Client management, stakeholder interviews, discovery readout, workshop planning & execution, experience & creative direction, competitive & adjacent industry research, design system strategy

The Challenge:

The food redistribution business is an enormous industry no one knows about. Dot Foods is the giant in their field, but they don’t waste time worrying about traditional competitors. They worry about Amazon’s customer experience and want to address it before Amazon enters their turf. It won’t happen with a system that launched and haven’t been updated much since 1997 (no, that’s not a typo.)

The Process:

With a deep upfront user research phase several themes emerged, grounding us as we headed into stakeholder interviews, competitive analysis, adjacent industry research, component inventory, and content assessment:

1. Privacy is a small price to pay for convenience.

2. Patrons and plates overrule nearly every decision.

3. Inventory pains are soothed with clarity, but solved with transparency.

4. Users want data quality over quantity—but until then, they’ll settle for even more data.

5. More media shouldn't mean more work for Dot.

6. Users have trust issues.

7. Users are inundated with routine and bureaucratic burdens.

8. Unheralded Victories: what good are features you want if you can't find them?
   

Final Themes:

Final Insights:

(Click to enlarge final insights below)

As part of our iterative design approach, we audited the check out process of the current Expressway. Turns out no one had disabled the actual order system, so color us surprised when 20 lbs of frozen guacamole showed up at our offices. But as the old adage goes:

When life gives you frozen guac, make a hot party.

But it wasn’t all chips and margaritas. First up, giving this half a billion accidental golden child the digital brand it deserved, starting with Style Tiles.

Style Tiles

With a small core team working iteratively we were able to quickly solve Dot Foods’ most complex use cases, ask burning questions, make decisions and move on. Just as important, the transparent working style built implicit trust with our client.

Quickly aligning on a digital brand direction we were on to sketching, tearing things up, starting over, sketching some more: starting to define the foundation of our design system.

While our process aimed to do as much as possible in sketch format to avoid holding rigid ideas too strongly, more complex flows like check out and search required wireframes to make sure requirements were captured and accounted for.

(Click to enlarge sample wireframes below)

Documenting components and patterns as we moved through our sprints, we also documented Dots internal processes to aid in compiling targeted governance documents to ensure the Expressway wouldn’t go rogue in the future.

Our final design system deliverable included:

1. Governance Documentation

2. Design Principles

3. Styles

4. Grid

5. Components

6. Layouts.

Governance Documentation:

Design Principles:

Styles & Grid:

Components:

Layouts:

How we solved it:

• Customer Interviews

• Digital Strategy

• Competitive and Adjacent Research

• Stakeholder Interviews

• Content Strategy & Creation/Priority Guides

• Visual Design

• XD

Outcomes: