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