LunchTable

 

Concept app for college students to make new friends and find study groups for their classes easily to increase interaction amongst students

Role:

UX/Product Designer & Researcher

Duration:

2 Weeks

Tools:

Figma

Team:

Me (Designer), Ahmed Alsubai (PM)

Background

The arrival of COVID-19 has drastically impacted education institutions on many levels, especially for students. Students’ capability to learn effectively has become much harder since the switch to remote learning and has had an impact on their college social life. Many find they learn much better with their peers and friends but without them, students struggle to get help and the lack of presence with classmates just makes them feel disconnected. 

Problem

How can we help increase interaction amongst peers in students’ virtual classes?

Solution

A friend-matching application that aims to help students that are struggling to develop good relationships with their peers in the same class and easily find study groups for their respective classes

Empathize ❤️

Although I am within the target demographic of university students in remote learning, I understood that my experience would not be the same as others from different universities, majors, and years of study. So I conducted interviews with friends to gain more insight into their perspective on remote learning. Their year of study ranged from Freshman to Senior and majors were Geology, Computer Science, Mechanical Engineering, Media Studies, Psychology, and Economics at different universities.

Interview Insight:

  • 100% of students felt disconnected and socially isolated from their classmates making it hard to meet new people

  • 100% used group chats as means of substitution for lack of class collaboration

  • 86% were scared to initiate a conversation due to a fear of rejection.

  • 71% would be more willing to take the first step to reach out to a classmate if they got a feel of what the classmate’s personality is like.

  • 57% felt like they would have lost motivation for learning if they didn’t have a friend keeping them accountable.

To get a more solid understanding of students’ experiences in online classes I did research beyond the interviews that I have conducted myself. I looked at articles, surveys, and studies regarding the effects virtual learning has on students and what students were going through with virtual learning. 

Secondary Research Key Discoveries:

  • Journal of Medical Internet Research found 86% of participants experienced increased stress and anxiety during the pandemic due to decreased social interactions.

  • A series of surveys conducted by BestColleges.com on the effects the pandemic had on college students found that nearly 46% of the respondents reported feeling more isolated and lonelier, around 2 in 5 students noted that it's been harder to meet classmates and make friends, and 56% found their main challenge was difficulty meeting peers/making friends/developing romantic relationships.

 

Define 💭

Affinity Map:

To organize all the insight I gained from the interviews I needed a way to categorize all my findings to figure out the main pain points for college students in virtual learning. The strategy I decided on was to use an Affinity Map to organize the findings into groups to see varying relationships.

 
 

Personas: 

My PM had already made a persona named Alex but I decided to add more onto him to make him like an actual person to give me an idea of how to meet my user’s needs or challenges. I also made the decision to have a second persona named Gwen to get a better grasp of who the potential users would be and to meet more of their needs or challenges. Both were made revolving around the grouped categories that were created from the affinity map. With these two personas, it helps a lot to stay focused and create a design that serves real users constantly keeping them in mind. 

 

User Journey:

I created a user journey based on my interviews and the personas I have made. This helped me visualize how a user would achieve a specific goal and identify areas of improvement opportunities. I already had the base idea that the project would be a friend finder app so it was a way to explore potential features and ideas as the user would be using the app in a general sense.

Problem Points:

Combining all the challenges identified from the interviews, research, affinity map, and personas I found these to be the main issues:

  • Classes make it harder to build connections or provide no opportunities to start building relationships with classmates

  • Students like to be in group chats but a lot of effort is needed in making one and finding those group chats.

  • Lots of students doubt themselves and are in a state of irony where they want to make friends and reach out to students but have a fear of rejection which keeps them lonely. 

  • Want to know a bit about the person before they reach out to them

 

Ideate 💡

Brainstorming: 

I got onto a call with my PM for a Brainstorming session to generate ideas of what we envisioned the app to be like as he and his team generated the concept I wanted to see if we were on the same page. Overall, ideas were very much aligned but had moments where we had different visions of the app so we continued to bounce ideas off each other in order to find a solution that satisfied both of us. These are the ideas we both had agreed upon.

  • Filter search based on Major, Minor, Classes, Class year. 

  • Give the user to filter the type of friend they want

  • Limit the number of Matches to 3 a day and have a queue

  • Discover Study Groups

  • Have a Match/Compatibility Meter.

  • Once a match happens a message will introduce the users to each other. 

