Project: Redesigning the musician experience for Encore, the largest musician marketplace in the UK

Year: 2017

Role: Lead Designer

Helped musicians get more bookings through a more responsive application experience. Created a new brand for Encore and our first Design System.

As Lead Designer and also sole designer in this small startup team, I had the exciting job of completely revamping the musician experience. The goal was to help them apply for gigs and manage their bookings with more success and ease - from their desktop or their phones - so that we'd reduce user churn and increase the number of applications (and consequently bookings). We managed to reduce the time they spend browsing for jobs by 38% and improved application conversion by 26%.

Scoping & UX Research

I started out by learning about the current experience, mapping out existing user flows and doing some usability testing with musicians to understand what they liked and disliked about the job search experience on Encore.

Musician's experience before the re-design

Musician's experience before the re-design

Musician's experience before the re-design

Musician's experience before the re-design

User flow maps

Traffic light usability report

Challenge:

Running usability tests I quickly understood we were making it too difficult for musicians to apply for jobs. It was hard for them to find gigs that suited them and that they were available for.


The musician job tiles - cards stating all needed info around a specific job - just had way too much content and there were very few filters available. As a result, musicians were spending too much time examining each one before applying, making the job search experience incredibly time consuming and causing many of them to give up or to apply to much fewer jobs than they should be.


Speaking to the team internally however, there was a lot of disagreement regarding what should be changed or what could be dropped.

My approach:

I figured a quick enough way to learn would be to have a few musicians prioritise the information themselves. I needed to learn what exactly in those cards was helping them decide whether it was the right job for them. And then within that, what needed to be looked at a first level vs what they wouldn't mind clicking in for more detail.


Encore ran a monthly community event called “Encore Drinks”, so I took the chance to organise a card sorting exercise with the musicians that attended the event. I listed out every bit of information we had available in those job cards and printed them out to be sorted in the exercise.


However, it was important to get the team buy in and their vast expertise dealing with these musicians was also a precious asset. So after the card sorting exercise, I made my findings available to the team and ran an internal crazy 8s brainstorming exercise.

Re-imagining job tiles

From the card sorting exercise we learnt that the event title, performance fee, date, rough location, start time and duration were the most important things musicians looked at first.


Things like the client’s message, specific profile requirements or the exact location of the job were all things they would look through after they’ve established they are available and able to travel to it. However, they still wanted to be able to quickly look at it without having to navigate back and forth between pages and loose track of which jobs they looked at already.

Card sorting with musicians for feature priorisation

Crazy 8s sketching with the team

In the team crazy 8s we ended up exploring visual themes for the jobs. We hosted many types of events in the platform: weddings, birthday parties, corporate events, recording sessions - and at a glance all of these looked the same. We ended up talking about how imagery / color / iconography could massively lift the experience.

So we decided to move ahead with a 3 tiered approach:

1) Design a compact job card with all essential information that you could click to quickly expand without navigating away from the page.

2) Have that card be expandable to show details like the clients message and job requirements.


3) Create a job page where they can find all of this information as well as a messaging interface to get in touch with the client. This page is accessible from their applications page as well as the job board.

Compact job tile

Compact job tile

Expanded job tile

Job page

Tech and design refactoring

Setting up the building blocks

In parallel, I was noting obvious issues in Encore’s existing brand and UI Kit that weren’t helping this re-design be effective as it could be.

Challenge:

Encore didn't have a design system in place, and the idea of doing such a big redesign and build without one seemed like a waste of an opportunity to me and the lead engineer working alongside me.


I chatted to the founders and proposed that we take this as an opportunity to slightly modernize the brand and present ourselves in a complete new way to musicians - whilst speeding up our delivery times massively moving forward.


I was successful in my pitch but was given a tight deadline so there wasn't a lot of time to get creative, I needed a pragmatic approach.

My approach:

I decided the easiest way to kickstart this would be to focus on concrete, technical issues. Things like accessibility for example: we needed to reconsider our colour palette for contrast as well as things like font sizes and paragraph legibility.


Ultimately, we knew we needed a robust design system to drive change at scale and we needed it fast.

A perfect example of this pragmatic, speedy rebrand: the logo.

First I studied up a few free font alternatives together with the team and landed on Nunito Sans as our new official typography. Then I used a weighted version of Nunito to modernise the existing logo, modifying it to add the characteristic note marks under the "n".

