My role

User research revealed that middle school students need to be able to express themselves. As an interaction designer, I addressed this by prototyping a character selection. I also designed multiple states of interactive components such as buttons, clickable lesson mini-games, and a multiple-choice quiz. I delivered a high-fidelity 23-screen responsive web prototype in Figma with user flows, user persona, components library, and developer redline annotations.

Project overview

We teamed up with Alicia Williams, Teach Woke’s CEO, and created Justli: a gamified e-learning experience. This platform allows middle school students to learn about social justice concepts. To bring this idea to life, my team and I conducted interviews with middle school students to identify affinities and needs. The process also included a design studio session, usability testing with mid-fi wireframes, and a UX presentation.

Insights from middle school students

To start this project, we needed to get to know our users. Williams got in touch with 2 teachers from 2 different schools and organized interviews with middle school students. We interviewed 8 twelve-year-old students. The interview process was fun because a middle school student is full of unexpected responses. However, conducting interviews through Zoom under a tight schedule added some pressure to the research phase.

We used the interview responses to create an Affinity Map, which helps us to compare and identify trends. We ended up with 63 sticky notes that revealed these insights:

“I want a dynamic experience when working towards a goal.”

“I want to be able to express myself.”

“I don’t like things that take too long.”

- quotes from user interviews

These insights led us to our objective:

Utilize game elements that allow for self-expression, provide challenge, and an overall dynamic experience, thereby increasing the students’ attention span.

Middle school students get bored when reading or writing for too long.

To align our team with who we are designing for, we combined the behaviors, needs, frustrations, and bits of personality gathered through our user interviews to create our user persona.

Meet Ava, our ideal user

At this point, we can keep the needs of our target users at the forefront of our design ideas by using a persona's problem statement:

Ava, a middle school student, needs a way to focus and engage with class lessons, because she finds it difficult to follow along when it’s not as fun and immersive as playing video games.

The problem statement is useful because it guides the ideation process towards finding a solution to the identified problem. An exercise that supports brainstorming those solutions is writing How-Might-We statements.

How might we make lessons more fun and immersive?

How might we allow Ava to express herself while learning?

How might we explain lessons thoroughly in a fun and easy way?

How might we keep students engaged and attentive?

Hypothesis:

Students will be more engaged in learning when provided with dynamic, self-paced, and multi-step lessons.

We transformed the typical old-school learning - characterized by long form stress - into an experience that leverages the power of wizards (multi-step forms) and gamification, increasing the students’ engagement.

The building elements include:

Character selection
Unlockables
Multiple paths

We began responding to these statements by sketching wireframes and ideas. We also created a task flow that helped us pinpoint necessary screens and interactions, like the student dashboard.

Function over form

Leading the prototype phase, I turned our design focus towards the interactivity of the product.

First, we played at a low-detail level with the navigation and game elements within the lesson content. We combined some of our ideas into mid-fidelity greyscale iterations of the screens, also known as wireframes. These mid-fi wireframes allow us to test the usability of the design.

Our research indicated that 12-year-old students have an aversion to anything that seems lengthy. The original printable material is a series of questions and exercises. So, we broke down the lesson into multiple pages. This design rationale is parallel to a multi-step form, which is considered best practice to improve the user’s attention while filling out long-form modules.

One of my suggestions was a progress bar in the shape of a badge. The badge would start as a silhouette, and be filled up and visible by the end of each lesson. The badge will unlock as a collectible for the student. By using this design pattern, we borrow a gaming element, thus addressing one of our user persona’s goals.

Gamification is not just about adding badges and trophies. Ava, our persona, also wants to be able to express herself. So, in addition to the Epic Meaning & Calling towards becoming a social justice expert, we also included a character selection feature. This feature allows Ava to show her personality by selecting her avatar.

We created a series of tasks and questions. Then, we collaborated with Alicia to organize a session of usability testing with a group of middle school students. The design worked well overall, but the test results also revealed opportunities for improvement.

8/8

Students completed all tasks in under 2 minutes.

3/8

Students didn’t recognize the hamburger menu.

8/8

Students recognized the dashboard and described what to do with no errors.

8/8

Students hesitated when asked to choose a scenario (multi-path navigation).

“It was easy to understand.”

- quote from a test participant

Design Iteration

The data from the usability testing helped us uncover design opportunities such as the need for a clearer way to navigate to individual scenarios. At this point of the process we started exploring the look and feel of our product. The components were designed with children in mind and follow brand guidelines including a set of soft colors and the use of Gothan Rounded (typeface) to achieve a playful mood. I was in charge of creating the component library, and prototyping all the various states of the interactive elements.

The image displays some of the components designed for Justli.

Unlocking your inner social justice hero

We created a dashboard that allows the students to see and select available lessons, contemplate their earned badges, and send a message directly to their teacher.

The image displays Justli's dashboard screen.

Multiple paths

We wanted to provide the students with a way to let them decide which exercise to complete. Giving the students agency on their learning experience creates a sense of control while increasing attention and engagement. The initial wireframe for this screen lacks clear instructions. This shows in the usability test results, where 8 out of 8 students were unsure on how to navigate past this screen. To address this we included clear instructions for the user, and added buttons under each scenario image.

Before

After

More choices, more fun

We added more avatar choices giving the students more ways to express their personalities.

Before

After

Try

Justli (Interactive prototype)

Interactive prototype

Click on the text fields to try the prototype.

Key Learnings:

Communication with the team is essential to navigate obstacles. The idea of doing user research with middle schoolers was scary to me, but with communication my team provided the necessary support to navigate this.

Make the possible user actions clear. If the user needs to guess what to do next the design increases cognitive load, adds some emotional stress, and might hurt user satisfaction. A way to prevent this is by including affordances through UX writing and/or visual cues.

Next steps if given more time:

Usability testing with the high-fidelity prototype.

Test for accessibility

Onboarding

Teacher’s portal

Insights from middle school students

Meet Ava, our ideal user

Function over form

Design Iteration

Let's chat!