.png)
.png)
Overview
The music industry is by far one of the most competitive. Not only is talent important, but so is maintaining a brand for business. It has been stated that 95.5 % of micro/small U.K. businesses depend on an online presence to survive in this technological world. Natalie Good is one of them.
This independent musician has made a name for herself in the music industry, claiming residency in The Court Private Members Bar. Despite this, her website is not receiving any new enquiries.
Responsibilities
User Research
UX
Design Director
Software Developer
Client
Natalie Good
Period
3 months
2 Project Cycles
Team
+ Graphic Designer
Key Objective
To figure out why clients are not enquiring about Natalie's services through her website.
Solutions Preview
Redesigned
UX
-
Error Rate dropped from 62.5% to 0.04%
-
'Clicks to Contact' increased by +1,300%
-
Net Promoter Score increased from 18 to 90
-
Acquired new sponsorships from agencies
Redesigned
Art System
-
Customer Satisfaction increased to 85%
-
Passed WCAG AAA
-
Consistent art direction with responsive devices in mind
-
+ 800% Site Sessions
Before
After
Prologue. " What is the situation? "
The Design Brief
Having a 1:1 meeting with the business owner, Natalie was able to inform me about her current situation with her independent business. This then further helped with the design brief to help set out goals, objectives and budget.
This chart informs Natalie's design brief in bullet point format to highlight the main elements. The team's concern is Natalie's budget as there may be additional charges for any iterations on the website.
A shoe-string budget and a tight deadline are our main concerns for this project.
If the team can bring in more finances through Natalie's business then the budget for this project can increase.
Natalie has former clients we can interview for free. Most of the budget will go towards the design aspect.
"I need to save as much as I can... if you can bring in more finances then I'll be able to pay more for the project.."
- Business Owner
Q1. " What are the requirements and constraints? "
Problem to Solution
-
Product relaunch took 3 months
-
Prototyping and user feedback were highly prioritised
-
An existing platform proved to be more challenging due to 5 elements:
Research Goals
In order to redesign Natalie's website I gathered information about:
-
Her online business presence
-
Identify the limitations and restraints
-
How Natalie's Business works (Revenue and Costs)
-
Clients Natalie has previously worked with
These questions were manifested to ensure efficiency when researching key elements for both business and design purposes.
Stakeholder Mapping
Who is involved and how much influence do they have towards Natalie's business?
An interview with stakeholders ensured that everyone was in sync with business expectations and objectives. During the interview, I aimed to gather the required information to understand the problem to be solved and the context to make a plan that fits the project's needs.
This in turn ended up allowing me to map out the stakeholders within this project.
To further strengthen the stakeholder management, initial questions were asked in favour of the stake holder. Gaining empathy with what Natalie expects from me will ensure efficiency when communicating and collaborating throughout this project.
We need to manage other designers in this project, and also to keep in mind other artists Natalie has worked with.
Q i) What does Natalie do?
Natalie provides singing/performance services for gigs. She also tutors vocal training and writes song lyrics.
Q ii) How does Natalie obtain revenue?
Natalie requires a 50% deposit of the agreed price before she attends the gig. For vocal lessons, she charges an hourly rate.
Q iii) What is the estimated cashflow?
Natalie claims she has seen a decline in revenue over the past 4 months...
As previously stated, Natalie approached me to redesign the platform due to a tight budget. In order to understand her financial situation, I issued a Cash Flow Forecast. This spreadsheet shows the monthly income that her services provide annually, broken down into monthly segments.
This exercise gave an insight into her monthly income and expenses. Soon after, Natalie claimed the following to be the most important insights for her business:
Natalie claims that Spring/Summer time is when she sees an increase in revenue due to weddings and other private events.
FMEA (Failure Mode and Effects Analysis)
Which past scenarios have seen Natalie lose business and who is at fault?
To identify possible failures that pose the greatest overall risk for her business,
each scenario was given a score in regard to:
-
Frequency of the problem
-
The severity of the problem
-
Chance of detecting the problem
Questions that were asked throughout this session:
-
What features can help prevent these issues from occurring?
-
To what point is the client's lack of information Natalie's fault?
-
Do any technical terms need to be translated for the user to understand?
The lack of adequate information about her services is the reason why Natalie has lost business in the past
STAGE ONE
EMPATHISE
Q2. " What is the state of the current website?"
A quick R.I.T.E. workshop to see how the current website functions, then audit the experience.
A scrum task was then introduced: R.I.T.E. This allowed for quick testing and evaluating potential issues with the website.
Screenshots From Current Website (2019)
Hypothesis
Prediction: UX and UI need to be user-centred to ensure users can obtain contact details
With the hypothesis set, the next stage was to gather quantitative data from user testers. Getting in contact with some of Natalie's former clients, through surveys and interviews allowed us to determine:
Surveys and Interviews
Q3. " What do users wish to obtain from Natalie's
website? "
After surveying and interviewing some of Natalie's former clients, further information on what was essential for the music industry business was established.
The surveys covered an array of topics ranging from:
-
The urgency for booking a musician
-
Types of events/gigs
-
What required information is needed from the musician?
15 candidates were surveyed with 8 being asked for interviews and user testing.
The selected 8 were allocated to user test due to their amount of time contacting musicians online.
The 8 candidates were chosen based on the urgency of enquiry, the type of service Natalie provided and the occupation of the client.
Bar Graph showcasing how the interviewees previously contacted Natalie. 100% did not use her website to make contact. Why?
Key Insights from Interviews
Ethnology: Clear Dialogue
What language do the clients speak and what tactics do they use when enquiring?
The level of intelligence depended on the persona. Each member approached Natalie in a certain way, if they worked with other musicians the terminology was industry standard. If they have not, then the language was subservient.
We found that there were structural patterns inherent in their communication:
Clients have a 4-tier approach that slowly introduces information to Natalie to see if she accepts.
Observing the ethnological behavioural traits of the user, they tend to use a tactic towards Natalie. This tactic is introduced through ways which I identified in the chart above.
Identify the personas and highlight their pains and gains, plus how they contact Natalie previously
The 8 interviewees were categorised into 3 personas
-
The Band Member
-
The Organiser
-
The Bar Mitzvah.
The personas are looking at multiple 'musicians for hire' at once. First come, first serve is their mentality.
The collected insights helped categorise the user's requirements for the redesign of Natalie's website into 4 themes:
-
Contact
-
Services
-
Gallery
-
Design
These selected themes, as hypothesised, were challenged due to the poorly designed user experience.
Finding the themes set within the user research allowed us to
categorise business-related tasks. This card sorting exercise aligned our priorities for the needs assessments, which were then transformed into design elements:
STAGE TWO
DEFINE
Discoverability Testing: Current Website
Length
8 - 10 minutes
Participants
8 Participants
Location
United Kingdom, London
Study Type
Usability &
Contextual Inquiry
Why is Natalie not gaining new enquiries via her website?
Before (2019)
Insights of User Testing for Current Website
A collection of bar graphs, quotes and SUS results
62.5% failure with only 37.5% success rate
User Journey for Current Website
Navigate through a 21 paged maze to find an
Enquiry Form.
As predicted in my hypothesis, the UX was too obscure and the design system too rampant. The current website has poor design features that prevent the past scenarios where Natalie lost business.
Overall Verdict
Problem Statement
Natalie is not gaining any enquiries through her website for 3 reasons:
-
Unable to find contact details
-
Poor User Flow
-
High Abandonment Rate due to a poor Design System
STAGE THREE
IDEATE
Q4. " What solutions can help bring in more business enquires via the website? "
The ideal user journey shows the goals for both the user and the business owner.
This user journey focuses on one persona, the Bar Mitzvah. This in-depth user journey pinpoints the goals that the clients wish to complete. With this, I set the design principles to ensure the justification of the product redesign.
Set the Anti-Goals to determine the Design Goals and in turn define the metrics to record success.
The following chart was created by me to help set the anti-goals and goals. Each 'anti-goal' statement flows through the previously allocated FMEA chart and finishes with our design goals and which metrics to record.
Goals set: Make the website user-centred with easy access to contact details.
With the team in agreement, I set the main fundamentals for the redesign with these 3 statements.
How can we deliver value quickly without enhancing our tech-debt?
Elephant Carpaccio
With the brief set, I commenced an Elephant Carpaccio in order to break down smaller briefs for the product to deliver value faster.
Prioritise the UX and launch product redesign
before Spring/Summer time.
Product Roadmap
The Elephant Carpaccio helped visualise the strategy for the product redesign. Natalie, the other graphic designer and myself were able to keep organised and aligned. This table that I created showcases the milestones and deadlines.
Focus on the short term to allow the business to gain revenue for the long term. A single-page website with a contact form was the quick answer!
Temporary Replacement
-
Unlink the 21 redundant pages, leaving only one home page
-
Correct grammar and minimalise text
-
Simple monochromatic colour scheme for WCAG Contrast Ratio
Our first session was completed within 3 - 4 hours. Almost instantaneously Natalie's platform saw an improvement towards:
-
Load times decreased from Av. 6 secs to Av. 0.5 secs
-
Bounce Rate decreased from +80% to 20%
-
Passed WCAG AAA Contrast Ratio (15.52:1)
-
Clicks to Contact increased to 30%
This approach of the temporary one-page website ensured that our tech/coding debt was minimised. The redesign will eventually implement any features that bring in more enquires whilst referring back to the FMEA Matrix Chart.
UX Copy Writing
The user feedback stated that Natalie's poor grammar and punctuation diminished both the NPS and Sentimental Score. In order to tackle both grammar correction and SEO ranking, a list of keywords was established with both Natalie and the user testers.
This will further strengthen:
-
The VOC (Voice of the Customer)
-
Search Engine Results
-
Clarity of Natalie's services
-
Legibility for the user
Each keyword was then graded through Google's Keyword Planner for their search volume and forecast.
This will then introduce Natalie's potential to add a campaign on certain keywords allocated to her website. Site Sessions and Clicks to Contact should increase.
See what works on other platforms, audit them and implement our own ideas.
Competitor Benchmark Analysis
With the feature prioritisations set from the Discoverability Test, analysing both high-end and low-end competitors was our next task. Each competitor underwent a S.W.O.T. analysis to determine their strengths and weaknesses.
A new UX with constant access to a contact form
Architectural Information
-
60% of business-related tasks are on the Home Page
-
Contact Form at the bottom of each page
-
Architectural Information takes social media into account
Reduce Tech-debt and Design-debt by using the current web development site.
Effective vs Efficient
-
Constraints see Natalie needing to add additional content to the website at ease. Natalie is well acquainted with Wix.
-
No need to attend to domain threading to the new site.
-
Architectural Information takes social media into account
Finding new ways to exchange payment safely and promptly
Fintech Opportunities
-
GoCardless has the most up-to-date features for Web 3.0
-
PayPal is the most recognised platform for stakeholders to use.
-
Clients prefer to use PayPal for convenience and recognition.
Paid Packages for hourly booked vocal training sessions
Multiple Tier Payment Plans
-
Natalie can predict her influx of clients with this paid package system: clients can book hourly sessions in advance.
-
A new source of income without Natalie having to be on site.
-
Tiers allow clients from different budgets to gain access to Natalie's services.
Create a video course for vocal training, publish it on paid course platforms for revenue
E-Learning Opportunities
-
Reach a wider audience without needing to be on site
-
Evergreen content that can be used for years after upload
-
Gain a percentage of revenue based on views
Designing features and categorising their importance for the business.
Design Sprint Quick MVPs
-
A series of HMWs were produced to tackle the poor user testing results.
-
Quick MVP sketches are categorised using MoSCoW method.
-
User Goals and Business Related Tasks are based around HCD (Human Centered Design).
Allow the users quickly make contact with Natalie with a 'Quick Call' option
Quick Phonecall
-
Main metric for the website is 'Clicks to Contact', a phone button widget could help clients make contact with Natalie.
-
The business owner rejects this idea due to wanting to filter the enquiries.
-
Business owner already has a system to audit the enquiry.
Natalie must do research on the event/gig to ensure credibility
How to be Contacted
-
The user goal is to allow clients to quickly gain access.
-
The business goal is to allow Natalie to filter which gigs she would like to perform at.
"I need to make sure that it's worth my time... I've been to gigs where they were so disorganised.."
- Natalie
The use of the Contact Form was then a validated choice. Natalie was able to filter out potential gigs whilst the user can seamlessly enquire for her services.
Lo-Fi Prototyping two versions to see which system the users prefer
A/B Wireframing
-
Matching Real-Life mechanics found in the real world
-
Implementing design features from social media platforms for learnability
-
Any historic cultural/ Ethnography influences
-
Combining features and designs from Low-End and High-End.
Judging the deployment time
and change fail percentage
on desired features
Ensuirng any changes can be fixed
and quickly redeployed
Referring to FMEA, certain features were implemented into the redesigned UX to ensure errors from past scenarios can be prevented. In order to determine the scale of the redesign, I commenced a workshop that audits the following features into these metrics:
-
Lead Time
-
Deploy Frequency
-
Mean Time to Restore (MTTR)
-
Change Fail Percentage
STAGE FOUR
PROTOTYPE
Lo-Fi Prototype Testing: Parameters
Length
8 - 10 minutes
Participants
8 Participants
Location
United Kingdom, London
Study Type
A/B Testing,
lo-fi
Which navigation system works the best?
A
B
Lo-fi Prototype Version B wins!
Insights from Lo-Fi Prototypes
Version 2 proved to be the most successful wireframe from these observations:
-
0.4% Error Rate
-
7 out of 8 participants found the business tasks within the first 15 seconds
-
Users claim the new user flow gave more confidence
-
Recollection of other platforms can be identified (Instagram's grid)
-
The lower click error rate
Business Owner wants to show the full reviews onto the website
Added Page for Reviews
-
Natalie had an array of full-page document reviews, she wants them present on the redesign
-
Data showed that the user does not need the full review, just a quote.
-
A new page was created for the reviews. Quoted versions of the testimonials were present on the home page.
Mobile version was priortised during lo-fi testing.
87.5% of users are mobile first
-
60% of all user goals are on the front page
-
No user testing on the lo-fi desktop version (due to time restraints)
-
Both desktop and mobile versions will be tested during the hi-fi stage
The UX has now been fixed. Next step, to redesign the Design System.
Redesigning The Design System
The user testers claimed that the art direction in the website was too obscure, owing to the amount type faces and colour schemes used. As the architectural information and user flow have been changed, the next stage is to redesign the design system.
A clash between designers and the business owner produces a mediocre design system.
Disagreeing to new Design System
The pastel identity will not make the platform score to its truest potential. The lack of contrasting colours will make the information cause difficulty to read.
Regardless of my input to show Natalie my concerns, her chosen design system followed through...
Hi-Fi Prototype Testing : Sentimental Scoring
Length
8 - 10 minutes
Participants
8 Participants
Location
United Kingdom, London
Study Type
Sentimental
Scoring
What do the users think about the design system?
Poor scores for the new design system, as predicted
Usability Study: Insight Identification
-
Low colour contrast causes difficulty when reading
-
No user would promote this website to others
-
Does not meet industry standards for the music sector
"Functionally it works better than the previous website...aesthetically, not great."
- User Tester
UX is affected by the Design System. Causes difficulty for business-related tasks
Low System Usability Score
-
Members agree that the UX works
-
Users had to 'finger pinch' zoom in to read text on mobile device
-
Social bar buttons proved too large, users would click on Twitter icon instead of Burger menu by accident.
Too many cooks: whole team editing the website at once halts progression due to unsaved changes
Coding and editing the website
-
All members tried to edit the site at the same time, which caused the other members to lose progress.
-
Tech debt began to build up attempting to debug code.
-
Proposed a timetable to prevent errors, each member had an allocated timeslot.
Business Owner's subjectiveness shrouds the user-centred journey in favour of 'pink pastel'.
Publishing and Testing the new site
-
Test the live website with unprecedented FTX (First Time Users)
-
20 - 30 users visited the site
-
Hoping for a redesign of the design system, attempting to convince the business owner to change it.
STAGE FIVE
TEST
Clicks to Contact and Revenue
Length
1 - 2 weeks
Participants
20 - 30 Participants
Location
United Kingdom, London
Study Type
Unmoderated usability testing
Scroll Mapping Hot Jar
The addition of HotJar allowed us to see the behavioural traits that the users have towards the new redesign.
36% of the users ignored the 'About Natalie' text on the desktop version of the website.
100% of the users were able to find an Enquiry Form to make contact with Natalie on both mobile and desktop versions.
83.1% read all the testimonials that were short quotes cycled on an automated carousel.
A behavioural trait recognised in the prototype segment was the user would automatically scroll down to the bottom of the page. Following this and the hierarchy from real-life mechanics, the website implemented this to ensure users found the contact details/ access to the enquiry form.
Business Owner's subjectiveness shrouds the user-centred journey in favour of 'pink pastel'.
Published Site Insights
These insights were collected after the launch of the product, which was affected by lockdowns. Covid - 19 posed new challenges for the entertainment industry, and Natalie's business was greatly affected too.
-
Site Sessions Increased by 24%
-
Bounce Rate increased to 50%
-
Clicks to contact decreased by 12%
Covid-19, lockdowns and social distancing
No on-site work
-
A combination of Covid -19 and the pastel design system are the results of low KPIs
-
The Music/Entertainment industry was greatly affected by lockdowns
-
Website is being placed on standby until lockdowns are lifted
Over One Year Later
Reaudit the current website
Redesign the 'pink pastel' website
Proposed Prototype
-
Natalie started gaining jobs for gigs on-site
-
Showcased a prototype for an updated version of the website
-
Business owner agreed to the new design
Design Principles
To prevent the previous endeavours of the pastel design system, strict design principles were introduced to upscale Natalie's website.
Altered User Journey
Upon reflecting on the user testing, I increased the number of actionable areas for 'Clicks to Contact'.
The behavioural trait of the users navigating to the right of the nav bar expecting to see a 'Contact' option has been answered: a dedicated page for making contact with Natalie via an embedded Enquiry Form.
1.1 Redesign Insights
Nav Bar and Social Bar
Fitts's law was implemented into the Nav Bar and Social Bar to ensure the was adequate amounts of spacing. Further micro-interactions were also presented due to the lack of informative feedback that the previous version lacked. Hover animations were introduced to the newly stylised social bar.
The nav bar also removed the black texture background in order to make the selected page stand out.
Contact Option in Nav Bar
The main metric for this platform was to record 'clicks to contact'. The previous rendition only had the contact forms. The new redesign offered two new ways to gain contact: 'contact' in the nav bar as well as a contact CTA.
Optimized Landing Page
A new approach to the visual hierarchy was introduced to allow the user to digest pieces of information. Gestalt principles were heavily used when redesigning the landing page. SEO-ranked keywords were also carefully chosen as the subheading. The sequence shows the order in which word receives the most web search traffic according to Google Adwords.
No Backgrounds
Image backgrounds evoked the dated platforms of MySpace and Bebo. Removing the image backgrounds will modernise the interface and ensure legibility of the text.
Viewing Patterns
The spacing was used to direct the user when navigating the website. The landing page uses the 'Z' pattern format to guide the user towards the CTA. The 'F' pattern for viewing is more prominently used on text-heavy pages, which is why the Services page uses this formation.
Overhaul of the design system has overwhelming positive response
Highly Scored Design System
-
Minimalistic design proves to be industry standard
-
User would promote this musician's website
-
Sensation of Safety and Security due to redesign
New website has landed musician to gain sponsorships
New Career In Austrailia
-
Moving to Australia due to the U.K. having a saturated market
-
Gained recognition from agencies, impressed by the website
-
NPS scored +90% and revenue increased by 15%
1.1 Product Deliverables
Overview
Overall, redesigning this musician's website was an insightful experience, one that was not as simplified as it could have been. The client's subjectiveness and desires made setbacks which prolonged production, however, due to the data collected, rational decision-making was established. Changing subjectiveness to objective-based thinking was the main challenge when working with Natalie.
Elements I learnt throughout this project:
The music/ entertainment industry
WCAG AAA system
In-depth Fintech options
E-learning platforms
Content creation for social media