Computer screen showing the homepage of Rachel Zatcoff.com

Zatcoff - Case Study

A re-design of a Broadway actress & vocal teacher's responsive website.

Overview

Problem

Rachel Zatcoff, a Broadway Actress and voice teacher wants to improve her website so that casting directors and students alike can learn more about her and contact her for employment opportunities.

Goal

Re-design Zatcoff's website to showcase and promote her acting and teaching skills in a cohesive and enjoyable design that meets Zatcoff's requirements and personal brand.

Project Details

Timeline: 2 Week Project, July 26th - August 9th 2024

My Roles: UX Designer, UX Researcher

My Process: Empathize, Define, Ideate, Prototype & Refine

Empathize

Design Analysis of Original Site

Main Takeaways:

Low contrast text
Missing headings
Inconsistent button style
Misleading typographic variety & hierarchy
Unclear text, including contact info & button text
Unclear groupings
Excessive clicks to get to resumé
Unexpected navigation paths
Missing signifiers of below the fold content
Missing Links

Indepth Analysis

Synthesizing Data into Pain Points

Post its grouped into the categories Inaccessible, Incohesive, Confusing, and Difficult to us

Accessibility

Low-contrast text and lack of headings make the design less accessible.

We can make the design more accessible and readable, which will help users understand the content of the pages.

Unity

Inconsistent visual weight and hierarchy across buttons and text make the design more confusing.

We can establish better unity across the design, which will help users understand where to focus and how to perform desired actions.

Clarity

Contradictory visual groupings, containment, and text choices make the design unclear and sometimes misleading.

We can establish clarity with text and visual cues across the design, which will help users confidently and comfortably predict the results of their actions.

User Flow

Unnecessary steps, lack of signifiers, and unpredictable navigation make the user flow challenging.

We can make the design easier to use, which will help users effortlessly navigate the site.

Personas

Zuri Harris

About:

Age: 20

Career: Musical Theatre Student

Background:

Zuri is a young student studying musical theatre at NYU. When Zatcoff came to NYU to do a workshop for her class, Zuri learned a lot and felt very inspired. Zuri decided she wanted to take more classes with Zatcoff, so after class she went to the school library to look up Zatcoff's website so that she could find out how to take more classes with Zatcoff.

Frustrations:

"I'm unclear about how to contact Zatcoff for a lesson... her agent's info is under the "Contact Me" section, but her email is listed in the "Teaching" section... it also seems like social media may be the way to go but I don't know if that's unprofessional."

A young student holding a piece of sheet music and singing in a class

Matt Smith

About:

Age: 64

Career: Casting Director

Background:

Matt is an NYC casting director, currently casting a Broadway production of Nine. He is looking for people to bring in to audition and remembers Zatcoff from a recent audition she did for him for Mary Poppins. He remembers her singing really well but can't recall weather or not she has the right look for the role in Nine, or enough experience to take on a lead role. He quickly brings up Zatcoff's website to see her picture and resumé, and check who her agents are so he can contact them and set up an appointment.

Frustrations:

"I brought this website up on my phone but I can barely read it in this lighting! I have no idea what it says. I want to check out Zatcoff's resumé, but I don't know if it will download or not... hopefully not because I don't have much data. I clicked it and it just took me to another page that has a different resumé button. What the heck? I clicked resumé on this new page and it did nothing, but it looks like a button. I guess I'll try the download button below it? This is a pain"

Natalia Fairmont

About:

Age: 35

Career: Theatre Teacher

Background:

Natalia is a musical theatre teacher at a high school in North Carolina. They want to bring in a Broadway performer to do a workshop with their students at the end of the year as a special treat. They recently organized a school field trip to see Phantom of the Opera on Broadway before it closed, so they are hoping to find someone who has been in Phantom. A google search leads Natalia to Zatcoff's website, where they see that Zatcoff is a teacher who starred in Phantom on Broadway. They look for more information about Zatcoff's teaching experience, so they can contact her to set up a masterclass.

Frustrations:

"I'm looking for reviews for teaching but I can't find any? They must be around here somewhere. There is so much going on on these pages I don't know where to look. I'm trying to skim her teaching experience but everything looks the same so I'm not sure what to focus on. Oh I found the reviews! Why are they so hidden? I'm trying to skim them but the Broadway show names are jumping out at me, instead of positive things about Zatcoff."

Define

User Stories

Zuri Harris

User Story:

As an aspiring theatre performer, I want to contact Zatcoff about setting up voice lessons, so that I can be trained by a Broadway star and make my dreams of performing on Broadway come true.

A young woman holding a piece of sheet music, singing in a class

