top of page
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

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

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

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

Screenshot 2024-08-20 at 2.41.07 PM
Screenshot 2024-08-20 at 2.41.00 PM
Screenshot 2024-08-20 at 2.41.14 PM

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
about first mockup

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
about mobile

Sticker Sheet
 

Sticker sheet containing different shades of green, the font Museo, and icons

Impact

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.

bottom of page