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.
Working with external developers, key stake holders and our in-house team of two designers.
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.
· Implementing a Design System
Creating and implementing a design system with new components.
· 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
