E-Commerce & Retail | 2021

What is GoPuff?

GoPuff is an American consumer goods and food delivery company headquartered in Philadelphia.

Operating in over 650 US cities through approximately 500 micro fulfillment centres as of October 2021.

Challenge

Client had to improve on their design system, moving away from it’s 9 year old design library. Having expanded their business throughout 2020, there was a special attention needed in creating guidelines and documentation to ensure scalability; given the business need to also bring in more design teams that would leverage these components to fulfill more user journeys.

Together we needed to:

Migrate their library to an independent Figma file.
Ensure that components were updated throughout their multiple flows.
Coordinate element alterations with key stakeholders up to director level.
Ensure that new team members would be able to understand and adapt to their design framework.

Overview

Project Outcomes

40% Reduction in Designer on-boarding time.
70% improvement in communication with engineers.
Improved and scalable design and information system.

Role

Intermediate UX Designer

Timeline

2021-2022

Industry

Retail

What

Design System Library Improvements

Who is our user? How did it help? And how we got there?

Designing for a B2B environment means improving processes, identifying friction points and improving situations for everyone. For this project, our main design goal was to design for designers, improve ramp-up time and improve overall story success by reducing time spent on revisions and corrections, while improving story success rates.

Its value would not only improve the rate at which designers were able to conduct their work, but also better the work atmosphere, and ensure that designers would be set for success from the onset of a ticket, rather than after revisions which also improved team retention.

One additional factor of complexity was working with Front-End Leads, which ensured that our project was both addressing areas of concern, and being rolled out properly onto Storybook.js

Solution

Discovery:
Throughout the scoping phase I had the opportunity to explore the client files in coordination with their team. And we were able to identify that their problem had two parts. Structural and informational.

Structural:
When working with such a robust system it’s important to be mindful of the time it takes to implement change and how one can change that. Therefore we chose to leverage an atomic design structure. Ensuring that change would occur seamlessly.

Informational:
Components were rearranged and thoroughly documented. Including:
Definition
Complexity level
Variations
Limitations
Use cases
Responsible parties
The last one being kept in for contact and clarification if necessary.

Hand-off:
Towards the end of the project we maintained close relations with the stakeholders, on both engineering and design side. Thus ensuring that the system was being maintained and used in the creation of new components and that there would be no issues with components created prior to our engagement.

Mobile

Desktop

Outcome

Upon conclusion of this engagement, the team at GoPuff had optimized files and a design system that was easy to use and maintain.

Throughout our engagement, we were able to not only deliver a quality product in these design system and processes changes, but also ensure that more team members would be set out for success when starting their journey with the company. With that we saw:

A reduction of average time spent on-boarding designers onto the system from 5 to 3 days.
A reduction in load times for computers accessing their files.
A 72% reduction in tickets regarding clarification of how to use components throughout user flows.