top of page
Thumbnail of George Zachary Blecher's homepage

George Zachary Blecher

Based in Los Angeles, George Blecher is a talented multi-instrumentalist specializing in guitar, bass, piano, and ukulele.

 

He is looking to expand his client base and land more gigs.

The Situation

The Problem:
George's previous website wasn’t gaining much traction and didn’t offer potential clients enough information about him.

The Goals:

  • Increase website traction and gain clients and gigs 

  • Help users find a talented musician!

Constraints:

  • Use SquareSpace website builder

  • Stakeholder contract

Duration:

  • June 2024 to August 2024

The Solution

My solutions involve:
 
  • Refined website copy
  • Clearer access to his biography, booking information, and music
  • Redesigned style guide

Over a couple of months, the redesign increased his website's traffic by 58% and decreased its exit rate by 22%.​

Original website
Partial image of the original homescreen
Redesigned website

georgezachary.com

Research

Stakeholder interview

The project begins with a stakeholder interview. I ask George about key points of the project such as:

​​

  • What is the purpose of his website?

  • Does he have a business model I should be aware of?

  • What does success look like to him (KPIs)?

  • What are the project constraints?

  • Can he walk me through his current website? (What does he like or dislike about the current design?)

  • Are there any websites he’d like me to use as inspiration?

  • Who is his current clientele, and who does he want to attract?​

 

In sum, his website's purpose is to:

  • Showcase his services, professionalism, and qualifications

  • A way for potential clients to learn about and contact him

  • He operates on a freelance basis so more clients = more income

  • Clients are looking for a music instructor or gig musician

User interviews and affinity mapping

Having this information, I turn my attention to understanding his clients.

After conducting user interviews, I synthesize my findings to uncover their needs and motivations, paying particular attention to what they expect from a freelance musician and instructor.

User Interviews- Affinity Mapping_edited

Define

User and problem

Using user stories and problem statements, I create and get to know the personas, Sophie and Barry.

Persona artifact of Sophie (booker persona)
Persona artifact of Barry (student persona)

Sophie's statement:
​
"As someone looking for a freelance musician to team up with, I want to know more about the musician so that I can confidently request their services.

The information and traits I need to know about them include their reputation, reliability, professionalism, music style and overall aesthetic, personality and attitude, rates, and availability."

Barry's statement:
​
"As someone seeking a music instructor, I want to learn more about the instructor to ensure they are the best fit for me.

The information and traits I value in an instructor are their reputation and educational background, reliability, professionalism, music style, personality and attitude, rates, availability, and location."

Analyze

Heuristic analyses

 I conduct a heuristic analysis of George's current website, along with a review of competitors' sites, looking for opportunities to improve and enhance the user experience. Throughout this process, I consider the perspectives of the UX Designer, as well as Sophie, Barry, and George, ensuring every viewpoint is represented.

Competitor analyses

Solo artists

I look at independent artists' websites to see how they appeal to an audience.

Analysis of Biz Scaggs website
Analysis of Shannon Lay's website
Music instructors
Analysis of Brian Silverman's website
Key takeaways
 

  1. IA = Common page categories include Tour/Shows/Events, Music/ Discography, Store, About, Contact, Sessions/Lessons
     

  2. UI and Visual Design = Common elements include hero images of artist or album artwork, socials icons, music video thumbnails, testimonials, newsletters, simplicity is best, instructors' sites are text heavy

Analysis of Travis Raab's website
Original website
Analysis of George's original website. Screens shown are his homepage and About page
Key takeaways
 

  1. Clarity and context- copy needs to provide more context and details
     

  2. Need stronger CTAs
     

  3. Missing services pages- showcase upcoming events and info about services provided

Analysis of George's original website. Screens shown are his Music page and Contact page

Content audit

Looking at my findings from the heuristic analyses, I parse through George's website and document:

​​

1. What important information is missing? Any information we can remove?

​

