Prova — A fun and social way to practice your instrument while keeping track of your progress

13 min read

ROLE: Strategy, Research, UX Design, UI Design, Branding

PROJECT SCOPE: 4 Weeks (12/2018 - 1/2019)

TOOLS: Pencil + Paper, Sketch, Marvel, Adobe Illustrator, inVision

BACKGROUND

If you have played an instrument before you probably know a thing or two about practicing music. It’s not easy. It takes time and organized discipline plus consistency to achieve good enough results that you’re inclined to keep going. Some of you that are reading this probably quit before getting to that point, while others continued their training with private teachers along the way to catch an advantage and get better at their instruments, and then quit. Some of us kept going.

As a musician and a designer, I have often noticed when students do practice more, their technique and self-confidence improves dramatically, compared to weeks that they don’t practice enough.

I have seen students fall behind on work and then find the material too difficult to grasp without having finished the prior assignment. I can also say that the best students are the ones who practice on a regular basis. Malcolm Gladwell once said it takes 10,000 hours to become a master at anything. Though argued, this holds especially true for students practicing music, for its requirements around technical mastery.

This case study explores how I applied Design Thinking to solve a connection issue between teachers and their students as well as how they share it with their friends and social networks.

THE CHALLENGE

I conducted an 80-hour design sprint to research, define and prototype a solution that would create a feedback loop between teachers and students so they can track their goals and practice more effectively.Problem: Teachers have no way of tracking student progress in between lessons, as they usually only see their private students once a week and don’t know whether or not they’re practicing their assignments before their next lesson.

Design Process

1.Research2.Define3.Ideate4.Prototype5.Test

Phase 1: Research

MARKET RESEARCH 

It is no secret that practice makes permanent. Studies show that daily practice can dramatically increase the level of learning and retaining information. Prova aims to bridge the gap between teacher and student by monitoring and encouraging progress between both parties involved.

Prova is Turkish for ‘practice’

I wanted to get direct feedback from teachers and students but first I did some secondary research to gather information around the industry.

COMPETITIVE ANALYSIS

Currently, there are many music productivity apps that are geared towards helping young and professional musicians as well as hobbyists. Most of these apps are geared towards making music and are able to engage us effectively. I first looked at a few already existing apps that are similar in what they’re trying to solve.

The main takeaways from the competitive analysis were finding out that there are not many collaborative features or any sort of calendar integration when it came to similar apps. It also gave us a good look into what were some standard features that users would come to expect to have.

While there is starting to become a market for music practice apps in the form of logging practice and journaling notes, there is only a handful that has not become as widely used as other popular apps. This presents an opportunity in how we can better address user needs for musicians and students learning music.

Pianist Lang Lang famously said that when learning an instrument 90% is practice and 10% is talent. When it comes to practicing an instrument it can be hard to keep on track and stay motivated. For more serious students, parents hire private teachers that see students usually once per week. But studies show it’s not the teacher's job to motivate people but to create the environments in which people will motivate themselves. Ten minutes of focused practice can be just as valuable as an hour of mindless practice.

PROVISIONAL PERSONAS

Up to this point, I made some serious assumptions around our problem space and how I defined our users to be in the real world. I had to zoom out to get a clearer view. I created a few provisional personas around my assumptions so I could see at a glance who my uses would be. I then planned for my interviews so I could test my assumptions with real students and teachers.

USER INTERVIEWS

I conducted research with 8 students who get musical assignments regularly from their teachers and have to practice their instruments for concerts and activities they’re involved in.

Rather than conducting the interview like a Q/A session, I wanted to get as much as qualitative feedback as possible from the participants. Conversations were natural as I tried to draw out from them, that special detail to give me a new clue in how I can clearly understand their pain points.

After I talked to a few students I had come to a conclusion. This was largely out of the students telling me one or more of the same thing. I conducted a second round of interviews with a narrowed-down scope, looking for more specific answers that same day. From there I went on to interview 4 teachers who shared with me their personal thoughts and feelings around their students and how they’re able to engage them.

