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
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
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.
I sketched, wireframed and tested the interface that combined standard e-commerce layouts with unique product customisation features.
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.
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.
Drive a better understanding of Chocolatory's concept despite an offering and brand language that are relatively abstract
Provide reassurance and constant feedback as users progress through the customisation journeys
Prevent users from getting frustrated or overwhelmed by the length of the journey and the amount of options
Ensure that the customisation interface features gestures and interaction mechanisms can be intuitively understood and used
Translate, group and label the content of the site into a structure that is easily grasped by its users
Visualise the customisation options and bring the end product to life throughout the entire process
Create a step-by-step customisation journey that's easy to navigate and free of distraction
Leverage gestures and components that are widely used online to simplify the learning process of the interface
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.
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.
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.
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.
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.
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.