How to Promote the App:

  • Promote the App on Blackboard, Canvas, and Moodle

WHY?

All 3 LMS websites will have a notification at the top of the screen prompting students to download the LunchTable app saying “Want to meet other students in your class?”

Design Exploration Sketches: 

I started sketching to generate ideas on how the app’s layout should look and how to design some of the pages. First I drew out the app’s structure to know what pages my app would need and explored the navigation bar. After that, I used the Crazy 8’s method to sketch out 8 variations of the Tinder swipe-like page, the user’s profile, and the search filter. I later showed off my designs to get feedback 

Design 🎨

Detailed Sketches:

From my Crazy 8’s session as well as the feedback I got, I looked at the ideas I generated and broke them to see what worked and didn’t. This allowed me to do quick iterations from these ideas, saving me a lot of time doing them earlier in the process. I knew that I would most likely have to mix features that I concluded would be important to make the user’s experience better. This helped me to flesh out the onboarding, discovering a new friend,  and the messaging process to get a solid app structure.

Digital Wireframes:

Now feeling that the layout of the app felt solid using my sketches as the base, I started creating digital wireframes to now to then eventually create a prototype to conduct testing. 

Some of the digital wireframes

 

Testing 🧪

User Testing Results:

Overall from the user testing found the experience to be satisfactory but there were some changes that the users preferred that they wanted changed to make their experience better. 

  1. Rather display all the options rather than having to tap on Advanced Filters when filtering their search.

  2. Inclusivity for people with different gender identities

  3. Confused about what to interact with to add a person as a friend in messages

  4. Make info for a user’s card on the Friend Finder page more identifiable.

  5. See when the match is online

Changing the onboarding process

From the user testing 2 main changes that were mentioned was to rather having all the filter options being fully displayed rather than tapping on the “Advanced Filters” option to see them and have inclusivity for people who have different gender identities.

I didn’t want the screen to be overwhelming for users so that is why I made the “Advanced Filters” option to not take up too much of the screen and be more manageable for users. But testing showed that people would rather see all the options then and there than having to open up another screen.

To have more inclusivity for people of gender identities I made a new addition to the Onboarding process to give people the choice in how they’d like to be called and how they’d like to place themselves in searches. Due to this new step this changed several other screens such as in the “Show Me” screen where it has the new filter option to show people of the same gender identity first in their searches.

 

Changing the User Cards

From the user testing the main change here was to make the information on the cards to be more identifiable as the testers said they’d probably be quickly scanning the info on the cards and would want an easier way to know what info represents what. So the an easy solution for this is to add icons to each of the info lines.

Some additional changes I added was to display the users pronouns on their card based on the previous iteration of inclusivity. The other change was showing mutual friends as they helps some people to begin a conversation by saying something like “Hey I saw that you and me have ____ as a mutual friend.” Also there is the likelihood that they would have even more share interests and experiences. The last change was having a Slider Bar as it better communicates to the user what gesture to make to explore the card.

 

Changing the Messages Navigation Screen

Users said that they thought the red notification dot meant the user was offline due to me using a red dot in the Study Group Discover page to indicate that all users were offline in the group. So my solution to resolve confusion was to have a “New” stats pill to communicate that it is the new match the user had just recently made. While making this change I decided to change other parts of the screen such as the “write message” icon. I changed it to the one more common on most messaging apps as it is more recognizable compared to the paper airplane icon. The last thing is just a introduction message to just ease the user about the new match that was made.

I did user testing again to see if these were changes beneficial and all the testers said they liked the news changes and that it made it easier to understand what all the features were communicating to them.

 

Changing Messages (conversations)

From the user testing the challenge that kept recurring was people were confused on where to add the user as a when conversing with the new match. A solution I came up with was to use like an Add button on top of the matches profile so the user can easily tell the user that they can tap that to add the match as a friend and it also helps to tell the user that their friend request was sent and they don’t have to attempt to add them again.

Some new features I added is an Introduction message to help ease both the user and the match to ease into a conversation. The other feature is updates on the messages is seeing updates on the Friend Request status such as it being sent and it being accepted.

 

