OVERVIEW
a webportal where executives can view audition clips in 1 convenient place
SUMMARYBreakdown Services is an agency that 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. I stopped working on this as I was assigned other projects.
SKILLS UTILIZEDUser Research, User Journey, Design System, Wire-framing, Prototyping, A/B Testing
TYPEProfessional
TOOLSSketch
TEAMMichael Tewasart (UI Designer & UX Researcher)
CHALLENGE
type-a folk with limited time getting lost in a clunky, inconsistent interface
PROBLEM
Our users, studio executives and casting directors, are having trouble navigating. They are unable to locate a specific info about a certain actor or project 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%. users have less friction navigating and more free time.
- Reduced redundant time spent on the site by about 8 minutes, freeing more time for the user to attend other matters. User satisfaction increased by 20%.
- Spearheaded a new design system to be implemented on other internal tools. Worked with stakeholders and different departments while balancing expectations and requests.
DESIGN PROCESS
weekly meetings with numerous studio executives
WEEKLY INTERVIEW
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 users are:
- Middle to elderly age.
- High net worth individuals in executive level positions of power.
- 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
during covid-19, in-person interviews became zoom interviews
INTERVIEW METHODOLOGY
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:
- 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
visually formatting how the user thinks & feels when they're using the software
AFFINITY MAPPING
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 MAPPING
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.
insights
2 things user want: consistency & convenience
WHAT USERS TRULY WANTED
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
a 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:
- 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) and can't have any graphics overlaid on top.
ITERATIONS
adding 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.
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.
NEW STANDARDIZED ROW DESIGN
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.
HI-FID MOCKUPS
final designs
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.
FINAL THOUGHTS
designing for niche audience opened my eyes on how audience reacts to new info
IMPORTANCE OF USER TESTING & INTERVIEWING
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 a design.
ADAPTIVITY DURING A PANDEMICHalfway throughout the design process, the COVID-19 pandemic forced all office workers to work remotely. While communication road blocks did occur, eventually I was able to maintain productivity and a consistent level of good communication.
FOLLOWING CONVENTIONAL DESIGNSimple design elements that convey can visually convey informations as bold text and restructured dropdown can radically ensure a better overall user experience. Their presence can enhance user interaction and comprehension significantly.
