Logo

KOKO Relaunch

I was very lucky to work with the brilliant team at DixonBaxi on the digital experience for the relaunch of KOKO. Helping define UX and design a responsive UI site for the MVP phase of the site.

IA – Top level Sitemap_Suggested_09Sep2021 2

UX workshops

In the first phase of the brief, I helped define the UX requirements and user flows of the project for the MVP site launch. Working with all project stakeholders from the client and agency, multiple workshop sessions were held. The aim was to create a structure that set out the ambition for the relaunch of KOKO, to deliver multiple viewing options and build on its destination for real-life experiences with numerous tiers of membership.

Homepage Default
Watch – Default
Artist Detail
What’s On Default
iPhone X_Screen1
iPhone X_Screen2

A Modular Design

The site needed a modular design approach to provide consistent listings for a broad category of acts, this included ways to respond to promotor requirements and time-sensitive ticketing availability.

While at MVP stage, the design was also looking forward to enabling future planned functionality for tailored listing based on profile preferences.

Card variants

Much of the design focused on card designs to summarise the differenct acts and content types, such as live acts, streamed content, archived content, or methods of promotion.

CardDesign_Act
CardDesign_Stream
CardDesign_Recommended

Listen now or watch anywhere

Users can plan visits through a searchable calendar module, book live streaming tickets to watch later or listen now with KOKO radio.

The site needed to promote acts on an ad hoc basis, multiple promotion slots were created to provide enough flexibility to do so, through Hot PIcks, or highly recommended modules.

A ‘Tonight’ module provides real-time updates for that evening's acts and last-minute purchase options to watch a stream or buy tickets for the theatre.

iPhone X_Screen3
iPhone X_Screen4
iPhone X_Screen5
iPhone X_Screen6
iPhone X_Screen7

A responsive design

A responsive web build, the design needed to adapt for multiple breakpoints from a mobile-first starting point.

iPad-Pro-Landscape_Screen01
iPad-Pro-Landscape_Screen02
iPad-Pro-Landscape_Screen03
iPad-Pro-Landscape_Screen04

Selected Projects

SkoposDesign

KOKODesign

SpinnupDesign

GrosvenorProject type

Endurance GroupProject type

DofEProject type

The Break EmojiProject type

Encourage OmarProject type

HiltiProject type