Problem
The first version of the RapStudy platform was developed by engineers. The website needed a more consistent and refined look. The prototype was functional but not easy to navigate.

Solution
The design team created the RapStudy brand, UI kit, and standardized fonts, buttons, and spacing. Information architecture was restructured and navigation for song activities changed from pop-up to horizontal tabs. 

My Role
Visual design & Figma prototype
Information architecture
User testing & research 

What is RapStudy?
Many students in elementary and middle school are academically underachieving because they find school boring. RapStudy makes learning fun through music by creating educational parodies of popular pop songs. Here’s a sample:

The current site is hard to navigate.

The web platform is intended primarily for students use as a learning supplement. It should be easy for students to study at home and solidfy knowledge. I recruited a student to give feedback and attempt to study a topic about measurements.

One difficulty that he relayed was that it difficult to navigate between activities, which could only be accessed through the Activities Modal. Additionally, it was hard to find topcis through Browse which was set up by states and genres. It was intended for each song to be aligned a specific state’s education standards, but this is not something that students are aware of when they are looking for the topic they’re learning in school. It was also difficult to find appropriate topics by genre, which applies to music discovery but not to education which is the primary purpose. 

Research: What tasks do students need to accomplish?

Information architecture sits at the intersection of user flow and content organization. I learned from the interview the 3 major steps of using an educational supplement: 

1. Find the topic of interest
   
2. Master the material 
3. Keep track of learning progress and return to material

Looking at the user flow and current information architecture, I realized that currently there was also no easy way to return to learning material other than through the recently played songs on the home dashboard. 

I analyzed similar ed-tech platforms such as Quizlet and Khan Academy to better understand how their website was set up to help students accomplish the above tasks, as well as how they structured their content. 

Redesign Goals
Based on the competitive analysis and current problems identified with the site, these were my redesign goals:

• Restructure browse by standardizing how educational information is organized
• Make it easier to move between activities for each topic
• Implement a way to track progress, save and easily revisit songs

Browse structure imitates textbooks.

First, the design, engineering, and education team collaborated to discuss how education information should be structured. We decided to imitate structures that were seen often in textbooks: sub-topics build up to form topics, which comprise units, and units are separate categories underneath a subject. Each sub-topic correlates to a song and song content is pulled directly from the learning outcomes.

This framework provided the new foundation for Browse, as it would be organized by subjects, which display its respective broad units (like Quizlet). For the engineering team, the framework also outlined the song database structure and clarified the tags that each song would need to have, which would make tasks like filtering, and querying simplified. 

We decided grade level would not be a part of the Browse hierarchy. This is because we didn’t want to discourage a curious student who might be interested in exploring more advanced topics and vice versa. Instead, songs would be tagged as “middle school” or “elementary school”, and offered as a filter that can be applied in Browse at the topic level. 

Activities can now be accessed in one place: on the song view. 

The different games and activities are designed to help the student master the content of each song’s material. By cutting the middle man, the Activities Modal, the activites can now be accessed all from the song view. We decided to place the different options (Karaoke, Sing in the Blanks, and Review) as tabs horizontally across the header to suggest a linear progression of material mastery. 

Revisit content for different purposes: Library to resume learning & Playlists for retention

Because there are many layers to Browse, it can be inconvenient to navigate to the same song over and over again. My Library is a section of the sidebar that lists all of the bookmarked topics and links to them their respective page. This provides quick access, similar to the bookmarks bar in browsers like Google Chrome.

Playlist was designed to let students listen to the songs and their lyrics over and over again which helps the student retain the material because music can be played in the background. Additionally, it accounts for the scenario where a user might be studying for multiple classes at once and can listen to all the songs from a variety of subjects without having to click on the webpage at all. 

Home page tracks progress, along with redesigned song card 

The old version of the song card showed the album cover, with the original song name and artist underneath. However this version focused too much on the music and does not give enough information about the educational content. 

The new topic card uses a description of the topic and the key information to be gained from the song. It also has a progress bar to indicate that the student has not mastered the information, allowing them to see from afar how much more they have to complete. 

The revised information architecture now makes it easier fo the user to accomplish his or her tasks of finding, mastering, and revisiting educational content. 

Visual Design & Branding

In order to improve the visual design, we needed to define Rap Study’s brand. They had already trademarked their logo and icon, but did not have a set color scheme or visual language. After a visioning session with the founders, we created a branding guideline and UI kit to standardize fonts, spacing, buttons, and modals. This would create a more cohesive look and simplify the handoff to the engineering team.

The Final Design

The improved information architecture, defined visual brand transformed into the first high fidelity prototype. Below are the designs for the Home/Dashboard, Browse, Unit View, and Song View. I had also designed the look of each of the activities which were available (Karaoke, Breakdown, Blanks and Review) which can be found in the video prototype. 

User Feedback: Accessibility for all ages and abilities

The design team prepared for usability testing and interviewed 15 teachers and elementary to middle school students. One important theme that we heard over and over again was accessibility. The platform is intended for kids grades K-8 and in this span, kids’ reading and comprehension abilities, vary dramatically. Additionally, ESL students would also have a difficult time understanding the vocabulary words in the lyrics. We were told that younger kids needed more images, especially since presentation mode is 3-4 minutes of scrolling text. 

In response to the feedback, the RapStudy team is currently working on developing a Vocabulary feature, which allows the student to pick difficult words in the song. The feature not only defines the words but can also translate the word and definition into a different language.