‘Prepio’Webapp: Transparency and motivation for rehearsals

IRONHACK Final Project (UX)

Melitta Melzer
Nov 1 · 8 min read

For the final project at Ironhack UX/UI Bootcamp, I chose to design a product based on one of my passions: theatre and music. Within two weeks, I created a prototype and brand for a progressive WebApp that can help creative groups prepare and plan their rehearsals, keep track of their agenda and gain an overview of who is attending.

The problems when rehearsing with a large group of people

For more than 7 years I have been part of a hobby theatre group, taking a lot of different roles from on-stage to backstage and organization. The problem I noticed throughout the entire time, is how difficult it is to keep up the motivation, communicate and roll out a rehearsal plan. People would drop out at the last minute or not turn up without notice. There were too many channels used for communication and a lack of transparency on the agenda. With all these difficulties I was wondering: Do other groups experience the same struggles?

To explore and solve these problems further, I worked my way along the five stages of the Design Thinking Process.

Excerpt from survey results done with Typeform

Research

Survey

I started my research with a survey to gather more information on how people organize themselves in a group and what frustrations they are experiencing. From the results I learned that:

85% of people feel like they need to be better prepared for rehersal and know what to prepare exactly.

65% identify the biggest obstacle to be people not attending.

50% get frustrated with different levels of commitment of other members.

50% feel lost due to an overwhelming amount of different information on different channels.

Interviews

The results from the survey confirmed that other groups struggle with similar problems, to an extent that surprised me. In the next step, I wanted to learn why people are late and how they and other team members feel about it in particular. I interviewed a range of people from different backgrounds, such as a band organizer, a football team member, a former karate trainer, a dance teacher, various members of different theatre groups and a musician giving gigs with his friends. Among other questions, I asked:

Why are people not attending? How does that make you feel?

What are the consequences for the group and the project?

How do you prepare your rehearsal? How successful is it?

The interviews helped to target some groups in particular as the problem seemed to be more relevant for larger groups that don’t have a supervisor. Here are some of the key findings from the interviews:

If lots of people drop out short notice, it reduces the motivation of everybody else.

Peoples motivation and dedication increases as the deadline (to finish the project) comes closer.

If you want members to remember something, you have to write it down and remind them on a regular basis.

Some members don’t practice at home enough which leaves the group divided into different levels of advancement.

The group needs a clear goal that everybody is comitted to.

Affinity Diagram

Organizing Data

To organize and interpret all my collected data, I collected the information in an Affinity Diagram and added How-Might-We Statements. Together with some of the people I interviewed, the help of my peers at Ironhack and the quantitative findings from the survey, I was able to prioritize on three key problems:

№1 How might we create more transparency about who is attending?

№2 How might we keep up the motivation & commitment?

№3 How might we create an easy overview on all relevant information to keep everyone on the same page?

Primary, Secondary & Tertiary Personas

Empathizing

Personas & Problem Statements

To empathize with potential users and narrow down to a certain target group, I created three Personas. An Empathy Map Canvas helped me to understand their behavior better. For these three personas, the Problem Statements are:

Noemi needs an easy way to keep track of who will be attending the rehearsal, so she can plan the session most effectively.

Julie needs a quick way to learn what the agenda and tasks for the rehearsal are, because she wants to prepare herself at home. She also needs to know what to practice, in case she can not attend because she wants to contribute to the groups process even if she can not be there.

Julie also needs an easy way to let people know, if she can not make it, because she does not want to communicate it on too many different channels and risk the information getting lost.

Phil needs more transparency to know what he can effectively contribute to the team because he does not want to waste his energy. He also needs to know, how the team is progressing, because it will keep up his motivation.

Lean UX Canvas to create an overview of the project’s specs

Defining

Hypothesis statements

I believe that creating better transparency on attendees, information and tasks for all members of the group will acchieve a better working atmosphere, increase productivity and lead members to be more comitted and motivated. I know I am right, when more members are attending rehearsals propperly prepared and the group feels more united as a team.

The problem of how to get people to attend

When digging into why people are not attending, I found that in 3/4 of all cases, their work, school projects or illness get in the way. Life happens and some things can not be prevented. So I made it my commitment to keep members on track with what is happening in the group when they can not attend and to give them a chance to still contribute to the projects.

