Breakdown Services
Breakdown Services provides casting services (script distribution, project and audition management) for studios executives, media networks, casting directors, and actors. Studio executives use a web portal called Enterprise to view and manage audition tapes sent from casting directors. My task was to improve the existing workflow and address any pain-points, working alongside stakeholders and managers.
TIMEFRAME
March 2019 - May 2021
March 2019 - May 2021
TOOLS
Sketch, InVision, Maze
Sketch, InVision, Maze
SKILLS UTILIZED
User Research, Customer Journey Map, Wire-framing, Prototyping, A/B Testing
User Research, Customer Journey Map, Wire-framing, Prototyping, A/B Testing
TEAM
Michael Tewasart (UI Designer & UX Researcher)
Michael Tewasart (UI Designer & UX Researcher)
Challenge
Type-a folk w/ limited time getting lost in a clunky, inconsistent interface
PROBLEM
Our users, studio executives and casting directors, are having trouble navigating. They can't locate an actor's / project's specific info and they don't know when projects have been updated with the most recent audition.
SOLUTION
Redesign the current existing workflow that addresses the user's pain points and make the browsing experience more pleasant.
Our users, studio executives and casting directors, are having trouble navigating. They can't locate an actor's / project's specific info and they don't know when projects have been updated with the most recent audition.
SOLUTION
Redesign the current existing workflow that addresses the user's pain points and make the browsing experience more pleasant.
Final Impact
User satisfaction ⇧ by 20% (less friction navigating & more free time)
- Mentored other designers on design systems, components, documentation, and visual hierarchy.
- Streamlined communication between different departments (in different time zones) and managed expectations while balancing their feedback and customer needs.
- Increased inclusivity of the process by making it work with blind patients.
Design Process
Weekly meetings with numerous studio executives
WEEKLY INTERVIEWS
As this was my 1st professional design jobs, I had to approach this task with due diligence as not a lot of users use this software. Relationships were already established with studio heads & Breakdown Services, so it was rather easy to conduct the research.
As this was my 1st professional design jobs, I had to approach this task with due diligence as not a lot of users use this software. Relationships were already established with studio heads & Breakdown Services, so it was rather easy to conduct the research.
WEEKLY 4-STEP DESIGN PROCESS
Each approved iteration was presented by next week, as my goal is to gain a better understanding of how our software can be slowly improved. Main demographics of our use are:
Each approved iteration was presented by next week, as my goal is to gain a better understanding of how our software can be slowly improved. Main demographics of our use are:
- Middle to elderly age.
- High net worth individuals in executive level positions of power.
- Working with developers to make sure the mark-ups can be read with screen readers (h1, h2, h3, title).
- Web-illiterate and not tech savvy (or too busy to learn).
- Incredibly busy with a packed calendar full of meetings (and flooded with hundreds of emails).
User Research
Zoom interviews during COVID-19
INTERVIEW METHODOLOGY
Questions were asked either verbally or sent via Google Form. Examples were:
Questions were asked either verbally or sent via Google Form. Examples were:
- What features would you like to make your browsing experience easier?
- What features on the current design do you find confusing or hard to use?
- How often do you use the internet? How tech-literate are you? What is your typings speed?
- How is your current work lifestyle?
PAIN-POINTS
After interviewing, the following specific key insights were discovered:
After interviewing, the following specific key insights were discovered:
- No way knowing WHEN new media gets uploaded in their respective folder (directory).
- No feature to mark media the user has finished viewing.
- No feature to watch un-viewed audition media.
- Lack of navigational feature (no breadcrumb).
- No coherant, standardize design system.
- No visual distinction between roles, projects, and actors.
User Mapping
Formatting how the user thinks & feels when they're using the software
AFFINITY MAPS
I synthesize my findings by grouping similar trends and thoughts that came from the weekly interviews into a more coherent format. This was my first professional UX design job, so I wanted to be as concise and clear as possible.
I synthesize my findings by grouping similar trends and thoughts that came from the weekly interviews into a more coherent format. This was my first professional UX design job, so I wanted to be as concise and clear as possible.
EMPATHY MAPS
An empathy map was created to organized the user's pain points, allowing me to process helped me organize each pain point by it's characteristic.
An empathy map was created to organized the user's pain points, allowing me to process helped me organize each pain point by it's characteristic.
Insight
2 things user want: consistency & convenience
WHAT USERS TRULY WANT
From the research, the most insight I've gleamed is that our users primary want 2 things: consistency and convenience. Why? The site currently looks like a relic from the 90s, with inconsistent padding & doesn't display any information.These 2 principals will be the primary focal points when revamping the web portal.
From the research, the most insight I've gleamed is that our users primary want 2 things: consistency and convenience. Why? The site currently looks like a relic from the 90s, with inconsistent padding & doesn't display any information.These 2 principals will be the primary focal points when revamping the web portal.
Style Guidelines
Design system for all software applications
VISUAL CONSISTENCY
A visual hierarchy was developed to establish consistency across all pages to allow the user to read info without any confusion. Pre-existing styles included:
A visual hierarchy was developed to establish consistency across all pages to allow the user to read info without any confusion. Pre-existing styles included:
- Actor names are capitalized 100%. (this is an entertainment standard)
- Long project and role names are truncated.
- Headshots of actors are in an 8:9 ratio (96px x 108px) & can't have any graphics overlaid on top.
Iterations
New features for practicality & efficiency
LOW FIDELITY SKETCHES
Redesigning several important components was a difficult task for me, so I had to brainstorm with some ideas. The biggest challenge was determining whether the "roles" section should have their own icon. The stakeholders and I went back and forth about using a drama mask, but that was ultimately scrapped as it seemed to generic.
Redesigning several important components was a difficult task for me, so I had to brainstorm with some ideas. The biggest challenge was determining whether the "roles" section should have their own icon. The stakeholders and I went back and forth about using a drama mask, but that was ultimately scrapped as it seemed to generic.
DROPDOWN DESIGN
Previously, the user would have to toggle between searching for Actors or Projects. With the latest design, all of that has been streamlined into 1. Breadcrumbs have been added underneath sections to add more context as to where it is in the directory.
Previously, the user would have to toggle between searching for Actors or Projects. With the latest design, all of that has been streamlined into 1. Breadcrumbs have been added underneath sections to add more context as to where it is in the directory.
NEW ROW DESIGN
New content will now have text bold (similar to Gmail). Several features were added:
New content will now have text bold (similar to Gmail). Several features were added:
- "Unviewed" hotkey that allows users to automatically view a filtered list of unviewed auditions.
- "Mark as Viewed" hotkey that allows user to mark all media inside a project as viewed, removing the bold effect.
- Icons are now more interactive, and will "open" when the user clicks to expand a project.
High Fidelity Mockups
Final design
ADDING THE BELLS & WHISTLES
As the web portal was already in place by the time I was working on it, high fidelity wire-frames were created to address the pain points and increase user experience.
As the web portal was already in place by the time I was working on it, high fidelity wire-frames were created to address the pain points and increase user experience.
Final Thoughts
A niche audience opened my eyes on how audience reacts to info
UX OUTSIDE THE SCREEN
Knowing who you're designing for and how they interact with your product is just as important as knowing how to design. Asking the important questions can make or break the design.
ADAPTIVITY
COVID-19 forced us to work remotely. While communication road blocks occur, eventually I was able to maintain productivity and a consistent level of good communication.
Knowing who you're designing for and how they interact with your product is just as important as knowing how to design. Asking the important questions can make or break the design.
ADAPTIVITY
COVID-19 forced us to work remotely. While communication road blocks occur, eventually I was able to maintain productivity and a consistent level of good communication.