KITKAT CHOCOLATORY
KITKAT CHOCOLATORY

Turning KitKat’s pop-up stores into an online shop experience

Turning KitKat’s pop-up stores into an online shop experience

SKILLS
Information Architecture, Interface & Interaction Design, Usability Testing

ROLE
Information architecture, Interface & interaction design, Usability testing

DELIVERABLES
Sitemap, User Flows, Wireframes, Clickable Prototypes, Annotated Designs, Design System

DELIVERABLES
Sitemap, User Flows, Wireframes, Clickable Prototypes, Annotated Designs, Design System

DELIVERABLES
Sitemap, User journeys, Wireframes, Clickable prototypes, Annotated designs, Design System

KK_Cover_Pink
01 SNAPSHOT

Shaping a tailored online experience for Brits to discover and customise unique KitKat bars

Working in tandem with a UI Designer for three months, I brought Chocolatory's physical pop-up concept to the digital world. The result: a webshop with tailored designs for people to create their KitKat bars, make their own gift box selection and browse KitKat's Limited Editions.

Working in tandem with a UI Designer for three months, I brought Chocolatory's physical pop-up concept to the digital world. The result: a webshop with tailored designs for people to create their KitKat bars, make their own gift box selection and browse KitKat's Limited Editions.

KK_PDP_Box Size
KK_CYBox_Poster

Credits  Agency Mirum UI Design Stephen Verma Account Management Maria Giovanna d'Orsi and Kate Rudland Project Management Matt Bruce

02 ROLE

As the lead UX Designer, I was in charge of shaping a vision for the experience, facilitating a user-centred design process and defining the backbone of Chocolatory's webshop.

Information architecture

I defined the sitemap and the five key user journeys to turn Chocolatory's product offering into a smooth user experience.

I defined the sitemap and the five key user journeys to turn Chocolatory's product offering into a smooth user experience.

Prototype and testing

I sketched, wireframed and tested the interface that combined standard e-commerce layouts with unique product customisation features.

Collaborative design

I worked hand-in-hand with the UI Designer, dev team and stakeholders to deliver the final designs in the form of a comprehensive design system and a clickable prototype.

03 CHALLENGES & PRINCIPLES

Unpacking the challenges and design principles to address user pain points

Chocolatory's concept is appealing with its extensive range of flavours, bar formats and customisation options – but it became clear that people’s decision-making process was going to be more complex online. Off the back of the product offering, I identified four key UX challenges that I framed into design principles to guide our design process.

CHALLENGE #1

Inform

Drive a better understanding of Chocolatory's concept despite an offering and brand language that are relatively abstract

CHALLENGE #2

Support

Provide reassurance and constant feedback as users progress through the customisation journeys

CHALLENGE #3

Guide

Prevent users from getting frustrated or overwhelmed by the length of the journey and the amount of options

CHALLENGE #4

Simplify

Ensure that the customisation interface features gestures and interaction mechanisms can be intuitively understood and used

PRINCIPLE #1

Coherent

Translate, group and label the content of the site into a structure that is easily grasped by its users

PRINCIPLE #2

Tangible

Visualise the customisation options and bring the end product to life throughout the entire process

PRINCIPLE #3

Focused

Create a step-by-step customisation journey that's easy to navigate and free of distraction

PRINCIPLE #4

Familiar

Leverage gestures and components that are widely used online to simplify the learning process of the interface

04 INFORMATION ARCHITECTURE
04 INFORMATION ARCHITECTURE

Translating Chocolatory's offering into a smooth browsing experience

I tested three variations of the main navigation to gather and address key barriers to wayfinding. The result is an information architecture that clarifies the offering using grouping, labelling and imagery support where possible.

KK_Nav_Mobile
NAVIGATION 1.0 – 1440px – Cropped
05 USER FLOWS

Defining the journeys we wanted people to embark on

The user journeys acted as a bridge between KitKat’s offering and the digital experience, allowing team members and stakeholders to discuss and shape the 'backbone' of the experience.

I identified five key user journeys to create a fully connected experience. Two journeys break down the customisable products 'Create Your Break' and 'Create Your Box' into a clear step-by-step process while three journeys cover more classic e-commerce requirements – all the way from product browsing to checking out.

CYBreak_Journey_3
06 'CREATE YOUR BREAK' JOURNEY

Establishing the foundations of the customisation experience

I kicked off the inteface design with the most complex journey – the personalisation of a KitKat bar – in order to define a set of principles for product customisation across the site.

I started with sketches to validate a key concept and test the relevance of the user flow. I added an extra level of interaction and components with wireframes, which were then finetuned and turned into final designs by the UI Designer. Each of the three ideation stages were wrapped up with a round of usability testing with 5 respondents.

KK_Concept1
07 'CREATE YOUR BOX' JOURNEY

Adapting the principles of customisation to the ‘Create Your Box’ product

Relying on the foundation established for 'Create Your Break', I adapted the layout of the product preview and integrated interactions to allow the mix and match of KitKat bars in a box. The feedback gathered during the usability testing was directly implemented in the development of the final UI.

08 E-COMMERCE LAYOUTS

Connecting the dots with standard e-comm layouts

The last ideation stage was dedicated to shaping a fully-fleshed experience by creating more classic and functional e-commerce templates. I defined the components and content hierarchy for the homepage, listing page, product page, basket and checkout in a set of wireframes that also included indicative story flows for KitKat’s production team to produce the copy and photos.

09 DESIGN SYSTEM

Handing over to stakeholders and the dev team

In collaboration with the UI Designer, I produced the final documentation that followed a design system-like structure to include the UX framework, the UI foundations and a comprehensive library of annotated components and templates. This main file was supported by a clickable InVision prototype and animated interactions for the customisation journeys.

KK_Design-System