My Role

UX/UI Design
Prototyping
Illustration

Intro

With many distractions and time management challenges throughout their day, students need a tool that provides quick access to academic information. My Backpack was meant to be a mobile app that would be packaged with an existing desktop Student Information Solution. The desktop application provides a comprehensive view of a student’s academic journey (including historical artifacts), but the mobile app was intended to offer a high-level glimpse by surfacing only current and pertinent information.

The following presentation offers a peek into the process and my creative vision for My Backpack. Unfortunately, due to a lack of priority, budget, and resources, this project was tabled after early rounds of user testing.

Discovery

The discovery phase for this project required very light onboarding. I sat through a few demos of the existing desktop application with the Product Owner for the purpose of learning the in-depth product features. Because I spent years as a middle school teacher and high school coach/mentor, I already qualified as a content expert, so it was just a matter of learning the software. And holy moly, there was a lot of information packed into that application…

Once I felt like I had a handle on the product features, I collaborated with the Product Owner, Lead Developer and UX research to create personas and a story map.

Ella, 16

Ella is a sophomore in high school who is already actively thinking about college. She holds herself to high standards and goes above and beyond to achieve her goals. Grades are motivators for Ella, and she puts a lot of pressure on herself to maintain high honors. She also has a full plate when it comes to extracurricular activities — varsity field hockey and basketball, Student Council, National Honor Society, Latin Club and Chamber Choir. She has a small social circle of friends with similar interests, and hanging with her friends helps relieve the stress and anxiety of her academic responsibilities.

Goals

Ella’s number one priority is maintaining her high GPA, and she wants to be able to check her grades daily. Because she’s involved in so many extracurricular activities, it’s also important she be able to view all current and upcoming assignments so she can manage her schedule effectively. She is tech-proficient, but doesn’t have time to waste fishing around in clunky, disorganized applications, so easy-of-use is high on her list of “must haves.”

Jake, 15

Jake is a freshman in high school who doesn’t sweat the small stuff and doesn’t stress over grades. He’s passionate about athletics, and plays sports in all three seasons. He also has a large group of friends. Jake is an active participant in classroom discussions, but he struggles to stay organized and turn in assignments on time. He’s not hyper-focused on his GPA, but he will proactively talk with a teacher when receiving a bad grade to see what he can do to improve.

Goals

Jake’s main goal is to complete his assignments and maintain a high enough GPA to appease his parents and stay on his sports teams. He also needs to know his daily agenda because he can’t seem to memorize the high school’s rotating schedule.

Story Mapping

The goal of this activity was to identify the narrative flow and detail tasks for the application. This activity was led by the UX Researcher and was the first time the Product Owner and Lead Developer had participated in a story mapping activity. Throughout the mapping session, I often times found myself wrangling the Product Owner and Lead Developer as they pushed for the inclusion of complex features. I offered several gentle reminders of our personas and the product goal, and eventually we landed on the following:

Design + Prototype

Because of my familiarity of the product content and user journeys, I decided to skip the sketching phase and jump right into the creation of medium fidelity prototypes, an example of which is shown below. I was in the process of meeting with the team and iterating on my designs when the project got tabled.

Though I was disappointed the project was not moving forward, I used this as an opportunity to push my UX design skills and to dip my toe into the Adobe XD pool. I was passionate about this product content, and excited to work without the limitations of an established branding system and without product features being dictated by stakeholders. So I set a few personal goals:

My Goals

In order for this product to do well in the market, it would need to have some key differentiators. After some light research into existing mobile academic apps (PowerSchool, Infinite Campus, Backboard, etc.), I identified three buckets that would elevate My Backpack in the market:

1. Warmer, more approachable, inclusive vibe
Addressed by utilizing soft color and friendly, youthful, representative illustration style. Balanced illustrations with intentional white space so the graphics don’t distract from the content.
2. Clean, streamlined UX for key processes
Addressed by creating succinct pathways to information with multiple access points. Reduced complexity of screens by keeping content/data high-level and roomy (versus condensed). Sprinkled in impactful data visualization.
3. Customization
More on this item below.

Customization

If I learned one thing from my days of teaching, students like having choices. On a surface level, providing users the ability to select colors would already provide more customization than any of the other apps I researched, but I could think beyond a subjective cosmetic lift to include the following:

• Allow users to select light mode, dark mode or high contrast

• All users to select “zoomed in” views to make the app more accessible for visually impaired students, or students with fine motor skill challenges

• Provide options to show/hide grades for students to alleviate stress/anxiety triggers

• Provide options on the types and frequency of notifications