A project integrating pop music into middle and high school English Classes.
Role: UX Researcher and Designer
Process: Research, UX Strategy, Wireframes, Branding, Testing, and Prototypes
Status: Prototypes and Designs Completed.
Pop in the Classroom (aka POP) is an initiative designed to use pop songs from all musical genres to engage students in the study (and the love) of the language arts. The goal of POP is not simply to provide ways of teaching with pop lyrics, but also teaching about them as a body of language and sound deserving close critical attention. Adam Bradley, Professor at the University of Colorado and Founder of the Laboratory for Race and Popular Culture, and his team are developed the lesson plans and curricular modules suited for middle school and high school classrooms.
Research & Design GOALS
Conduct research to learn about teachers' needs and plan for future student-facing site. Design a well-structured website for the wealth of materials and lesson plans that have been created for the project. The lessons live in a Google Drive folder now. They have been tested with several teachers. The RAP Lab would like to make them widely accessible, primarily for middle and high school classrooms.
I completed interviews with middle and high school teachers. I learned that teachers want access to modular lessons, where they can mix-and-match to put together the best lessons for their students. Some teachers were eager to integrate new technology into the classroom experiences. Other teachers were more wary, and worried about 1) access due to finances and 2) distraction.
Empathize - Personas and Empathy Maps
After completing the interviews, I synthesized the research data. I created three User Personas - Kayla, Patricia, and Bill - that exemplify the teacher's needs, wants, and pain points. The MVP (aka 1st round iteration) of POP will focus on the needs of these teacher personas in the prioritization of features and design elements.
Take a look . . .
Define- UX Strategy
Once I had completed User Research and Business Research, I created a Goals Chart to show Business and User Needs. The intersection is the area of focus as it addresses overlapping goals. The UX Strategy Blueprint provides an overview of the project and proposed steps forward. The blueprint is a living document that I updated throughout the process.
Here's a look at the UX Strategy Blueprint
Define- Content Review & Information Architecture
Now that I had a sense of what the teachers need, I reviewed the existing content to define and organize the site's content. I conducted a card sort using Padlet where I asked teachers to group the lesson titles into categories. I used the information from the card sort and the content review to plan the site's information architecture. In other words, how the lessons and other information would be organized and presented in the project.
Define- Site map and user flow
The site began to take shape with the Site Map and User Flow. In the Site Map, I show the high-level pages of the site. In User Flow, I show actions the user takes as they navigate the site. The diagram helps in planning how pages and actions will link together - in the design and in development.
IDEATE - Wireframes
Wireframes are a way to sketch out the plan of the site, test quickly, and redesign. I started by sketching wireframes by hand. Then I created digital wireframes to use for early user testing. The site will be responsive and accessible across devices. I began with the laptop screen size since according to my research the users did their lesson planning on laptops more than any other device. I prioritized features based on user research and the UX Strategy Blueprint. Some of the features I included in the initial wireframes includes: filters to sort lesson content based on material and activity type and duration, bookmarks to save lessons to a user profile, modifiable lesson plans and a way to save to profile, share and download options for lesson plans, and sections that explain the project at the RAP Lab.
Test - user testing
At various stages in the project, user testing helps to identify how the proposed solution is or is not meeting users' needs. I conducted preference tests, click tests, and navigation tests. Then, I created an Affinity Map to prioritize iterations and feature improvement. One of the key elements I tested was the placement of the filters. Would users more easily be able to interact with top or side filters? I conducted a preference test and learned that while the users explained they would use either one, the top filter option presented a clearer visual layout. I also added a show/hide feature for the filters.
Here's a peek at some of the user comments about the top filter option and the Affinity Map:
Prototype - prototype and visual designs
I created a style guide, logo, and custom illustrations for POP. POP evokes a fun and energetic style while maintaining clear legibility and accessibility. I developed the wordmark, color scheme, iconography, typography, illustrations, and image style. I based the design elements on album covers and posters. I drew on the user research with teachers to craft a visual style that was fun, but also clean and easy to read.
I completed design mockups and prototypes for POP based on the research I conducted. Here's a quick overview of the key page layouts.