Most of us prefer to remember the alphabet by singing our ABCs. Why did we stop using songs to memorize content? A team of two other designers and I designed a mobile app to help learners enjoy creating study jingles.
User Interviews, User Persona, Feature Prioritization, Storyboarding, User Flow, Wireframes, Prototypes, UI Style Guide
UX/UI Designer
September - October 2020, May - June 2021
In this case study:
Today students often get distracted watching entertainment apps like TikTok and Netflix instead of studying. Inspired by TikTok’s bite-sized yet memorable videos accompanied by catchy song bits, my team and I wanted to design a music and education app to help students have fun studying by creating study jingles. Our app would be named Edubeat (to help students "beat" education by using music). We gave ourselves a timeline of three weeks to create this app using the following process:
To proceed any further, we needed to understand the student we were designing for. How would they feel about creating study jingles? What daunts them about creating lyrics or music to study? Have they even considered using music as a study method? We needed to conduct user research!
With the above questions in mind, I created the following list of questions to ask five students:
However, I withheld from asking these questions after reviewing them with my other team members. Just think, how many students do you know of who use music as a learning tool?
We did not think there were many, but to test our assumption, we conducted a survey asking learners if they have used music as a study tool and would be interested in creating music.
Sure enough, only 8 out of the 60 learners surveyed found singing a jingle the best way to retain information.
As our survey revealed, the answer is not many people consider using music to study. With this information in mind, we revised the interview questions. What could be blocking students from using music as a studying tool? Also, how do they prefer to study, and what apps do they use to do so? We could really learn from what other education apps are doing well for our users.
Five interviews later, we found that our students had not considered creating songs to use as study material due to how time-consuming and complex they believe creating them would be. Despite this finding, several of our interviewees were interested in using an app that makes creating study music easier.
We also learned that most of our users used education apps like Quizlet for creating virtual flashcards and Notability to review their notes. Our students appreciated the ease of using Quizlet and the personability of Notability. Perhaps we could incorporate these elements into Edubeat...
"Have you ever tried opening a music software?? Those are so messy to look at... A music education app sounds cool though" - Jess, 24
"It's like TikTok but for education? Sounds interesting, I'd check it out."
- Abby, 22
Ideally, we would want Edubeat to cater to learners of all ages, but then we would not be able to work out a solution with so many types of users in mind and with our limited time frame. Thanks to our user interviews, mostly on students in college, and my teammate's empathy map, we narrowed down on a persona.
An empathy map for our user persona which is populated by the thoughts and feelings of our interviewees.
Our user persona, Gina, has her personality and needs on full display.
Introducing Gina. She is a part-time college student who also works a part-time job as a bartender. Recently, Gina has had a hard time remembering a new recipe for a drink. She always finds herself procrastinating by scrolling through Instagram and watching her TikTok feed instead.
Now we can start forming Gina’s specific problem so we can help her. For instance, how could we help Gina study using Edubeat without sacrificing the fun she gets from entertainment apps?
It was time to define Gina’s problem.
Gina's situation begged the question:
How might we design Gina’s experience so that she can retain and recall information that is studied, have a more efficient study session, and an overall more enjoyable and memorable experience?
With a specific problem to solve, we started to plan Edubeat's design.
To start answering our problem, one of my teammates mapped out Gina’s journey through our app.
When making the journey map, my teammate wondered: What if Gina had to memorize the recipes for multiple drinks? Would Gina not feel overwhelmed with creating so many jingles? What if someone else using Edubeat had already created a jingle for memorizing one of the drinks that Gina also needs to know? After some discussion, we decided that Gina's journey through Edubeat should include browsing other students’ jingles on our app to make her studying more efficient.
With this journey map in mind, I created a user flow with one of my other teammates.
This flow shows how Gina can accomplish the following tasks:
We decided that Gina should have her own library to keep track of the jingles she creates, as we observed from Quizlet's library of study sets. We also wanted Gina to have the option to manage her account to allow for some personability, as we noticed from Notability.
While creating our user flow, we briefly lost sight of Gina due to feature creep. The way that we envisioned the jingle creation process would work, as detailed in the user flow above, starts with the following steps:
It is in this third step that my teammates and I saw an opportunity for another persona. What if there was a music composer who produces tracks for Edubeat to make available to users? This user would have the premium profile seen in the graphic above.
The 'Premium Profile' section of the user flow above is outlined in yellow.
Since we did not have enough time to deal with this additional persona, we had to revise our user flow to fit only Gina’s needs.
We translated Gina's emotional journey through our app into the more defined flow above. Click here to see this final user flow in Miro.
Once we overcame creating our user flow, we realized that we had only a couple of weeks left to produce a hi-fidelity prototype (we had started working on this project in late September and wanted to finish by mid-October).
Usually, I would rapidly produce a paper prototype to test on our users, but with the deadline approaching, I made a low-fidelity prototype instead.
Our low-fi prototype. Feel free to interact with this prototype by clicking any of the buttons!
After testing our low-fi prototype, I created a list of feedback received from our users and reorganized them to figure out what issues we had to prioritize.
We found that our users had issues with the layout and display of our app. They also requested more features like sharing jingles.
We prioritized the features that both we and our users felt were important in the dashed yellow box.
As it turns out, our users wanted more interaction with the app by having lyrics highlighted while their study jingle was playing. Users also wanted the option for browsing jingles created by other students listed first on the home page. They expressed that they wanted to be encouraged to save time studying by seeing if another learner had already created a jingle of the same study topic. Lastly, and most importantly, users were confused about the meaning of the text on certain buttons shown during the jingle creation process.
Users wanted to see "Browse pre-made jingles" listed before "Create a study jingle!"
After fixing these last two issues, we jumped into creating our mid-fi prototype in Adobe XD. With the deadline breathing down our necks, we decided to focus solely on the UX aspect of our app and leave the more visual UI side and micro-interactions for a later time when we could all meet again.
Our final prototype for the time being. Please feel free to interact with it!
Review of September - October 2020 session
Considering that I had started my UX journey in early August of 2020, I am really proud of how far I have come. I am very proud of my two teammates as well and for their input in designing this app.
I wish we could have randomly selected potential users to interview instead of friends or family we knew. Due to the coronavirus pandemic, we could not freely approach anyone to interview for us. When it gets safer, I would love to interview random students to get more fresh input.
Given more time and connections outside of people I know, I would have liked to design with an older learner persona in mind. The music composer persona that we were considering while making our user flow is another persona that we could explore in the future.
May - June 2021,
The journey continues
In May, one of my team members and I reunited to resume working on Edubeat. For these two months, we worked on the user interface as it was rather lacking...
First, we gathered inspiration from retro images and old music equipment. We found that the nostalgic feel of retro imagery could make users recall the fun times they had studying when they were younger and less jaded by years of school.
Retro images and colors galore called to Edubeat's old-school image.
Fueled by our inspiration, we created the following style guide:
Much more organized and concise display of Edubeat's style direction.
I designed the buttons after rectangular push buttons on retro game consoles. Since game console buttons are fun to use, we thought our users would find pushing the buttons enjoyable.
Next came repainting the old colors with the new colors and buttons from our Style Guide. Besides these updates, we also wanted to redo our main navigation to fit with our retro theme. While my teammate added graphics and updated the typography of our app, I created a main navigation menu inspired by our logo of a record player.
This record main navigation menu is slick and fun, but at what cost? Feel free to interact with it!
As my teammate had pointed out, the main navigation takes up almost a fourth of the phone screen, which is edging too much into the limited space we have for Edubeat’s features. Although the record menu navigation was unique, I agreed that it was overbearing. Another reminder that we must not get too attached to our ideas in the UX world…
Instead, I created an equally fun cassette tape-inspired main navigation menu that fits the retro theme while not over-occupying space.
A much less space consuming, yet fun main navigation menu. Feel free to interact with it!
After applying our style guide and the buttons I had made to the last of our screens, we made our first version of an Edubeat hi-fi prototype.
Interviewing five users revealed that most of them were confused about the meaning of the text on certain buttons and desired more animations to demonstrate Edubeat's features.
Users were confused about what exactly "premade" tracks meant. Was it a track they had already made, thus "premade"?
Instead of "Choose from premade tracks", we decided on "Choose from Edubeat tracks". With the button text changed, I focused on making Edubeat more enjoyable and memorable, as we had defined in our problem, by making animations that conveyed how the app would function.
An animation that highlights scrolling lyrics while a track is played. Feel free to interact with it!
I finally created an animation highlighting lyrics as they played in real-time while a jingle is playing. Since Edubeat's screens and main navigation is reminiscent of a music recording device, I made the lyrics player look like a VCR screen.
After applying these changes along with other animations, we had our latest version of our hi-fi prototype.
The latest version of our prototype for Edubeat. Please feel free to interact with it!
We pitched our latest version of the Edubeat prototype in the Next Level contest. Although we did not win, we did receive feedback for Edubeat.
Our video pitch for the Next Level Contest.
Megha (that's me!) on the left and Amie Moreno (my absolutely amazing teammate!) on the right.
For our next steps, we want to create a coded prototype of Edubeat and consider updating Edubeat to include an older learner persona. We wish to continue working on Edubeat and pitching it in hopes that it will one day benefit learners everywhere.
Thank you for reading!