Phase 2: Define

I had a lot of information and there were clear pain points which students experienced and also some great insight into what makes practicing fun for them and how they see their world. I love this part of a design thinking sprint. It lets you take a further step back and closely look into every shared bit of detail with your users.

EMPATHY MAP

Empathy mapping leads to gaining new insight into our users in a communicative and organized way. It is a visual tool to encourage conversations together so we can understand our users.

I created an empathy map to inform me of who my users really are. At this point, I was able to validate my assumptions that would self create our primary persona that we would be hoping to solve the problem for.

PERSONA 1

I had gathered enough insight at this point to define my users in two distinct personal groups: The teacher and the student. Our primary persona became the teacher, who wants to be able to assign work and keep track of her students’ progress. It wouldn’t make sense to have the student advocate for a product that the teacher should use, rather the teacher can encourage all of her students to use the app if targeted effectively.


PERSONA 2

Our second persona is the student, Alex. His needs are different than the first persona because Alex is looking to be rewarded for his good behavior by choosing to practice and get feedback from his teacher and from his friends. This persona represents our target younger group while highlighting their needs and overall pain points that were discovered.


USER JOURNEY MAP

Following the creation of these two personas, I wanted to zoom in and take a deep look into what the everyday life looks like for each user and how we could effectively target their pain point throughout each stage of the process of getting them to acquire and then support the app by advocating for it.

The user journey mapping exercise is a great tool to effectively target solutions around pain points users face when getting to know and use your products and services.


From the data gathered from all of our research so far, I created a separate journey map for each persona to address the needs of each target group. The exercise helped define a clear list of features and services we can build while uncovering new business opportunities. Clearing way to ideate solutions around uncovered problems.

User Journey Map 2 - The Student

Phase 3: Ideate

HMW STATEMENTS

Once I knew who my users are I was ready to reframe their problems into statements that could evoke possibility.  When you start framing problems in such a way that they present themselves as opportunities, things start to change in the room. People will usually notice that if they’re able to shift their minds into a growth mindset they’re able to think more freely and gather more ideas around possibilities that might or might not work. The point is, you come up with as many ideas freely as you can to see which ones really stick at the end of the day.

I wrote down maybe 50 different how might we statements then narrowed down to my most important top two to address first as our value proposition:

1. How might we help teachers rethink how they can help their students to keep track of their progress and activate a new found joy and sense of accountability to practice their instruments?

2. How might we facilitate a feedback loop between the teacher and the student?


CRAZY 8THS

Up until this point, I hadn’t formulated any solutions or had clearly defined what the problem we’re trying to solve really was.  

From there I went on to do a crazy 8th’s exercise where you put a time limit and generate as many ideas as possible by sketching out rough concepts of ideas. With time they start to make sense and pull you in the right direction of what you want to build or aim to build. It’s really good to let your mind loose so that you can capture bits of information that would otherwise seem unimportant or not worth considering.

STORYBOARDING

I came up with a regular scenario that takes place during a lesson a teacher is having with their student. The student doesn’t feel prepared and isn’t practicing enough. The teacher has found the app and decides to give it a go. He assigns work through the app he has already tried out, that sends the student an email to download the app. Upon using the app Alex notices that he is able to track his progress and share recordings of his practicing with his teacher and friends. He practices more and feels great about the results next week.

The above storyboard made it clear what our value proposition was. We had to figure out a way for teachers to assign work for students directly through the app so both teachers and students can track their progress. The students wanted it to make practicing more fun and social and be rewarded for good practice habits, while teachers wanted quick access of their dashboard of things to do including booking their students and track how they’re performing over the course of their study.

USER FLOW

Following the path detailed by the storyboard, I mapped out a user flow between the teacher and the student showing how we can facilitate a feedback loop between two parties involved.

Phase 4: Prototype

The user flow gave me a list of items and functions to build and would inform the flow of the prototype that I would test with users. I then went on to sketch rough concepts of wireframes and designs, inspired by the rough concepts earlier. During this time I collected various sources of inspiration from my personal collections as well as all around the web.

LOW-FIDELITY PROTOTYPE

I built a paper prototype of all the actions taken in the user flow and uploaded the screens with my phone into the Marvel POP app on my iPhone.As messy as these were it gave me a good opportunity to do a quick test of the features and design language before moving into design.

USABILITY TESTING

I then tested the paper prototype with 4 participants that were instructed to find their profile, create a task and find an option to share the task with Alex Lee. All 4 participants were able to browse through the pages and successfully able to create and share a task, as asked. At this point, I was equipped to move into Sketch to start building out my mid fidelity wireframes and put some shape into the design and decide how everything would fit together.

MID-FIDELITY WIREFRAMES

The usability test gave me clear direction to move into wireframes. I created a set of mid-fidelity wireframes to ideate around the main screens I needed to build. These initial concepts gave me direction as well as a working flow to establish clear design patterns. Piece by piece I started building reusable components that would act as a cohesive whole. My wireframes guided me fast enough to start working on the user interface designs and start building out a UI kit

UI KIT

I needed to build a foundation for my design system so I created a style guide to inform how everything would fit together as a whole. I used Circular Std as my main typeface. I like this font as it appeals broadly to young and older users, used by popular apps like Spotify and has notable popularity for its rounded and bold lines.

The Prova logo signifies multiple sound waves that are interwoven in one another, suggesting establishing connections through sound.

Hi-FIDELITY WIREFRAMES

After gaining a solid foundation, I moved on to build my screens in high-fidelity, as directed by my style guide. I started designing with the most important screens first: the home screen (dashboard), the profile screen and the stats screens. If there’s one thing I’ve learned as a designer, that is,don’t start designing the onboarding or login screens first, you’ll just end up wasting your time.’ — A very good mentor of mine said that. Thanks, Chris!

I made a few screens and during that time kept looking for further inspiration to direct my UI design choices. I ended up taking design elements away until there was nothing else left to take out. I tested initial concepts of my high fidelity wireframes with a few users and gathered new ideas. Students were interested in making practicing more fun while teachers needed something different altogether. I ended up adding complementary features that would help our users connect with and give them incentives to use the app.

A gamification system would allow users to advance through levels when they practiced using the app further incentivizing progress and establishing healthy habits. The practice largely acts in the background while it encourages the student to practice mindfully and target their personal goals while doing so.

Below you can see the final version of the screens, version 1.0

Hi-FIDELITY PROTOTYPE

During the final sprint of the challenge,  I took the screens I had created and went back to my user flow to map it out in a working prototype using inVision. Users entering the prototype would create a task and send it to our hero Alex so he can see his next assignment. From there we assume the role of Alex and are instructed to find our new task and start practicing, record the practice and share it with his teacher and to his activity feed. Additional functionality of the app is available through the prototype button below.

VIEW PROTOTYPE

Phase 5: Test

In order to validate my design decisions, I had to test the features and flow of the app with real users. I scheduled 4 participants for usability testing.

USABILITY TEST

I completed usability tests with 4 participants, 3 male, 1 female. 100% of the participants commented on the usability of the app citing that it was easy to navigate and that elements in each view were familiar and easy to use. 50% of them commented on the social aspects and said they found it especially valuable to add gamification to practicing and being able to share recordings with one another, further touching upon the social aspects that were created within the app. Users liked the layout and were able to create a task and assign it with the student and to their activity feeds.

Conclusion

No design is ever complete. The next steps would be to test the new features with users and look back on our research to see which problems would be worth solving next from a business perspective. There are many screens that I hadn’t designed but had signified of being there. Perhaps I would start there and complete the screens first, but then, you never know!

Next Case Study

Creating a mobile first experience booking site

Research, UX / UI Design, Strategy, Branding

view case study