Babylon Pac Case Study

Reinventing Babylon Pac through conversion-centric design thinking and sustainable brand alignment

Client: Babylon Pac

Year: 2023

Duration: 6 weeks

Responsibilites
User Research
CRO Audit
Branding Workshop
Brand Design
Wireframes
Prototypes
Responsive Web Design
Style guide

Babylon Pac is a sustainable food packaging company that is committed to providing environmentally-friendly and ethical packaging solutions.

The company offers a range of packaging options, including hot and cold cups and take-out containers, to meet specific needs. By choosing Babylon Pac, customers can be confident that they are making a responsible choice for the planet.

The challenge

Users have difficulty understanding and engaging with the brand message of Babylon Pac, due to a disconnect between the website’s visual identity and its focus on providing sustainable packaging solutions.

Furthermore, the e-commerce aspect of the website was underperforming, with low conversion rates indicating that users were struggling to navigate the purchasing process.

User sentiment

01 Brand message isn’t clear

02 Website is hard to navigate

03 Brand and website UI look outdated

The solution

To solve the above challenge, I executed a rebranding and website redesign to better reflect Babylon Pac’s sustainable values, while refining the e-commerce process to enhance user experience, increase engagement, and ultimately boost conversion rates for the company.

Addressing user needs

01 Brand overhaul

02 Streamlined the e-commerce process

03 Responsive modern UI design

Old Branding & Website Design

New Branding & Website Design

Design process

Throughout this project, I adhered to the Double Diamond Design Process, incorporating distinct phases of Discover, Define, Develop, and Deliver to ensure a thorough, user-centered approach to Babylon Pac’s rebranding and redesign journey.

Brand perception survey

To gain insights into Babylon Pac’s brand perception, I conducted a survey that explored public sentiment towards the business and its current branding, revealing valuable information to inform the redesign process.

87 survey responses collected on

Desired outcomes

Identify areas for improvement based on customer perceptions

Resolve a gap between the brand qualities Babylon Pac wants to portray and how customers actually feel

Competitive analysis

I then performed a competitive analysis, comparing Babylon Pac’s brand messaging and e-commerce approach with four industry competitors to uncover best practices, potential opportunities, and unique ways to differentiate Babylon Pac in the market.

Brand workshop

To execute the brand redesign effectively, I conducted a collaborative brand workshop with the client, facilitating discussions to uncover their core message, target audience, and desired brand attributes, ensuring a tailored and impactful outcome.

Design goals

Establish a clear and compelling brand message that encapsulates Babylon Pac's commitment to sustainability and environmentally-friendly packaging solutions.

Define a consistent visual language, including color palette, typography, and iconography, that reflects the brand's values and enhances recognition.

Develop a set of actionable guidelines for implementing the new brand identity across all digital touchpoints, ensuring cohesive and consistent communication.

A brand renovation

After thoroughly understanding the client’s needs, I successfully crafted a brand identity that not only met their requirements but also resonated with their target audience, effectively conveying their sustainable values and driving engagement.

Discovering pain points

By conducting a CRO audit and analysing user recordings and heatmaps, I identified critical pain points in user interactions on the old website. Users faced challenges with e-commerce features, such as search functionality, and often abandoned the checkout process.

Heatmap & recording analysis conducted on

Research Findings

Paper wireframes

Following the discovery of user pain points, I created paper sketch wireframes for both desktop and mobile platforms, illustrating an enhanced user flow and suggesting solutions to address the identified issues.

Digital wireframes

Upon completing the sketches, I transitioned to Figma, where I crafted low-fidelity wireframes that provided a more accurate representation of the final product’s layout and flow, facilitating a better understanding of the proposed design.

High fidelity mockups

Upon approval of the refined user flow, I crafted high-fidelity mockups in Figma, showcasing the new brand, typography, and color scheme, providing a comprehensive representation of the website’s redesigned look and feel.

High fidelity prototype

I subsequently created interactive Figma prototypes for both mobile and desktop, allowing for comprehensive usability testing and ensuring a seamless user experience across devices.

Introducing a refreshed
fit-for-purpose home page

The old website’s issue of users not scrolling beyond the fold led to high bounce rates. The new design addresses this problem by encouraging user engagement and driving conversions through an optimized layout and strategically placed calls-to-actions and trust signals.

Revamped, compact header with updated search bar and relevant links
Company tagline and contact details at the top
Clear call-to-action button in hero
List of happy customers as trust signals
Language and imagery to reflect updated brand identity

Revamped search bar

I redesigned the search bar to enhance product discoverability, incorporating features like auto-suggestions, product thumbnails, and responsive design, ensuring a seamless and efficient user experience while locating desired items.

Refined checkout experience

I revamped the checkout experience on the new website by implementing key UX considerations and enhancing the UI, resulting in a smoother process. This improvement is expected to significantly reduce the number of abandoned checkouts.

Thank you page

The previous website lacked a thank you page, while the new design incorporates one that displays estimated delivery details and encourages users to continue shopping, fostering further engagement and exploration of the site.

Style guide and components

To prepare the project for developer hand-off, I created a style guide outlining UI components and branding elements, ensuring consistency in visuals, user interface design, and creating a cohesive experience across the website

Next steps

Collaborating with developers to ensure a smooth transition and accurate implementation of the design

Monitoring the website's performance and gathering user feedback to identify areas for further optimization

Measuring key performance indicators (KPIs) such as conversion rates, bounce rates, and user engagement to evaluate the effectiveness of the redesign

Continuously iterating on the design based on data-driven insights and staying updated with emerging design trends and best practices in the sustainable packaging industry

Let’s make something great together

Get in Touch