top of page
Macbook-home-mixers.png

Product design

Coca-Cola briefed the team on this project to explore how the brand could enrich the mixers portfolio digital experience to customers and consumers. The project team built a web platform where all audiences could be inspired with rich product content as well as a bespoke tool allowing customers to create drinks menus for their venues. This would result in more drinks sales across the category as well as raising brand affinity. The site went live in GB and LATAM.

Activities:

Discovery // Product design // Dashboard design  // Web design

Year:

2021

Mixers Web

The mixers website served as a hub for consumer facing content aimed to inspire users about the mixers range with rich content such as recipes, product information and a drinks paring tool.

 

It also provided an access point for customers to enter the menu generator.

Macbook-mixers-site-menu.png
mixers-site-sitemap.png

SITE MAP

A sitemap was created to define the page organisation in terms of how a user could navigate through the content offered on the site.

 

Recipes and pairing suggestions tied to each product granted relevant relationships to the pages.

CONTENT STRUCTURE

The content hierarchy was defined in this high-level approach to wireframing. The page layouts were communicated using modular design using colour as a reference to demonstrate the relationship between the pages. This acted as a guide for what existing assets could be used, and which assets needed to be created by the design team.

mixers-site-page-structure.png

DESKTOP/TABLET SCREEN DESIGN

The UI layer was applied to the wireframes following the set colour palette and typeface defined for the Coca-Cola Company wide projects. Smooth interactions were used to ease the user through the site.

Mockup-tablet-mixers-web.jpg

MOBILE SCREEN DESIGN

The website offered a unique mobile experience. Bespoke components were created to accommodate handheld device screen resolutions such as page carousels eliminating inefficient scrolling.

UI-Isometric-Monochrome-Presentation-mobile-mixers.jpg

PROTOTYPE

The creation and utilization of a prototype were integral to the website redesign project's page layout design stage. The prototype served a multifaceted role, allowing for design validation, user testing, iterative improvements, and design consistency across various screens. It also facilitated early user feedback and streamlined the handover of design assets to developers through the Zeplin app. This collaborative approach ensured that the design vision seamlessly translated into a functional and user-friendly website, enhancing both the design process and the subsequent development phase.

XD-prototype-CTA-mixers.jpg
mixers-web-live-site.png

LIVE SITE

The culmination of the mixers project marked an exciting milestone as the site went live in both Great Britain (GB) and Latin America (LATAM). This launch represented the fruition of extensive planning, design, and development efforts, bringing the envisioned digital experience to audiences across these regions.  The successful deployment in these two markets underscored the adaptability and scalability of the design, reflecting a global brand presence and a commitment to delivering an exceptional user experience to a diverse user base.

bottom of page