2. How can the content be organized in the most efficient way (categories, hierarchies, labeling)

​

These results help with the sitemap, more about this after HMW questions.

Ideate

Ask HMW
(How Might We)?

At this point, I have a solid understanding of Sophie and Barry, the current state of the website, and the challenges we face. Next, I craft my HMW (How Might We) questions to help me ideate.

hmw_questions_edited.png

Information Architecture

I compile all the necessary elements based on my analyses, audit, and HMW responses, then organize and refine them. Additionally, I create user flows to visualize Sophie’s and Barry’s journeys. All of this culminates in the creation of the sitemap.

Image of website sitemap

Sketches

Referring to the sitemap, I begin sketching the website.

Sketches of "Lessons" and "Music" pages
Sketches of "Booking" page

Prototype

Wireframing
& Prototyping

It's time to put everything into action and wireframe my first iteration!

High-fidelity wireframe of homepage, first version
High-fidelity wireframe of About page, first version
High-fidelity wireframe of Contact page, first version
High-fidelity wireframe of Upcoming Events page first version
High-fidelity wireframe of Music page, first version

Change in direction

I meet with George to present the first version of high-fidelity wireframes. During our conversation, he informed me that he no longer wants a dedicated page for booking lessons. Instead, he’d like a single page that mentions both gigs and teaching lessons.

​

High-fidellity wireframe of "Lessons" page
High-fidellity wireframe of "Booking" page

The purpose of the page is now focused on the concept of booking time with George. After a couple of rounds of sketching and hypothesizing what terminology should be used, I created a page that presents all services offered by George Zachary Blecher.

High-fidellity wireframe of revised "Booking" page

Test

Testing and more

First round of usability testing

​

I conduct usability testing sessions with the first version of the website.

Key takeaways:
 

  1. The color brown is not favorable
     

  2. Boring layout
     

  3. Bad quality photos

Style Guide

I planned to keep the existing style guide, but user testing revealed that the color brown was not a fan favorite, which led to an updated style guide.

Updated style guide

Stakeholder meeting

The significant findings and change of style guide require another meeting with George.

​

When discussing the "Booking" page, George mentions that advertising his teaching services is a breach of contract with a company he works for. However, he still wants users to know that he teaches and where.

 

This presented a challenge, but the overall decision was to briefly mention it in his bio

Iterations Round II

Iterations made are: 
 

  1. Change style guide
     

  2. Removal of “Lessons” section

High-fidelity wireframe of Homepage. Second version.
High-fidelity wireframe of "Contact" page. Second version.
High-fidelity wireframe of "About" page. Second version.
High-fidelity wireframe of "Booking" page. Second version.
High-fidelity wireframe of "Events" page. Second version.
High-fidelity wireframe of "Music" page. Second version.

Testing Round II

Second round of usability testing

​

I conduct usability testing sessions with the second version of the website and find that:

​

  1. Solved visual design issues
     

  2. New issue: lengthy descriptions
     

  3. New issue: 66% confused by music section title layout

Iterations Round III

Iterations made:

​

  1. Change layout for "Music" page, Now mentions band title, the genre and instrument(s) he plays, and then a bio of the band
     

  2. Shortened bio
     

  3. Gave the user more opportunities to contact George

High-fidelity wireframe of homepage. Third version.
High-fidelity wireframe of "About" page. Third version.
High-fidelity wireframe of "Music" page. Third version.

Conclusion

The redesign brought clearer access to George's bio, booking information and music, in addition to exposing the need for a more appealing visual design. This redesign increased user engagement. His website saw a 58% traffic increase and the site’s overall exit rate decreased by 22%.

​​​

​

There were some unique challenges along the way, such as the influence of website templates and stakeholder contract restrictions. However, these obstacles, combined with George’s amazing personality, made this a truly memorable project!

​​

Video of homepage scroll

Video of homepage navigation

Thank you for reading my case study!

bottom of page