CollegeConnect
A localized social media platform designed for creating those ever-so-important surface-level connections that can open the door to deeper relationships.
The Task:
Our team was tasked with redesigning an already functioning social media platform, to solve a problem that we saw in our own lives. We chose Nextdoor, which had a niche community we could utilize to tackle our issue and subsequently narrow down our target audience.
The Problem:
The problem we chose to tackle was prevalent in our daily lives as students of UC San Diego, which was the dying social life in the light of a pandemic. We wanted to make a middle ground between personal and business social platforms that students could use to make surface-level connections.
The Goal:
With Nextdoor, we saw a way to socially connect students on a much more surface level, while still providing methods of deepening the relationship if they saw fit. We wanted them to be able to find students in the same class, dorm, or major easily without needing to scour other social media platforms.
Stage 1: Research
The first step in our project was researching our competition and analyzing their strengths and weaknesses. Due to the nature of our redesign, we narrowed down our analysis to focus on social apps we already used or had heard about.
Competitive Analysis Matrices
We used a matrix to analyze and assess our competition. Our team decided to split them up into two categories: Geosocial Apps, such as Nextdoor, Bumble, and Tinder, and Social Messaging Apps, such as Reddit, Discord, and Instagram. Additionally, included a section for CollegeConnect, to get a realistic comparison on how our features would stack up against similar ones in other apps.
-
Geosocial Apps
In our first matrix, we compared the geosocial apps to each other. Since CollegeConnect had the best fit in this category, we included it too, along with inputting some ideas we had to features in relation to the rest of apps. We shared strong similarities with Nextdoor and Tinder, and were able to incorporate features of both of their apps in our final product.
-
Social Messaging Apps
In our second matrix, we analyzed several social messaging apps. Our primary focus for this analysis was to figure out what type of messaging platform we wanted our users to have since that was their main form of contact besides following each other. In our final design, we implemented many of the features we saw on Discord and Instagram, including creating group chats and direct messaging users.
Interviews: Round 1
We moved on to our first round of interviews to assess what our pool of users wanted out of an app such as CollegeConnect, and how they hoped to achieve those goals. Due to COVID-19, we conducted our interviews virtually over Zoom, and while not as ideal and in-person interviews, managed to secure us plenty of useful data.
Our interview questions focused heavily on how interviewees made friends both online and offline, and we looked to find out more about their experiences both during and before the pandemic began. We found through personal experience and anecdotes that a lot of college students were having trouble making new friends and maintaining connections with friends through school, so we wanted to explore that aspect further.
On the right, I’ve listed the essence of the type of questions the interviews included along with key points we wanted to ask our interviewees.
How has your experience been connecting to friends/making new friends in college during this pandemic?
How do you keep up with friends you can’t see in person?
How did you make friends in college?
Have you used an app to meet new people? Describe that experience.
What information do you look for when looking at other people’s profiles?
What do you look for in friendships (similar hobbies, interests, major, etc)?
Demographics
Personas
The final step in our first stage was creating user personas to help further guide our project in its future renditions. We made a total of 2 personas which we felt encompassed two major types of users - the incoming freshman who was looking to make friends, and an already socially involved junior looking to recruit.
Stage 2: Prototyping
After we had gained considerable insight into our competitors, users, and what type of features we wanted to target, it was time to begin prototyping. This stage consisted of storyboards, wireframe sketches, and ultimately a low-fidelity prototype UI made in Figma.
Storyboards & Sketches
We began prototyping by creating a set of storyboards and sketches to start visualizing our user-interface and solidify our use-case scenarios.
Low Fidelity Prototype
Finally, after finishing up our research and creating sketches, we compiled the first iteration of our user interface using Figma.
Interviews: Round 2
After finishing up our low-fidelity prototype, we were on to our second round of interviews. We focused heavily on user experience in tandem with Nielsen's heuristics to gauge how successful users were in completing each task.
The interviews were again held over Zoom due to COVID-19, which actually came in handy since it allowed us to record our interviewee’s screens to look back on their struggles when changing the prototype.
Once again, you’ll be able to see what types of questions we asked on the right. We focused mainly on letting the user explore the interface and giving as little help as possible, to find the worst flaws in our system. Due to this hands-off nature, most of our questions were based on gathering insight from the user, along with asking about how they felt about doing the task.
Tasks:
Find the DSGN 100 Group Chat
Navigate through CollegeConnect to find school organizations related to coding.
Insight questions:
Could you see yourself being able to find meaningful friendships through CollegeConnect?
What kind of information would you want to learn about other college students?
Are there any features you wish that CollegeConnect had?
How concerned are you about privacy on this app?
Final thoughts
Stage 3: High-Fidelity
After another round of interviews and numerous changes to the prototype, we finally arrived at the high-fidelity stage. Here we focused on adding the finer details to our prototype, along with creating a stylesheet and adding color.
Stylesheet
We decided to allow the university to control the main colors for Collegeconnect, in a similar way to how Canvas handles it’s color scheme. For UCSD, we chose the university blue and yellow that it’s students would find familiar. We also chose a font family, Lato, that would help standardize the app across schools.
High Fidelity Prototype
This is our final iteration of the user interface for CollegeConnect. It includes all of our planned features and is the result of weeks of testing and revisions.
Home Page
CollegeConnect’s homepage was designed to show the user as much pertinent information as possible at once. We wanted to ensure that every time a user opened their app, they were shown something useful on this screen. This example includes a post from a classmate and also includes a search section.
Profile
Collegeconnect’s profile displayed our user’s most optimal interests to try and facilitate a real connection between the two parties. Collegeconnect prioritizes user safety and offers users full control over their own profiles.
Messaging
Our theory behind the messaging interface was the tried and true testament of “simple is best” - simple to read and accessible UI is often all messaging needs. While it is important for College to connect to foster relationships, ultimately we want the users to use their own means of communication.
Clubs
Student organizations are often the lifeblood of socialization at many universities around the world. Collegeconnect offers our user’s a fast and efficient method to find and contact the organizations that they are interested in. This in turn also helps the collective social community at the university to grow as well.
Interviews: Round 3
To wrap up our project, we ran one final round of interviews using the latest high-fidelity prototype. We focused primary on the look and feel of the user interface, along with getting insight into how polished it felt to the users both visually and in practice.
Once again, the interviews were conducted over Zoom due to COVID-19, and recorded.
The final list of questions can be seen on the right. We kept the tasks similar to the last interview, but focused more on the how the end user felt after they completed their interactions and much more insight based information that they could now provide.
Tasks:
Find the DSGN 100 Group Chat
Navigate through CollegeConnect to find school organizations related to coding.
Insight questions:
What were things you liked and disliked about CollegeConnect?
Do you think the tagging system was helpful or would it be a hindrance to your experience?
What are your thoughts on splitting up the individual and group chats?
What kind of information would you want to learn about other college students?
How do you think CollegeConnect differs from other social media applications?
Are there any features you wish that CollegeConnect had?
Closing Thoughts
This project was the largest and most successful one I’ve done so far, and I’m proud of the final product. That being said, it was a long and challenging journey that I learned a lot from.
What we did right:
Privacy: interviewees were amenable to sharing their information on an app like this, since it would be limited to college students
Use of Nextdoor: interviewees thought it was a smart way to incorporate features they liked
Interaction: many said that they would use this to find clubs and interact
What still needs fixing:
Confusion over tagging differences on homepage and clubs page and lack of generalized tags: reorganization of the tag system
Making sure our clickable prototype was thorough: users wanted to be able to click on all working features
Addition of relevant info, like pronouns.