ClassPals
Starting college can be a thrilling, yet stressful experience. The excitement of new beginnings often comes hand-in-hand with the uncertainty of making friends in a sea of unfamiliar faces. That’s where ClassPals comes in.
ClassPals is an app designed to introduce college freshmen to their classmates digitally by providing them option to share their interests, enrolled courses, and what year they are. Furthermore, users can contact their classmates via the application, removing one less barrier to entry to making strong friendships in college.
For an interaction design course at Northeastern University, we were challenged to create an application for college students and design two workflows to showcase its usability.
Generative research, user interviews, sitemaps, competitor audit
Figma, Lucidchart, Google Sheets
Interviews with college freshmen
To start this project, I conducted interviews with current freshmen at Northeastern to understand their concerns and anxieties about college, specifically focusing on the following topics:
1
How freshmen feel before attending their first classes in college
2
How and where freshmen make friends
3
What bright points and pain points freshmen experience
Throughout this process, I identified key concerns and opportunities for my app to address:
Ideate & Sitemap
Brainstorming ClassPals
After analyzing the user interviews and finding the key takeaways, I knew I wanted to create an application to help better the freshmen experience by providing the college students with access to their classmates and their interests, as well as a way to contact them via messaging.
For this project, we were only allowed to dive into two workflows within our apps due to time restrictions. As a result, I decided to dive into the following flows:
- Messaging a friend via the nav bar
- Viewing a classmate’s profile by going through their class roster
ClassPals sitemap showcasing the main functionalities of the site and the two main workflows I’m focusing on.
Design & Iterate
Low-fidelity wireframing
Utilizing the sitemap, I drew up some crude low-fidelity sketches of what I wanted ClassPals to generally look like for each workflow.
Workflow #1
Viewing a classmate’s profile by going through their class roster
Workflow #2
Messaging a friend via the navigation bar
Test + Iterate
After completing my first round of high-fidelity wireframes, I conducted a usability test with my classmates to see if they had any pain points while using my application. Here are some of my findings and how I adjusted my designs to enhance the overall user experience.
"The course roster seems a little uninviting."
Before
One of the most common responses I received was that the course cards look very plain. On reflection, I noticed that the type hierarchy and color usage could be improved.
To address this issue, I utilized different sizes and weights of my typeface to distinguish different types of information. I also grouped information by relevance so that it is easily navigable.
After
"The course roster seems a little uninviting."
Before
After
One of the most common responses I received was that the course cards look very plain. On reflection, I noticed that the type hierarchy and color usage could be improved.
To address this issue, I utilized different sizes and weights of my typeface to distinguish different types of information. I also grouped information by relevance so that it is easily navigable.
"The course roster seems a little uninviting."
Before
Since the college freshmen who would use this app may not know people in their classes, they would need more inviting information to be persuaded to click on other people’s profiles—not just their name, year, and college.
In my new designs, the class roster is now a grid view of the people in the class, where you are able to view at a glance interests, hobbies, as well as actual profile pictures.
In the interest of having options, I added a button on the top right corner that switches the grid into the original list format if the user need to scroll quickly.
After
"The course roster seems a little uninviting."
Before
After
Since the college freshmen who would use this app may not know people in their classes, they would need more inviting information to be persuaded to click on other people’s profiles—not just their name, year, and college.
In my new designs, the class roster is now a grid view of the people in the class, where you are able to view at a glance interests, hobbies, as well as actual profile pictures. In the interest of having options, I added a button on the top right corner that switches the grid into the original list format if the user needs to scroll quickly.
"The chat page looks like it’s lacking some detail."
Before
Initially, I thought it would be a good idea to group the message button with the year and the college. However, after conducting this usability test, I realized a majority of people were not drawn to message users, because they were unable to find the message button easily due to its small size and faint color.
With this in mind, I wanted to make the message button the most noticeable CTA on the page by making it not only larger, but also a color that contrasts with the rest of the colors on the page.
After
"The chat page looks like it’s lacking some detail."
Before
My mistake here was that I did not conduct enough competitor analysis with my design. The user base will likely have experience with texting and messaging apps, so I need to adjust my application to match with what is expected.
To fix this design issue, I conducted more competitor analysis with apps such as Messenger and iMessage and added similar features to ClassPals, such as time stamps, a read receipts feature, and profile pictures to show who sent which message.
After
"The chat page looks like it’s lacking some detail."
Before
After
My mistake here was that I did not conduct enough competitor analysis with my design. The user base will likely have experience with texting and messaging apps, so I need to adjust my application to match with what is expected.
To fix this design issue, I conducted more competitor analysis with apps such as Messenger and iMessage and added similar features to ClassPals, such as time stamps, a read receipts feature, and profile pictures to show who sent which message.
Creating the (final) design system
Why did I need to edit my design sytem?
With the findings stated above in mind, I needed to update my design system to reflect the decisions I made to enhance the user experience of ClassPals.
What did I change?
Color
I noticed that some accent colors looked fairly similar to others that served other purposes. I do not want confusing purposes for each color, so I updated them to be more distinct.
Typography
I reduced the amount of type styles found in my updated ClassPals design for the following reasons:
- I didn’t use every heading / paragraph style
- The amount of type styles I had before made the overall design feel less organized
.png)