Backpack is a mobile app that facilitates the college educational experience by helping students connect with their classmates, discover new study spots on campus, and access class information.
Personal project
Duration: 7 weeks (June 10, 2022 - July 30, 2022)
Role: Solo UI/UX Designer
Tools: Figma, FigJam, Mural, Google Forms
Throughout my past two years in college, I’ve noticed that despite my desire to meet new people in my classes, it’s been harder to meet people and form genuine relationships in some of my larger classes, and almost impossible to do this when class is held online. I originally set out to investigate the student interaction experience to see if other college students had encountered similar issues.
Final design video
User research
I surveyed 51 undergraduate students about how they currently interact with their classmates.
I then interviewed nine students to learn about their current experiences interacting with classmates as well as their general school experience. I found that the methods that students currently use to find project partners and class information had some drawbacks.
During the interviews, some students said they preferred to reach out to other classmates online because they were more intimidated by reaching out in person. Reaching out online was more low-stakes because students had more time to gather their thoughts and respond when they were in a more talkative mood.
When asked what prevented students from reaching out to their classmates online, many responded that they simply didn’t know enough about the person and weren’t sure if they would get along—it’s hard to get a sense of what a person is like from just their name and profile picture.
However, some students responded that they don’t like conducting the majority of their interactions online—it’s less organic than interacting in person.
From these findings, I defined the pain points of students’ current experiences and the goals of my product.
Overarching problem:
It can be intimidating for college students to reach out to their classmates in person, and students are often hesitant to reach out online because they don’t know enough about the other person. These obstacles can often lead to difficult interactions within group projects and feelings of loneliness in class, worsening the overall classroom experience.
Competitive analysis
Before brainstorming ideas, I looked at the features of existing apps related to the classroom experience to figure out what my own product could implement and improve.
GroupMe is a group messaging app used by many college students.
Canvas is a course management system that supports online learning and teaching.
Navigate is a platform that connects college students, faculty, and staff to improve student support.
Banner is a platform that contains course information and allows students to register for courses.
Ideation
I came up with features relevant to my product’s goals.
Scenario-writing
I then constructed short scenarios in which the user would have a need to use a specific feature.
Information architecture
After finalizing my product’s features, I conducted three open card sorts to see how users organized the various features. All three users had grouped the features fairly similarly to each other, with the exception of the features related to finding classmates. I kept this in mind as I moved onto prototyping, suspecting that it would take a lot of testing and iteration to work out the organization of these specific features.
Mid-fidelity prototypes
Below are some of the mid-fidelity screens I created for each process. Click on each image to expand!
User testing
I then conducted seven usability tests over users’ ability to onboard, find class information, find classmates, create a chat, and find study spots. See some of the findings and design changes that I made as a result:
I had an especially difficult time finalizing the process of finding classmates. I ultimately ended up merging this process with the “find class information” process and making certain sections more visually distinctive. See the details below:
Finally, I made some changes to the dialog box that appeared once the user decides to edit their status.
A closer look at some of Backpack’s features
Finding classmates
Users said a major reason they were hesitant to reach out to their classmates online is because they didn’t know enough about the person—they only saw a name and a profile picture.
When asked about how they formed their existing college relationships, students said their best experiences interacting with other students occurred when they had things in common, like their major, organizations, and interests. Work style played a big part in the success of students’ partner and group projects—it added unnecessary stress to the project when one partner was a big planner and the other was an even bigger procrastinator.
From these findings, I decided to make it easy for users to find students they were likely to get along with. I created an onboarding process where users can quickly select their school organizations, work style, and interests.
Then, if a user is looking to interact with classmates in a specific class, they can update their status and select the options they are looking for.
If the user is looking to interact with classmates, the app will find and suggest classmates similar to the user. Students said that it was always nice when they shared classes with someone because they could study for multiple classes together, so I made sure to indicate this on the card preview.
When a specific student is clicked, the user is able to see more information about them—their year and major, school organizations, work style, and interests. If the user thinks the student is a good match and wants to reach out to them, they can easily send the student a message.
Study spots
Another major reason students were hesitant to reach out online is because they preferred the more organic interaction that resulted from in person communication. I decided to add a feature where users could find nearby study spots and share them with other students, encouraging students to meet in person and continue their relationship more naturally.
When I interviewed students about what they looked for when exploring study spots, they said they paid attention to how crowded it was, the noise level, and if outlets were nearby. I decided to display this important information in the easy-to-scan card preview, including intuitive colors that assist with communicating icon intention and current occupancy.
I added operating hours and location to the full study spot page. Students had commented that they look for convenience of location when deciding where to study, so I made sure to include a feature that clearly communicates how long it would take the user to reach the specific spot from their current location.
If a user frequents a study spot, they can “favorite” it and access their list of “favorited” study spots through the navigation tab. Because the user is likely already familiar with this “favorite” spot, the main factor that affects whether they choose to study here is the current capacity—if all of the seats are taken, there’s no point in going.
Lastly, I included an option for users to send study spots to others within the app. This provides students with an easy way to decide where to meet.
Finding class information
Finally, students commented that the process of accessing information about their classes, like the location, date & time, and instructor information was difficult. The method of accessing information depended on the instructor—for some classes, the instructor would provide the information through their course management system (ex: Canvas), but for other classes, the instructor did not provide this information. When the information was not readily available through Canvas, students had to go to Banner via their student portal, which is only accessible through the browser. I took a look at the mobile browser view of Banner to see how the display could be improved.
I kept Banner’s current drawbacks in mind when making my designs. Students were used to viewing their class schedule in both a calendar format and list format, so I made sure to include both of these view options.
When an individual class is clicked, more information about the class is displayed. Users also have easy access to their class group chat if they want to ask a specific question about the class.