The best team you'll ever meet.
A Design System by 7-Eleven
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.
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 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.
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
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.
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.
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.
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
- Buttons, input fields
- Basic shopping cart components
- Icon library specifications
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.
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.
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.
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.