Circle K, a global gas station and convenience store chain with over 15,000 locations worldwide—10,000 of which are in North America—approached us to redesign and consolidate their customer-facing digital experience. As the Senior Product Designer at a US-based design agency, I was the primary designer on the project, leading the effort full-time over the course of a year. My role was to own the design process end-to-end, delivering a world-class user experience for their new global app. This included developing a cohesive design system that unified the brand's digital presence across various services and platforms.
My role involved taking full ownership of the design strategy, ensuring that we delivered a world-class user experience by consolidating all services into a single, unified global app. This also included creating a comprehensive design system that would harmonize Circle K’s digital presence across different platforms and regions. By focusing on consistency, usability, and scalability, I helped ensure the app was both user-friendly and aligned with Circle K’s business goals, setting a new standard for their digital ecosystem.
Working with external developers, key stake holders and our in-house team of two designers.
Circle K had previously developed multiple standalone apps for different services—one for in-store deals, another for gas station memberships, and yet another for car wash services, among others. These apps not only provided a fragmented and inconsistent user experience but also suffered from poor ratings, each scoring below two stars in the App Store. The lack of a unified design system resulted in disjointed patterns and brand inconsistency. The challenge was to consolidate all these services into a single, seamless global app that would offer a superior user experience while introducing additional features, streamlining customer interactions across regions.
The branding and website was designed in 2006, although they had a classic bakery look the brand was feeling very outdated, the current website UX was also affecting sales. I set out to do in-depth analysis and research on the customer journeys online, the conversion rate was low. one of the primary issues we faced, was allowing the customer to create a box of cupcakes using the ‘cupcake builder’. The in depth customisation of this page allowed the customer to decide on the following; if they want regular or mini cupcakes, how many cupcake boxes they want to fill, how they would like their boxes to be packed and finally to make this process as clear as possible.
Successfully placed
an order online.
Of users said the website
could be improved.
Of users left the website
within 3 seconds.
1) Implementing a Design System
Creating and implementing a design system with new components.
2) Website overhaul
Redesigning the entire website from the ground up, carrying out user research, wireframing and producing a new UI for the brands digital presence.
PHASE 1
We went through our existing product and reviewed all of it’s various front-end design elements. From there, I built a catalog of UI components and visual elements that will form the foundation of the Design System. This allowed me to identify any inconsistencies that may have emerged and make the appropriate design decisions in the webstie redesign.
We established clear principles about how we thought about our product and brand working in the digital realm. We facilitated workshops surrounding how we wanted our customers to feel when they were interacting with our brand online. We wanted the UI to represent that of a celebration, something which a large share of our customers were doing while enjoying our products. We implemented this fun, celebration style UI within the components. I started off by creating the fundamental elements of our design system such as the colour palette, typography, iconography and imagery.
Once the fundamental elements had been created, I started creating the rest of the components needed for our library whilst paying close attention to the UI visual branding we wanted to implement. While building the components, I ensured they worked responsively across desktop and mobile screens.
Every component then received documented guidelines, this allowed our small design team to maintain a consistent system whilst redesigning the website. The key points which was included in the documentation included; when and why each component is used, how the component works across multiple breakpoints, the do’s and don’ts of using the component alongside clear guidelines and recommendations to allow the team to work more quickly and efficiently.
Component Audit
Audit the current components used throughout Courera’s products and
document the user-cases.
01
Design Phase
Using the documented components
and use-cases, start designing for the components deliverables.
02
Review and Documentation
Review finished design, and create a document for the engineering team to implement
03
At the start of the project, I identified all of the current components which are used across Coursera’s platforms and documented them on Storybook for us all to refer to and use as our documentation briefing. Each component was then rigorously audited to enable us to understand the limitations and rules which need to be applied to their redesign. Once we had identified all of the components needed to be recreated and these are all documented we can now start redesigning each component and rigorously testing them across multiple breakpoints. The components are shared out between the designers and we focus on one component at a time until finished.
First things first... Accessibility!
Before we could redesign the components and begin to build how they work - cross platform. The first piece of the jigsaw was to agree with the intertnal stakeholders what level of accessibility our system should hit for our users. With Coursera being used by millions of users online, we wanted to deliver a design system which everybody could use and settled to hit a minimum AA WCAG complient system. This allowed us to implement Coursera’s brand system within the design system without being tied too much to AAA complient standards.
The design phase started with the deliverables of the design systems fundamentals which included, colour system, the typography and the grid system. These were the core atomic elements which would pave the way for the rest of the components to follow in a fashionable suite. Coursera had recently undergone a rebrand and we worked closely with the branding team to implement the new rebrand within the design system.
Once the designs have been thoroughly tested and working across multiple scenarios and breakpoints, it is time to write up the component documentation. The documentation is published onto a shared space for all verticles to evaluate and discuss as a team. Ensuring all design verticles are aligned and part of the process at this point is very important so that no scenarios are missed
Example of the drawer components specifications and variants
Example of the Drawer components documentation
PHASE 2
Reviewed and
analysed the
current website
01
Creating a new digital UI system matching the new rebrand
02
Created wireframe concepts for the new website UX
03
Created a design system using renewable components
04
Implementing the design system to the approved wireframe designs
05
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FG7HQs5fkFuisOu8rwrU4H4%2FLola's-Desktop-Prototype%3Fpage-id%3D0%253A1%26node-id%3D1%253A137%26viewport%3D487%252C391%252C0.03%26scaling%3Dmin-zoom%26starting-point-node-id%3D1%253A137" allowfullscreen></iframe>
I'm James Granger— a designer who works with startups looking to push creative boundaries