Final Concept 🎨

 

Onboarding

The user creates an account on LunchTable by one of the LMS (BlackBoard, Moodle, Canvas) for the app to verify that the user a student and too access other information from the LMS like classes the user is taking. Once verified they can start to create their profile with the basics such as their name, class year, what they prefer to be identified as. The it gets to part where they can showoff who they are with a bio, their interests, profile picture, and additional photos if they care to express themselves more. The very last step is filtering their search where they can alter their scope in who they seek for as a friend.

 
 

Searching for a Friendship

User can swipe up or down to learn more about the other student from the information the student provided and see the compatibility meter which is based of their shared interests. If the user doesn’t find the student to be a good match they can swipe left reject them or right if they do want to match with the student. If the users search is very narrow and they swipe left on the last card based on their search filters they will see a message telling them they have reached the end of their search where they can choose to readjust their filters if they want. There is the option to rewind to bring back the previous card they swiped left on in case they made a mistake or decide to change their mind. But if they do want to watch they’ll have an animation showing they matched and they can go directly to messages to talk to the new match.

 
 

Looking for a Study Group

By using one the LMS, in this case Blackboard, Lunchtable can get information from it to figure out what classes the user is taking and gives them study groups for those classes. From there they can see the assortment of group chats for those classes and they can decide on which they’d like to join. After confirming their selection they have the option to be taken directly to messages to the study group chat and talk to their students. Here they can develop friendships with those in the group and they can talk to each other to get help with homework or other assignments. Makes it much easier to find a group chat for their class and doesn’t require a student to having to constantly share an invite for people to join in.

 
 

Making a new Friend

Here on Messages the user can see the three matches they had made for the day on their queue. The reason to limit to 3 matches a day is to make sure that the user actually takes their time to talk with their matches and value the time they have to get to know each other better. If not limiting the amount of matches they can have many matches with people but be ignoring some to prioritize others which would make those ignored and hurt their self-esteem even though that is no the users intention. Now the user has 24 hours to talk to their three matches and the match will be removed from the queue and their conversation will be gone if they don’t accept each other as friends within that time frame. But if the user does accept their match as a friend the match will be removed from the queue but the conversation will be kept but just moved underneath the other matches conversation's. The reason they are moved underneath is to make sure that the user still continues to talk to the rest of the matches left in their queue.

 

Reflection

While constructing this project definitely taught me so much about the design process. One of the things that I struggled with when learning about the design process is the fact that design is a non-linear process. Reading a bunch of articles and looking at the case studies I kept wondering what direction to take and how to consider what tools to use or not. “Oh this person used a journey map I should use it then” or “this person skipped this step that I’ve seen so many others do, is this something that I should not do to save on time?” I had to remind myself that tools like personas, empathy maps, etc are artifacts of a process and are not a checklist of artifacts that I need to have done to be “officially” correct. I had to focus on what tools I can utilize to help me better solve the user’s problem. Processes for the sake of process will just ruin genuine progress in solving the user’s needs, so if I don’t need it I shouldn’t do it.

An important step during the design process was to separate me from the users who are also college students struggling with adapting to the remote learning environment. By distancing myself I had to make sure that I wasn’t trying to satisfy my own needs to make online learning better, but the needs of the majority of users. The main thing that kept slowing me down was the perfectionism that I learned I had while working on this project. Everything doesn’t need to be perfect when exploring ideas. I kept wanting to make everything perfect, even my medium-fidelity prototype, and I was investing too much time in elements of the app that were less than crucial. I even got too scared to start sketching cause I wanted the perfect layout to come to my head first before I would draw it out, but with research, I learned new techniques like Crazy 8’s which helped out a lot during the ideation stage.

Next Steps

  • Since the app’s main objective was to meet the needs of students stuck in remote learning, I’d need to do more testing and exploring to see the longevity of this app once colleges are back to in-person learning.

  • Take more time exploring the impact of limiting the number of matches to just 3 a day and if users find it too restrictive and want more matches.

  • A new feature that helps students to discover extracurriculars/clubs at their colleges so that students can make new friendships and meet others who share the same interests as them.

  • Do interviews with students who are common subjects to being harassed on the app or apps similar to LunchYable to develop preventative measures against harassment.