The best team you'll ever meet.
Lily Bather
UX Designer
FRESH
A Design System by 7-Eleven
The beginning
When I joined 7-Eleven in 2017, it was a team of 8 UX designers and Researchers. Before I knew it, that small team had become an army of 30 people. Interaction designers, Visual designers, UX Architects, and UX researchers, it was an amazingly talented group of people.
As our team started growing and expanded throughout the organization, and as we had the need to start designing new things fast, we faced the problem of having to scale our process tools and design language.
We soon identified the need to have a Design System. I was put in charge of leading this project.
The need was to standardize our design approach and come up with a source of truth master guideline to guide all-new design efforts.
We held a kick-off meeting
We invited people from different departments and presented our vision and intent.
My Role
As the lead and main point of contact for this project, my role consisted of organizing the priorities and socialize the progress of the design system as well as holding regular working sessions to make progress on Fresh.
The Team
The team was organized in three layers depending on their roles and responsibilities.
1. Approvers: admins and decision-makers.
2. Core team: contributors to the system
3. Extended team: Can suggest edits and additions
4. Informed team: would receive periodic updates about Fresh.
The Audit
As part of our discovery phase, we first had to tale a look at what existed already. Historically 7-Eleven had always outsourced their design projects and the outcome was a fractured visual style as well as a variety of very different styles and libraries that became difficult to maintain.
The first thing we did was to audit the existing digital and physical products.
We gathered screenshots, files, posters and old guidelines and we met to discuss what was found, to decide how we needed to proceed.
Across the different digital products we found:
- 180+ font variations
- 30+ color variations
- 15+ color variations
We used inVision boards to collect existing brand guidelines.
Existing Guidelines Audit
As anyone could imagine, a 100-year-old company, had various different style guides. So many of them!
What we found in our audit a total of 9 different style guides.
We used physical foam boards to group and annotate our observations.
The Discovery Phase
As part of the discovery phase, we met weekly to collect and compare every design element we found.
By having this as printed materials to refer to, also helped socialize the Fresh team efforts and progress.
Why FRESH?
Give it a name
One of the first tasks was to give the Design System a name.
We decided on the name FRESH. The word FRESH reflects the vision of what we wanted the design system to be.
Fresh means COOL
Fresh means RELEVANT
Fresh means NEW
Fresh means it's UP TO DATE
We like to keep things Fresh.
Fresh is relevant, up to date and quality.
A breath of fresh air.
This PDF was our MVP
Fresh MVP
Our biggest priority at the time was to have something ready, as simple as possible, to achieve this we came up with our Minimum Viable Product for Fresh.
Which was comprised by:
- 7-Eleven logos
- Brand colors
- Primary color palette
- Gradients
- Buttons, input fields
- Basic shopping cart components
- Icon library specifications
- Cards
- Typography
Our MVP was a PDF that we socialized and collected feedback from, this would officially inaugurated Fresh as 7-Eleven's Design System.
Collaboration and Contribution
During the early stages of Fresh and in general across all design efforts, we always encouraged feedback and collaboration from our Marketing, Tech and Product partners. Which allowed us to move faster and get buy-in about Fresh.
Fresh V1
We met as a team every Friday for an hour-long working session in which we would discuss the next steps, strategize about how to socialize it, contribute and make progress on the library.
My role as a leader was to facilitate these meetings and follow up with individual tasks.
Image by November Five. Source: Dribbble.
Abstract
Early in the project we researched and evaluated different tools to host our Design System. We looked into InVision DSM, UXPin, and for a while, we even relied on our Digital Drive.
Ultimately we collectively made the decision to use Abstract as the tool to maintain, share and link Fresh to all our projects.
By setting up rules of engagement, best practices and training the team into how to use Fresh, our collaboration process was improved, also it opened up Fresh for collaboration.
Governance
To make additions to the library, we set up a governance model in which UX Team leads would be the channel and main contributors to Fresh.
"Fresh is cool, you cannot get any cooler than being Fresh"
30+
Designers using Fresh
11+
Digital Products Supported
5
Iterations before V1