.png)
Zatcoff - Case Study
A re-design of a Broadway actress & vocal teacher's responsive website.
Video Presentation
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
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."
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.
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.
Ideate
Rapid Sketching
Business Goals & Parameters
Prototype & Refine
Paper Wireframes
 |  |  |
|---|
Mockups & Revisions
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.
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.
Sticker Sheet
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.