Quick drafts and Wireframes

Ideating

I did a couple of exercises such as the Crazy Eights and Ideating for Bad Ideas to generate as many ideas as possible. From a large list of suggestions, I asked my peers to help me rate the ideas they find most relevant for my three personas. I also checked up with some of the people I interviewed, to ask for their input. The most relevant ideas were:

List of attendees for upcoming rehearsals.

Option to sign off from upcoming rehearsals.

Overview on tasks prepare for upcoming rehearsals.

Agenda for upcoming rehearsals.

Comittees and roles within the group.

Overview of relevant group information, such as list of members.

Option to give feedback on past rehearsals.

Clearly communicate and remind people of the goal, the group is working on to keep everybody comitted and united.

Draft of the sitemap

Card sorting & Sitemap

From the list of ideas, I created cards for a Card Sorting exercise. The results from six people sorting the cards into different sections informed me on how to organize the Sitemap.

Draft of 3 different User Flows

User Flow

I created the User Flows based on the goals of my Personas and different entry points into the WebApp.

№1 The Administrator (Persona Noemi) is setting up the groups profile. He/She can choose a theme and invite members. In a second step, the administrator can also create a first rehearsal.

№2 The member (Personas Julie and Phil) opens the invitation link he/she recieved to join the group. Now the user can set up personal information and notification settings. After successfully creating the profile, he/she can freely roam the WebApp.

№3 The member (Persona Julie) recieves a notification as a reminder of the upcoming rehearsal. He/She enters the WebApp, signs off for next weeks rehearsal and adds a feedback for last week.

Paper Prototype & Mid-fidelity Prototype

Prototyping & Testing

Paper Prototype

Based on the Sitemap, I created a Paper Prototype to test with a few people. Users were given a task based on the User Flow: Sign off from the upcoming rehearsal and add feedback to rehearsal from last week. Here is what I have learned:

After entering the Webapp, users get distracted by the team's goal and forget what the task was.

Users request to send annonymous feedback to the admin as well, rather than posting it publicly.

Users request an integration for Google Calendar.

Users request adding a countdown for upcoming rehearsals or shows.

Users emphazise that they would like to have an overview on upcoming shows.

Users request to add a dashboard as the starting-point.

Mid-Fidelity Prototype

I integrated all the Feedback and the observations from testing into the Mid-fidelity Prototype. The ‘Mid-Fi’ served as a first digital foundation for the WebApp. Using the Marvel App, I asked people to fulfill the same task given for the Paper Prototype and observed their behavior. It validated that I could fix most of the issues from the earlier prototype and was a great chance to see how users would interact with their phones. This phase of testing led me to optimize the usability early on, such as increasing the size of buttons and other elements and choosing the right font size.

Prepio Styletile, Illustration by freepik.com

Branding & High Fidelity Prototype

When developing a Brand Design and UI, I started by creating Moodboards and collecting a list of Brand Attributes. I proceeded to design a number of Style Tiles and asked my peers to describe the attributes they associate with the designs and choose the style that resembles the brand attributes best.

Based on the chosen style tile, I created the Style Guide and High Fidelity Screens. For Micro-Animations and transitions, I used the Principle App.

The biggest challenge was to find a suitable, available name for the Brand. I decided to create a mindmap with all terms, that relate to the topic of the WebApp and used it as a sandbox to build different names. From a list of over 30 variations, I picked a top 5 selection and asked my peers to vote for their favorite. With an overwhelming majority, “Prepio” was chosen as a name for the product.

Presentation & Feedback

After two weeks of intense work, I presented my project and feel proud to be elected a finalist by my peers. I got the great opportunity to present my solutions to over a hundred people at the “Hackshow” and received great feedback, that sparks new ideas, and even requests to develop and release the product.

The MVP I created serves as a solid foundation with lots of potentials to add more features. The next steps would be to develop and test the administrator's perspective, adding high fidelity screens for the setup processes and creating different design themes to choose from, to make the style adjustable to the group's character.

This project was a great opportunity to put my knowledge to the test and practice all the methods I learned at the Ironhack UX/UI Bootcamp.

Thank you for reading!

Melitta Melzer

Written by

UX/UI Designer in Berlin ❘ Bikepacker

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade