Work  >  UX / UI  >  Kids in a New Groove

iOS Mobile App Design Concept of
Local Non-Profit: Kids in a New Groove

ROLE:
DURATION:
TOOLS:

UX/UI Designer, Illustrator

3 weeks (May 2020)

Figma, InVision, Whimsical, Miro, G Suite, Zoom, Photoshop, Illustrator, Trello, Otter.Ai

TEAM:

Team of 4 UX/UI Designers

iphone_mockup_2.png
iphone_mockup_3.png
iphone_mockup_1.png
PROBLEM:

Our User Persona, Jennifer, and her Foster kids, Colleen and Nathan, are regular users of Kids in a New Groove, an existing non-profit that provides Foster children with free instruments and instruction by volunteer musicians. However, kids in the Foster Care system who are unable to attend in-person music lessons (either due to COVID-19 or other issues) will miss out on the enriching and therapeutic benefits of music and mentorship that KING provides.

SOLUTION:

We designed a mobile app to give Foster parents easy access to the music mentorship services provided by KING so they won't miss out if they can't attend lessons in-person.

IMPACT:

Thanks to the simple and easy-to-use mobile app option, Jennifer is relieved and happy that Nathan and Colleen are now motivated to practice and look forward to their weekly lessons due to the accessibility the new KING mobile app provides.

5f5452e6755d6a09a26ee6df_KING_Sketches-p
iphone_mockup_midfi-2.png
iphone_mockup_1.png

Challenge

5f5452e7837d7551612e810e_KINGhifidelitym
PROBLEM STATEMENT:

Our User Persona, Jennifer, and her Foster kids, Colleen and Nathan, are regular users of Kids in a New Groove. Recently the music instruction has become online only and lack of access to music instruction for Nathan and Colleen means that they will miss out on the enriching and therapeutic benefits of music and mentorship that Kids In a New Groove provides. How might we develop a mobile app that will serve as an instructional portal and virtual meeting platform for Foster parents, their children and their music mentors?

Approach

5f5458745b8274705d68c94b_Screen Shot 202
USER RESEARCH:

We suspect that the Foster parent is the primary facilitator of the lessons and we made the assumption that Foster parents would benefit from a mobile app that gives them access to the mentors and music lessons for the children in their care. In order to validate our assumptions, we asked the parents themselves. From here we dove into research specifically targeting parents with children currently enrolled in the KING program with semi structured 1-on-1 interviews via Zoom and an online survey.

Affinity Diagram.jpg
5f545739016fed677cbdcc29_KING-Research-I
5f545749d7f228360165c7ed_KING-Research-I
5f5457562fce83836c1903ef_KING-Research-I

Interview Results

Affinity Diagram

5f545309cad1a47b2e312e73_KING-POV-Statem
DEFINITION &
SYNTHESIS:

We felt like we had very good interview respondents that were able to speak freely and give us a lot of valuable and usable insights. Perhaps the most interesting insight was how aware and considerate of the children's past trauma the parents were. This clearly shows that this sample of parents are very involved in their children’s emotional health. All of our respondents were pretty amazing people in terms of what they sacrifice for these kids, and how they keep themselves strong through all of the hardships. We feel that our User Persona, Jennifer Miller, is a great amalgamation of all our respondents.

Point of View Statements

USER PERSONA: Jennifer Miller

Jennifer Miller is a 43-year-old full-time Foster mom living in Austin. She always puts her kids and their needs above all else and loves how much they enjoy their weekly lessons with KING. She needs an easy way to track communication and lessons with KING while motivating the kids to keep up with practices. She is worried about how they’ll continue lessons while face-to-face instruction is suspended.

jennifer.jpg

Goals:

  • Her kids are able to continue with the KING program

  • Better coordinate KING practices and lessons

  • Track communications with mentors and get some help motivating the kids to keep up with practices

Frustrations:

  • Always busy planning, prepping, worrying

  • Hates reminding the kids to practice

  • Worried about how they'll continue lessons while face-to-face instruction is suspended

STORYBOARD:

From here, we were able to map out a realistic scenario with KING that Jennifer would likely go through according to all of our findings and I illustrated the storyboard.  

5f5452e6d7f228f5c665c4fb_KING-storyboard

Jennifer is a busy Foster mom with 2 Foster children, Nathan and Colleen, ages 9 and 11.

5f5452e6be57e36315109d0d_KING-storyboard

Jennifer signed her kids up for the “Kids in a New Groove” program and they have greatly benefited from taking free music lessons for guitar and piano.

5f5452e654991b1ff1d17e92_KING-storyboard

Due to unforeseen circumstances, face-to-face lessons have been suspended and Jennifer doesn’t have a family computer with which to continue virtual lessons.

5f5452e59d94a7418d0b50f5_KING-storyboard

Not wanting her kids to miss out on the therapeutic benefits of the music mentorship, Jennifer downloads the new KING mobile app to her smartphone to help her access remote instruction.

5f5452e6305dbc4ffcde0597_KING-storyboard

Using Jennifer’s smartphone, Nathan and Colleen now have access to virtual piano and guitar lessons with their teachers, practice tracking, rewards and more.

5f5fd300eaba982f0f041f22_KING-storyboard

Jennifer is relieved and happy that Nathan and Colleen are now motivated to practice and look forward to their weekly lessons due to the accessibility the new KING mobile app provides.

IDEATION:

We rephrased 'I Like, I Wish and What If' statements directly from the insights from our user interviews. This ensured that the product features borne out by these insights also come from the research itself, and not our own biases or assumptions.

5f545baa2fce8327f2190728_KING_I_Like.jpg
5f545bab9a220e1a44d0ceed_KING_I_Wish.jpg

I Like, I Wish, What If Brainstorming

5f545baa9a220e0f08d0ceec_KING-What_If.jp
5f5450367ffd7c71f77b932a_KING-Feature-Pr

Before we performed a dot voting exercise we forgot to synthesize the statements into categories but we were able to make up for this oversight after the fact by allowing everyone in our team to discuss their selections, aggregating similar insights, and aligning on which of those should move on to the feature prioritization matrix.

5f545036fce07684fc378b82_Screen Shot 202
5f5450356e6a49195c27d108_KING-Inititial-
5f5452e6755d6a09a26ee6df_KING_Sketches-p

Ideation Dot Voting

Feature Prioritization Matrix

Low-Fidelity Sketches

Task Flow.jpg

Task Flow

Task Flow.jpg
WIREFRAMING &
PROTOTYPING:

Using all the insights and data gathered from our research, we crafted a task flow to further imagine Jennifer’s experience in greater detail. After drafting initial low-fi sketches we prioritized the following features to implement for the initial launch:

  1. Scheduling and reminders

  2. Practicing rewards and incentives

  3. Communication with mentors

In our first wireframes we set out to cover all the basics so we could get a good look at what we were proposing. After some great discussion and critical thinking from the perspective of Jennifer, our User Persona, we made improvements by simplifying and stripping away distractions in most areas while adding valuable content and messaging in others. We ended up with a prototype we were proud of and excited to test!

iphone_mockup_midfi.png
iphone_mockup_midfi-2.png

Mid-Fidelity

Prototype

designs.png
VISUAL DESIGN:

Our idea for the art direction of our high-fidelity design was to use KING’s existing color palette and then be sure to keep the look and feel fun and inviting. We were intentional about not overdesigning and leaving plenty of white space, but we also included well placed custom illustrations designed by me to help keep the tone upbeat and motivational. We chose to model our design after the iOS guidelines for its clean look and emphasis on accessibility.

practice.png
Untitled-2.png

Style Guide

mic.png

Results

5f5452e6755d6a09a26ee6df_KING_Sketches-p
iphone_mockup_midfi-2.png
iphone_mockup_1.png

Low-, Mid- and High-Fidelity Prototypes

USER TESTING:

Our testing was extremely successful. In retrospect, we probably could have given less instructions and observed to see how each tester navigated the app entirely on their own. Lesson learned is that the goal of testing shouldn’t be to get the highest score! Our testers were extremely kind and complementary. Perhaps they were too nice because we didn’t have a lot of critical feedback to prioritize beyond a few bugs, adding a security statement at log-in, and some greater differentiation between the practice and reward screens.

king_icon.jpg
FINAL THOUGHTS:

From this project we learned to be overly concerned about user bias, in both research and testing, especially when dealing with mission-driven nonprofit organizations. Research participants might really want you to succeed leading to them not being critical enough of your product. Focus on a select few features based on the user’s needs and execute them really well for launch, then continue to test and add features as time and budget allow.

Untitled-2.png
FUTURE OPPORTUNITIES:
  • Create whimsical UI animations (stars, astronaut, rocket ship, music notes and instruments)

  • Game-ify practicing even more

  • Virtual recitals and/or music recordings to share on social media

  • Music therapy integration

  • Panic button, more resources regarding trauma

  • Pre-recorded lesson materials within the app