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 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.
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
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.
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
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
Royal Academy of Dance
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.
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.
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.
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.
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
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
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.
Users wishing to buy a membership were unable to register for a new
The login area for buying a membership or booking an event was
different from the membership portal users receive access to once
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
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.
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
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.
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.
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.
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.
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”
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
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.
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.
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.
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.
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 .
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 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.
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.
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.
Visual design of a Spotify Advertiser Hub and IAB interactive display unit.
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.
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.
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.
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.
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.