bip thumbnail

BiP Solutions

rad thumbnail

Royal Academy of Dance

eichhof thumbnail

Eichhof Retro

hhn7 thumbnail

Universal Studios Singapore

coke thumbnail

Coca-Cola

guardians of the galaxy thumbnail

Guardians of the Galaxy Vol. 2

slim jim thumbnail

Slim Jim

api product thumbnail

Adstudio

asics thumbnail

Asics fuseX™

dory thumbnail

Finding Dory

cornetto thumbnail

Cornetto x Little Mix

jungle book thumbnail

The Jungle Book

BiP Solutions

Introduction

BiP Solutions is the leading provider of procurement support and intelligence. I worked with them to create a white-label solution to allow small-to-medium sized enterprises (SME’s) find government tenders online and receive alerts when new tenders become available.

My role was as UX Consultant, aiding the internal product development team at BiP who lacked UX and design resource.

The Challenge:

The product was being based on an existing platform that had been built from a dev-first, feature-led perspective instead of customer focused. This resulted in one of the most crucial areas of the product, onboarding, falling flat.

My Approach:

I created a UX project plan, to give the team over at BiP sight of research tasks that would work in line with their newly-adopted Agile approach to development.

I started off using Hotjar to watch user sessions, and documented pain-points and where users were dropping off. From this I was able to pull out themes from persistent issues.

In addition to this, we set up a survey on the site so users could feedback on their registration experience. I collected themes from this feedback too, and presented it to the project team at BiP.

Carrying out unmoderated testing and gathering user feedback allowed me to make the case that the registration path needed improvement, and so the next step was to carry out competitor analysis.

