UX / UI Designer
3 months (May - July 2021)
Prototype and User testing
Jaylene Chung, Development and Engagement Director
Doug Mackay, Developer
Provide Head Mentors with a profile database so they can easily cast actor volunteers for performances. How could the recruitment experience be streamlined for efficiency and depth? I led the design to allow users to search with specific criteria.
• Understand stakeholder’s current behavior
• Understand Head Mentors viewpoints
• Create an easy search interface with diversity and inclusion in mind
• Head mentors were not casting a diverse group, and ultimately not meeting Young Storyteller's goals.
• Young Storytellers want to emphasize the importance of diversity (across a multitude of characteristics) to represent the student body they are performing for.
• The actor recruiting was largely handled through emailing, an inefficient and non-scalable system.
• The backend capability is limited and couldn’t accommodate a user login.
• Any modification to a user’s account has to be manually entered by a Young Storyteller facilitator.
The goal was to understand how casting for the performances worked. What key experiences, traits, and skill-set were helpful in determining which actor to cast. It came to light from user interviews the following key insights:
1. Currently only receives actor name and email. Head Mentors would like transparency regarding the actor’s experience and capabilities to make casting easier.
2. Needs more agency in the recruitment process. The current behavior is to reach out via email to a YS facilitator, but this can cause planning delays and is not an efficient use of time for the coordinator.
3. Priority details are: An actor’s ethnic background, gender, and acting abilities.
• Profile photo is seen first, and name secondary, contact details as third.
• Profile card quick-view highlights priority details as bullet points for easy readability and when click “view profile” a pop-up window appears with longer descriptive content.
• Minimal 2 color design, 1 page layout.
• Consider prioritizing “search.” This should be the predominant tool seen as the results from searching are secondary.
Experienced Young Storyteller volunteer | Acting background
• Recruits actors for Young Storyteller performances
• Coordinates play rehearsals
• Organizes script with Young Storytellers team
• Recruit actor volunteers for performances based on availability.
Young Storyteller Facilitator
Administrative role | Primary contact for Head Mentors
• Provides support and resources for Head Mentors
• Updates actor profiles with notes, contact details, etc.
• Responsible for volunteer applications
• Casting for performances be inclusive and diverse to accurately represent the elementary student body.
Three primary questions informed the design strategy:
1. What are the quick snapshot details to display?
2. Is the necessary data currently collected?
3. How would the main user (Head Mentor) use this database?
What came through are:
Prioritize the search filter categories so users can quickly find an actor with specific characteristics.
Restructure the current application to capture key criteria from volunteers.
Easy interface and search browsing experience for users to quickly scan and connect with actors.
• Include progress bar on application to signify to the user: total amount of time and steps required to complete form.
• Redesign and update current application form to include relevant acting characteristics
• Include geographic map location plug-in as per Developer guidance.
• Integrate criteria to capture physical and neurological differences, special acting talents, and specific acting questions.
Several sessions of user testing and design review with primary stakeholders directed the priority takeaways that shaped the direction of the final version of the profile database.
• Include alternate view (card/list) for alternate browsing option.
• Adjust top-facing profile details to: Gender, Ethnic Background, and Experience.
• Modify 3 horizontal profile cards to 4, for efficient browsing.
• Large profile image to quickly identify actors for roles.
• Collapsed menu to include: specific talents, language, neurodiversity and disability.
While Young Storytellers is currently providing a central login dashboard, a future goal, is to create a dashboard that is unique to that particular head mentor user.
Include the developer early. Looping the developer in the initial conversation regarding design helped me to determine the feasibility of the direction.
Consider interrelated systems. The initial intention of this project was to formulate a design for the volunteer profile page only. Once research and user interviews began it became clear that the pre-existing application form needed to be updated.
Place clear visible labels within entry fields. I had initially designed the form entry fields with instructional placeholder text. After reading article, “Placeholders in Form Fields Are Harmful” from the Neilson Norman Group, I modified the placeholder text to be read as a descriptive example instead. Read article here.
Integrate company values in the design. The profile details are hierarchically placed with Young Storyteller’s values of cultivating an inclusive and diverse community.
The overall design involved many iterations after meetings with primary stakeholders. It was important to maintain up-to-date revisions with clear consistent communication. This project was also for Designlab’s UX academy, it involved student peer feedback and my mentor Chris Key provided tremendous guidance during the development.