Original logo

The new logo

And with this approach, soon we had a design system

It'd take time for it to become as robust as we needed it to but by staying pragmatic and by hosting it on tools like InVision Design System Manager and Storybook we kept things moving speedily and we were laying the foundations for massive speed gains in the long run, not to mention build and design quality.

Encore’s new design system, hosted in inVision Design System Manager

Truly understanding our musician users

In re-thinking our brand it became obvious that we needed to deepen our knowledge in who we were speaking to, so the tone would be appropriate.

Challenge:

I also realised a quick win would be to do some re-thinking of our tone of voice.


The content design of the platform was yet another factor that contributed to the disjointedness of the experience. There was no one in the team to own this area of work as we had no content designer or copywriter, so we needed some guidelines to be able to write copy among ourselves and still have a unified, considered voice.

My approach:

Again with Encore Drinks getting access to musicians was quite easy.

I organised a focus group with our most active musicians to put together a high expectation persona: “the customer that needs/wants your service or product the most”. With that persona in mind, I collaborated with our musician specialist to develop a new brand tone and copy guide for Encore.

Focus group: talking to our most booked musicians.

"With that persona in mind, collaborated with our musician specialist to develop a new brand tone and copy guide"

Musician high expectation persona

Copy guide poster I put up in the office

Bringing it all together

All those pieces then played into figuring out what the new responsive experience looked like, using all the insight from our team and users whilst injecting all these quick wins from the new brand and design system.

Speedy, collaborative iteration

At Encore we were big fans of Freehand as a way to all get involved, make notes/comments and sketch out ideas. I made sure I encouraged this feedback quickly so every design would have the eyes of not only product but also sales and support on it.

Invision freehand screenshot

Invision freehand screenshot

Think through all the journeys

Beyond the basic blocks of rethinking the job tiles, there were a number of actions musicians could take from the jobs page that needed re-thinking. They could apply or withdraw an application, respond to a client request (either for a message, call or booking) , they could save and share the job with a friend, etc.


Through multiple other rounds of user testing we've learnt about existing issues and meticulously addressed them.

Sketch screenshot: the new experience coming to life

Rewarded by great results

After many iterations and rounds of testing – as well as powering through a few less successful ideas (like first trying out imagery in the tiles) – we landed in a truly positive delivery

Few metrics:

Time spent on the website reduced by 38%.
Improved application conversion by 26%.
80% of our users re-installed the app.

Time spent on the website reduced by 38%. Improved application conversion by 26%. 80% of our users re-installed the app.

“The app is spot on, works really well after the update.



It makes it so easy to chat with clients & having the alerts come

through on both my phone and Apple Watch is perfect.”






- Leon Marshall, Singing Guitarist

“The app is spot on, works really well after the update.




It makes it so easy to chat with clients & having the alerts come

through on both my phone and Apple Watch is perfect.”






- Leon Marshall, Singing Guitarist

“The app is spot on, works really well after the update.

It makes it so easy to chat with clients & having the alerts come

through on both my phone and Apple Watch is perfect.”






- Leon Marshall, Singing Guitarist

aspirant surfer ✦ passionate musician ✦ hopeless feminist ✦ social justice advocate ✦ psycology buff ✦ eternal student ✦ chronic overthinker ✦ zero waste proponent ✦ trainee coffee dialer ✦

Daydreaming in London, United Kingdom

aspirant surfer ✦ passionate musician ✦ hopeless feminist ✦ social justice advocate ✦ psycology buff ✦ eternal student ✦ chronic overthinker ✦ zero waste proponent ✦ trainee coffee dialer ✦

Daydreaming in London,
United Kingdom

aspirant surfer ✦ passionate musician ✦ hopeless feminist ✦ social justice advocate ✦ psycology buff ✦ eternal student ✦ chronic overthinker ✦ zero waste proponent ✦ trainee coffee dialer ✦

Daydreaming in London, United Kingdom

aspirant surfer ✦ passionate musician ✦ hopeless feminist ✦ social justice advocate ✦ psycology buff ✦ eternal student ✦ chronic overthinker ✦ zero waste proponent ✦ trainee coffee dialer ✦

Daydreaming in London, United Kingdom