Young Storytellers

Sparks creative self-discovery for young people through storytelling.

A new way for Young Storyteller mentors to connect with volunteers.An intuitive, accessible profile database for easier actor recruitment.

Client

Young Storytellers

role

UX / UI Designer

Duration

3 months (May - July 2021)

Process

UX research
Prototype and User testing
Iteration

Team

Jaylene Chung, Development and Engagement Director
Doug Mackay, Developer

About the project

Los Angeles based non-profit Young Storytellers partners children with supportive ‘head’ mentors to develop their writing skills and gain confidence through creative expression.

Objective
High-level goals

• Understand stakeholder’s current behavior
• Understand Head Mentors viewpoints
• Create an easy search interface with diversity and inclusion in mind

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.

Ux CHallenges

Head Mentors did not have an easy way to connect with actors outside of their network.

What were the issues?

• 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.

What were the constraints Given by the developer?

• 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.

Research and synthesis

How are Head Mentors currently casting their performers and what are the priority details for each actor?

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.

Comparative ANalysis

To understand how user details are prioritized, I analyzed the following in-depth profile platforms.

• 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.

Document thumbnail
See comparative summary
arrow
User profiles

The research made it evident that users and stakeholders prioritized casting differently. This was addressed by categorizing them into two profiles based on their behaviors.

Head Mentor
Experienced Young Storyteller volunteer | Acting background
Tasks performed:
• Recruits actors for Young Storyteller performances
• Coordinates play rehearsals
• Organizes script with Young Storytellers team
Primary goal:
• Recruit actor volunteers for performances based on availability.


Young Storyteller Facilitator

Administrative role | Primary contact for Head Mentors
Tasks performed:
• Provides support and resources for Head Mentors
• Updates actor profiles with notes, contact details, etc.
• Responsible for volunteer applications
Primary goal:
• Casting for performances be inclusive and diverse to accurately represent the elementary student body.

UX solutions

Provide Head Mentors with an actor profile database so they can easily recruit actors for performances.

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.

Exploration & Iteration

The volunteer application form needed a redesign to include important acting characteristics and distinguishing characteristics such as physical and neurological differences.

Priority takeaways

• 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.

Macro goal

The primary aim of the profile page is to easily recruit actor volunteers while integrating Young Storyteller’s values of diversity and inclusivity.

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.

Priority takeaways

• 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.

long-term business goals

A focused dashboard for 'Head Mentors' to access primary resources.

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.

Profile Database Prototype
Outcome

This was an awesome opportunity for the experience of working alongside a dedicated team. I learned some important takeaways from this project related to collaboration and business processes.

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.

"Marisa strikes the perfect balance of creativity, empathy, and technical know-how. She listened to the needs and anxieties of our team members, understood the overall vision of what we were building towards, and built a beautiful, user-friendly interface that will help us run our programs while reaching our diversity and inclusion goals."
- Jaylene Chung • Development & Engagement Directer • Young Storytellers

Process

Behind the scenes...

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.

Thank you for viewing.