Problem & Hypothesis Statements

Zuri Harris

Problem Statement:

Zuri is an aspiring theatre performer who needs a clear way to contact Zatcoff because she wants to set up voice lessons and is unsure what will happen if she contacts Zatcoff through her agent, social media, or email address.

Hypothesis Statement:

If Zuri can use Zatcoff's website to find clear contact information, then she will be able to confidently and comfortably reach out to Zatcoff to set up voice lessons.

Young woman holding sheet music, singing in a class

Matt Smith

Problem Statement:

Matt is a Casting Director who needs an easy and effortless way to glance at Zatcoff's photo, resumé, and agency on his phone, because he has a lot of people to get to and doesn't have a lot of time or energy to spend on one person.

Hypothesis Statement:

If Matt can use Zatcoff's website to easily and effortlessly view her important information, then he will be able to quickly confirm Zatcoff is right for the audition and set up an appointment.

Natalia Fairmont

Problem Statement:

Natalia is a high school theatre teacher who needs to know where to find information on Zatcoff's website because they want to figure out if Zatcoff is a good match to give a masterclass to their students.

Hypothesis Statement:

If Natalia can use Zatcoff's website to find important information about her teaching and performing credentials, than they will be able to understand who Zatcoff is and how to hire her to give a masterclass to their students.

Ideate

Rapid Sketching

Sketches on post it notes of website designs for Rachel Zatcoff.com

Business Goals & Parameters

A list of goals including: target casting directors, new students, and masterclass recruiters.

A list of business parameters including must contain about page, resumé, contact and teaching info.

Prototype & Refine

Paper Wireframes

Mockups & Revisions

Mockup of the homepage for Rachel Zatcoff.com

Business Meeting Takeaways:

Misplaced focus from the box around "vocal studio," but still need a way to differentiate vocal studio page.
- Added a dividing line.

Orange text didn't fit the branding needs.
- Switched to green as a more earthy color.

Client wanted name more prominent and professional.
- I revised it to larger and title case.

Together we revised the images to provide a contrasting view that better showcases Zatcoff.

Final draft of the homepage for Rachel Zatcoff.com

Mobile versions of the homepage for Rachel Zatcoff.com

Business Meeting Takeaways:

Client wanted to include social media handles.
- Added social media links through buttons.

Revisiting our user stories, I revised the design to add a downloadable resumé to the "about" page to make it easier for casting directors to navigate.

I revised the design to include the colors and fonts that bring out the client's earthy brand.

Mockup of the "about" page for Rachel Zatcoff.com

Sticker Sheet

Impact

Visit Live Website

Client Testimonial:

"Working with Sammy to design my website was so much fun! I say working with because she set up meetings to discuss my wants/needs which really made it feel like a collaborative effort. She came incredibly prepared with many different options, creative ideas, and a deep knowledge of what works and what doesn’t. She was so easy to talk to about my vision for the site, and what she produced as the final result far exceeded all that I could have wanted!"

-Rachel Zatcoff, Broadway Actress & Voice Teacher

Addressing Pain Points

Created an accessible / readable design

Helped users effortlessly navigate

Established unity & clarity

Challenges

The client was opposed to having a scrolling site, which my research showed to be an industry standard for acting sites. However, upon conducting my competitive audit I found that actors in more direct competition with my client, based on age and experience levels, leaned towards a previous industry pattern that used tabbed pages. Although some users, like up and coming casting directors, would expect a scrolling site, it became clear that there was variety amongst generations, and so an experienced casting director looking at seasoned professionals' sites would expect tab navigation. Since my client fit into this seasoned professional category, I felt confident proceeding with the navigation she requested. Another benefit of this navigation was that it would appeal to users who aren't used to a scrolling site, such as parents of perspective students, or teachers looking for a masterclass instructor.

Differentiating between the "acting" and "teaching" portions of the site. I first played around with the idea of a landing page, but after discovering personas that would likely utilize both parts of the site (such as a student who wants to view performing credentials, or a masterclass recruiter who wants to view both performance and teaching credentials) I leaned towards a prominent button in the top corner. I then refined this to a simple line to separate the teaching tab and acting tabs. This design didn't draw unneeded emphasis to either side, but provided distinction between both sides.

Personal Growth

One thing I learned was that it was very useful to write down key words and phrases the client said during meetings. Though these key words might not have been strict business goals, they immensely helped me understand the client's vision, which got us on the same page very early on and made the process more efficient.

In the future I would try to take more time before making mockups to discus the client's branding and any specific color choices. Establishing these decisions at an earlier time will help me design more efficiently and effectively.

Back to Portfolio