Design
Branding

Lola's Cupcakes

Lola's Cupcakes

Redesigning the Nations favourite Cupcake brand

Client
Lola's Cupcakes
Completed
2018
Timeframe
12 Months

Project Overview

Project Overview

Project Overview

As the Lola’s Cupcakes brand grew, it became increasingly important to maintain a consistent style and visual language across all areas of the brand. Selling over 100,000 Cupcakes and over 5,000 cakes per week, it was clear that we needed to implement systematic ways to guide and leverage our collective efforts. The branding at the time, was outdated and lacked the fun element which Lola’s Cupcakes wanted to bring in, the website also was outdated and lacked user friendliness which was affecting the conversion rating.

The initial outcome, was to produce a sleek rebrand and create a new website to match. I created a collection of reusable components, which were guided by clear standards, that can be assembled together to quickly build any number of consistent experiences.

Role & Team
Role & Team

Working with external developers, key stake holders and our in-house team of two designers.

My Role

Senior Product Designer

My Responsibility

As Senior Product Designer, I led the full design process from discovery to high-fidelity UI, ensuring a user-centered experience aligned with Circle K's business goals. I collaborated with stakeholders and managed a third-party development team to ensure accurate implementation and alignment with the project vision, while coordinating across teams to meet key milestones.
dummy
Circle K
lola'slola'slola's

The Problem

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.

Circle K

The Solution

The solution was a unified, global app that seamlessly integrated all of Circle K’s services into one cohesive platform. This new app combined features such as in-store deals, gas station memberships, car wash services, and mobile payments, providing a streamlined and consistent user experience across all regions. We developed a comprehensive design system to ensure uniformity in visual design, interaction patterns, and branding, replacing the fragmented approach of their previous standalone apps. The app was built to be fully responsive, with a user-friendly interface and intuitive navigation, making it easy for customers to access all services from a single point. By working closely with stakeholders and managing the third-party development team, we ensured that the app was not only visually cohesive but also functional and scalable, setting a new standard for Circle K's digital presence.
dummy

Keeping everything consistent

From football stadiums to high street energy hubs – the Utilita brand is everywhere, and it’s highly recognisable and widely trusted. Keeping everything consistent across their digital experiences – join journeys, websites, mobile apps –  is vital in ensuring users know exactly who they’re dealing with, and get the experience they expect.
Circle K
dummy

Agile Methodology

We worked in agile sprints, breaking the project into two-week cycles to prioritise tasks and align with the product roadmap. In each sprint, I collaborated with product managers, developers, and stakeholders to deliver wireframes, prototypes, and UI components iteratively, adjusting designs based on feedback and user testing insights.

Regular sprint reviews and retrospectives enabled continuous improvement, while daily stand-ups and sprint demos with the third-party development team ensured smooth collaboration and alignment. This agile approach allowed us to stay flexible, maintain high design quality, and meet key milestones efficiently.
James was instrumental in transforming our digital experience at Circle K. As Senior Product Designer, he took full ownership of the design process, creating a cohesive, user-friendly app that aligned perfectly with our brand. His ability to balance stakeholder needs while delivering an exceptional user experience was key to the project’s success. We couldn’t have achieved this without his expertise and dedication.
Circle K
user image
Karn Gulati
Strategy Director

The Problem

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.

Our initial discovery from customer research

1.4%

Successfully placed
an order online.

64.7%

Of users said the website
could be improved.

24%

Of users left the website
within 3 seconds.

The Solution

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.

Lola's UI

PHASE 1

Implementing a Design System

Audit the existing product

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.

Defining the design language

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.

Building a pattern library of common design elements

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.

Document Guidelines

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.

Lola's Color Palletetypo
lola's form typo

The key steps to the design phase of the project:

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

Component Audit

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.

Design Phase

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.

Review & Documentation

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

Coursera

Example of the Drawer components documentation

Coursera

PHASE 2

Website Overhaul

Five Key Steps of the project:

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

lola's weblola's weblola's

<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>

See More Projects

See More Projects

Have projects in mind?

Let’s work together

I'm James Granger— a designer who works with startups looking to push creative boundaries