I compared the registration path that BiP had for their existing product to their top 9 competitors. The criteria for this task was:

  • Completion (time taken to register account)

  • Ease of use

  • Fields (number of form fields)

  • Steps (number of screens to go through)

  • Validation (make the user aware of errors)

  • Live Chat (allow users to ask for help)

  • Required Fields Marked (allow a user to know if the information they're providing is optional)

  • Inline Errors Marked (allow users to see where exactly they've gone wrong)

  • Data captured (noting label names and input types).

In addition this usability analysis, I also researched best-in-class onboarding experiences.

I also carried out a content inventory and review of BiP’s marketing website, the main driver to their existing product.

Key Findings

The key takeaway from this exercise was that much of the content was repetitive, to the detriment of selling the product. For example, across 21 pages, there were 41 buttons leading the user to “Register for free” causing the user to become blind to the call-to-action, as it was no longer a priority.

Using the data from the research exercises, I created two different user flows to test against each other. I created wireframes for these flows so BiP’s development team could create low-fidelity prototypes to conduct user testing.

Royal Academy of Dance

Introduction

The Royal Academy of Dance (RAD) is the world's leading dance academy operating across three continents, throughout 80 countries and covering 8 languages, bringing the highest level of examination and accreditation to dancers and dance teachers alike.

My role was Design Lead, working closely with a team of developers, designers and project managers to deliver the website redesign project.

Research and Discovery

Working with my team, I carried out a thorough research phase ahead of three days of Discovery workshops held on-site at the Royal Academy of Dance Headquarters in London.

Research Tasks

  • I used Google Analytics and Hotjar to gauge pain points for users on the old website and, from this, identified opportunities where we could make key customer journeys more pleasant and usable.

  • I carried out a heuristic evaluation of the existing website, and created a list of key themes to use as discussion points with the client in workshops.

  • I also carried out qualitative data gathering in the form of surveys and a series of interviews with international members of the Royal Academy of Dance (RAD). This opened our eyes to the challenges faced by those in other parts of the world. We found technical constraints from those with little internet access to those with differences in the structure of the organisation.

All of this information was compiled and made digestible for the client going into the Discovery sessions. Our goal was to ensure that the user groups and personas we then created would be representative of a rounded, global user base.

Stakeholder Interviews and Workshops

The discovery sessions involved a series of workshops with stakeholders from all departments of the RAD. From Memberships to Marketing, Donations to Examinations, we created task models of the current user experience that related to their department (e.g how a user signs up for a membership) and presented these to each relevant department. We then ran workshops tasking those teams to improve the customer experience from those task models.

Throughout, we continued to gather insight from experts of their subject matter and used this insight, alongside our knowledge of their users, to restructure the key user journeys on the website.

Information Architecture

One of the biggest challenges was the information architecture on the site and we spent a considerable amount of time iterating this on-site; card sorting with different teams to ensure users with different goals would be catered for. The RAD was aware of the issues their current site structure had, as like many established websites its structure had taken on an “organic” approach, which is to say lots of content was not categorised and required restructuring to make sense from a user’s perspective.

In addition to this, the labelling of the main navigation was muddy, with names like “Achieve”, which we renamed “Exams”, to more clearly represent the information it contained: how a student goes through the examination process with the RAD.

Key Challenges

Find a Teacher Configurator

A key feature the RAD were keen to see improved on the new website was their ‘Find a Teacher’ directory. This was one of the most highly trafficked areas of the site, with users being able to search for a teacher in their local area. Internally this functionality was important to the Memberships team, as appearing on this directory is only applicable to the highest membership tier.

The Challenge:

  • Users had difficulty finding out detailed information about each teacher at a glance and, so, struggled to make an informed decision

  • Teachers were not able to sell their services as effectively as possible from the lack of information provided to the user upfront

Our Solution:

  • We removed a step from the journey wherein the user had to click the teacher's name to see an expanded profile and integrated this profile into a card style instead of a list

  • As an added value to a teacher’s membership, they can now attach multiple social handles, as well as external websites, to their profile to upsell their services

  • Teachers who have upskilled, or have “Registered Teacher Status” (the highest accolade for teaching with the RAD) have identifying badges on their profile cards to differentiate them from lower membership tiers

Single Sign-On

The Challenge:

Early on in the Discovery process, we identified the need for single-sign-on functionality to bring the RAD’s disparate memberships portal and account management area together. We found there to be multiple platforms, and multiple barriers, to logging in on the current website. Including:

  • Users wishing to buy a membership were unable to register for a new account online

  • The login area for buying a membership or booking an event was different from the membership portal users receive access to once signed up

  • The online shop lives on a separate domain, meaning users can ultimately have 3 different logins with the RAD

  • Users would often forget their login details or got them mixed up due to the number of different areas to sign in to

Our Solution

Through the discovery phase, we uncovered that RAD students and members are assigned a unique ID number when they take their first exam (as early as age 5) and this follows them throughout their whole career. This was a mostly offline process for the RAD, using paper forms that have since been digitised. By integrating ‘Silverbear’ by Microsoft with the RAD’s new CRM system we brought together multiple user accounts and allowed users to have a single point of entry to the RAD and their services. To support users who have an existing login, we created an account lookup feature during the registration process that will make a call to the Silverbear API and verify users identities by their RAD ID number, date of birth and address.

Multi-country selection

A requirement set by the RAD was the need for multiple landing pages, tailored to each of the 85 countries in which they operate across 37 offices.

The Challenge:

The RAD has a global presence and is a heritage organisation that has been around since 1920. As it stands, the brand did not have a cohesive brand voice, particularly beyond the scope of the UK. They were running into issues with consistent use of logos, typography and colour palette from independently run RAD websites outside of the UK. These websites were managed by RAD employees who don’t have much (if any) contact with the RAD Headquarters in the UK.

Our Solution:

Throughout the research and discovery phases, we spoke with members and employees of the RAD on a global scale, and it was our aim to gauge the technical requirements and needs of both admin users on the RAD’s side, as well as their user base.

We found that this varied vastly from country to country. For example, the Australian arm of the RAD operates a large-scale events website with ticketing integrations, whereas the RAD in Mexico preferred a level of anonymity to protect the sensitive information of their young members.

We ultimately created a website that is completely flexible, and scalable to meet the needs of their varying offices. The website can be as simple as a single landing page, built up using a series of flexible components we designed as part of a style guide, that leads users to RAD HQ for a single source of truth. Conversely, the website can be cloned to facilitate the membership and ticketing needs of their larger offices around the world.

Design

Creating a digital style guide

We worked with the RAD to translate their brand digitally. They had an existing set of brand guidelines that had a strong print focus, and our design team worked directly with the RAD to define guidelines that would work for the web.

Colour Palette

We started this process by iterating on the RAD’s colour palette. Their primary brand red is iconic and works well in print, but working red into a website needs to be handled with care so that it doesn’t get confused as signifying an error. We worked to use the red as an accent colour and introduced a royal purple hue for primary action buttons. We complemented this with their existing teal colour which was used extensively across the old website. We wanted users to have a feeling of familiarity when logging on to the new website for the first time, so sparingly carried the teal colour through to compliment the new palette, giving it a subtle update to ensure it now passes WCAG 2.1 web accessibility standards for users who require higher contrast in order to see content more clearly.

Typography

The RAD uses Gill Sans in all of their printed materials, and we were keen for this British classic to remain as the primary typeface for their online presence. Gill Sans has been used extensively throughout Britain since its release in 1928; most notably by British Railways, the BBC and the similarity to the hand-drawn type in the famous “Keep Calm and Carry On” wartime poster.

To support the primary typeface, we introduced the very readable Open Sans by Google for main body text. They bring together the old and new, harking back to the RAD’s heritage whilst firmly placing it in the future digitally.

Eichhof Retro

I was responsible for the visual design of this custom microsite for Eichhof, a Swiss beer company who have been operating for over 180 years. The concept revolves around the Eichhof Retro lager, first brewed in the 1970's and back for beer lovers to enjoy today.

The Concept

Users land on the responsive microsite and have their Spotify playlist taken back in time by analysing their music library and switching out tracks for their 70's equivalent.

Universal Studios Singapore®

As the creative lead I was responsible for the user experience, visual design, video production and creative copywriting of this custom experience for Universal Studios Singapore® and their annual Halloween Horror Nights event.

The Concept

Users click on a HTML5 rich-media homepage takeover banner to launch a creepy disruptive video that takes over their browser, complete with blood dripping and haunting footage. Upon the video completing users are led to a responsive microsite and have their Spotify playlist analysed to discover one of the seven deadly sins lurking within their music. Their "Deadly Sin" match is revealed and the user can further customise their result using the deadly sin UI. A competition is activated where the user can share their deadly result on Facebook or Twitter to win Spotify Premium.

View Wireframes

Coca-Cola

I was the creative lead for this responsive website for Coca-Cola which ran across Singapore. Working as part of a small creative team with a UX designer and front-end developer, we sought to provide the user with an engaging experience that met the technical requirements set out by the client.

The Concept

Fizz Up your music and your life! When you're feeling that mid-afternoon slump, Coca-Cola can perk you up. Via a custom Spotify Advertiser Page users can either enhance a playlist from their library, or choose their favourite genres. Then, they adjust the level of 'fizziness' and get a perfect playlist generated just for them.

Guardians of the Galaxy Vol. 2

I was the creative lead of this multi-regional interactive experience. Working with Disney and Spotify and running across 16 countries, the “Throw Back Your Playlist” dedicated hub was a highly successful execution that received press recognition from The Drum. You can read about it here .

The Concept

Users are encouraged to generate 70’s playlists inspired by the songs they love and the movie’s soundtrack. Users of the free tier of Spotify also receive video and display advertising around the campaign. Within the experience, fans of the movie can also watch the movie trailer or buy tickets for the film’s launch.

Slim Jim

The Concept

Slim Jim wanted to create an experience that allowed their target consumers to “snap”into live concerts near their location. The resulting design used API’s from Spotify and Songkick to build a concert finder that personalises concert recommendations based on your location and music listening.

Using wireframes created by a UX designer, I created the user interface and high-quality composites for this experience.

Tasked with designing for data that would be dynamically updated was challenging. I used a variety of CSS3 transitions and blend-modes in a responsive grid system, pulling in background imagery of the artists using the Songkick API to achieve a look/feel that was in line with Slim Jim’s outrageous branding. I also created a handful of abstract images that were randomly generated into the design to create a visual break.

Adstudio

I was a key member in the development of products that allow advertisers to create rich, interactive, music-powered branded experiences. With smaller budgets and tighter schedules in mind, we developed a range of products that harness the best of Spotify’s APIs and developer tools.

The Process

Using data informed from previous advertising campaigns we set out to optimise the user experience with a number of improvements to the UI. My role was varied throughout the process, with responsibilities varying from the creation of user flows, wireframes, prototypes and redlines to carrying out iterative testing of the content management system created to build each product.

I played a key role in making sure all the UX and UI requirements were met during an extensive QA process. Using the user stories we created in conjunction with requirements documents, I logged and verified each component of the design manually and tested it across devices and browsers in order to ensure the highest level of quality was maintained.

Asics fuseX™

Visual design of a Spotify Advertiser Hub and IAB interactive display unit.

The Concept

A custom interactive experience where users choose 1 of 5 genres as well as the distance of their run to get a playlist generated. The genre selection impacts the type of music within the playlist while distance impacts number of tracks, resulting in a playlist that is customised to the user’s preference and average run time.

In addition to the microsite execution, I led design on a rich-media Homepage Takeoverthat ran alongside the main campaign.

Finding Dory

Working collaboratively, I was responsbile for the visual design of a responsive website for Disney in collaboration with Spotify which ran throughout Australia, the U.K. and Spain.

The Concept

Just keep swimming! To mark the fourteen years since Dory swam into our lives in the iconic Disney/Pixar movie Finding Nemo and with the release of her latest adventure, Finding Dory, users can pick a moment they will never forget to get a specially curated playlist of tracks from that nostalgic moment in time in this fun responsive microsite.

Cornetto x Little Mix

Working closely with the design team and stakeholders, I constructed the visual design and creative copywriting for this responsive microsite and IAB interactive display unit.

The Concept

A fun quiz from Cornetto in collaboration with Little Mix. Take the quiz to discover which ice cream you fancy, and find out which member of Little Mix loves it too! On the results page users also get access to custom content, photos and videos from Little Mix and the opportunity to share their result on Facebook and Twitter with their friends. The success of this campaign extended to an IAB rich-media Homepage Takeover banner with a condensed version of the interactive experience.

The Jungle Book

I was responsible for the visual design and direction of this responsive microsite. This highly successful execution was originally designed for the Australian market, and was then further localised for UK and Spanish audiences by popular demand.

The Concept

Experience the thrill of Mowgli’s escape from the jungle with this interactive treasure trail. As the user scrolls through the site (replicating the path Mowgli follows from one character’s domain to the next) reviewing each character’s expertly curated tracklist will reveal the corresponding habitat for that character, displaying fun facts, character traits and character videos for users’ enjoyment.