Empowering academic and professional connections
🧲 MadNet - an intra-school student social network
TIMELINE—
Jan - May 2022
ROLE—
UX Designer, UX Researcher
TEAM—
3 designers
TOOLS—
Figma
As a student at UW-Madison, my sophomore year was met with the COVID-19 pandemic. What we thought would be a temporary, 2-week period of online classes ended up being almost a 1.5 years of online classes, interactions, and communication (along with regular testing!).
This period presented the challenge of getting creative with communicating with fellow classmates to socialize, but a lot of us were burnt out from staring at our screens for so many hours in a day to put in more effort. MadNet makes this easier.
In this class group project, I, along with two other student- designers, were responsible to design a solution to make it easier for students to virtually connect with students and alumni.
Context
Impact of the COVID-19 Pandemic
The COVID-19 pandemic caused everything to move online. Work was moved remote, universities and schools all over the world shut down and conducted classes virtually. This went on for 1.5 years. Students' social lives were impacted greatly and networking with peers was harder.
The COVID-19 pandemic caused a rapid shift to online environments. Work became remote, and universities and schools worldwide closed their doors, moving classes to virtual platforms.
This lasted for about a year and a half, significantly impacting students' social lives and making peer networking more challenging.
Problem
Endless opportunities, fleeting connections
College is a busy time for students, there’s academics, research, part-time job(s), volunteer and club work, health and fitness to stay on top of.
As a college student who attended college during a pandemic, I’ve struggled with making connections that lasted beyond a semester and have noticed other people experiencing the same issue.
This led to our team formulating the question:
How might college student tackle loneliness and difficulty in making meaningful connections at UW-Madison during the pandemic period?
Research
User Interviews
We started the project by conducting research via user interviews. The interviews were conducted in 2 parts with the same group of people.
In Part 1: we formulated 7 questions based on how students interacted with unfamiliar people in class, and other academic and social settings in university. We chose to focus on the ethos and the means of communication students preferred.
In Part 2: We modified the questions and narrowed down our focus, and re-interviewed the same interviewees about their experiences.
Remote interviews
We conducted interviews with 7 students of varied backgrounds
Online Surveys
17 questionnaires with detailed answers
88% of students struggle
due to personality, online mode, or other factors
Personas
Students and Alumni need help connecting with each other informally
We created 3 personas to capture a range of our target participants:
Mia - a social butterfly who finds it easy to make friends initially, but hard to keep up the connections
Sophia - a shy, inquisitive student whose academics are suffering due to her struggles in making meaningful, lasting connections
Ivan - who seeks professional connections and an easier way of connecting with Alumni
Journey Mapping
Students start out the semester optimistic, but as things pile on, the effort and desire to socialize reduces…
We sketched out user journey maps of all three of our personas and how they navigate meeting new people and socializing throughout the semester and school year, in locations such as their neighborhoods, classes, organizations, and workspaces.
Ideation 💡
Drawing inspiration from Magnets
🧲 MadNet, short for Madison-Network, inspired by Magnets and their properties.
After several brainstorming sessions for the Brand Name, we honed on MadNet. The name serves as a play on the word magnet, and as a pun on Madison-Network. Our brand identity was inspired by magnets and their properties, as well as UW-Madison’s school colors.
Branding
Opposites attract
Focusing on the idea of our app being a magnet, and connecting people, even those with opposite personalities who would work well together.
For our brand identity, we zoned in on colors associated with magnets - shades of red, blue, grey, and black.
User Flow
Students desired a personalized experience & wanted results without spending much time.
As we were sketching user flows of how our app should be structured, we realized that students really don’t want to put in too much effort, and a personalized experience, with a focus on friend and event recommendations.
Storyboarding
How would our personas navigate the semester if they came to life?
We created storyboards for each of our personas and dived into a scenario in their world which would prompt them to use our app, Madnet.
Design
Wireframing
Designed to offer a personalized experience with the least amount of time spent
Based on the User Flow and Journey Mapping, we created wire framing screens to illustrate how we envisioned our app to be. We took inspiration from pre-existing college-based and networking-apps (such as Demic and LinkedIn, respectively)
Testing 1, 2, 3…
Usability Testing
After the first round of testing, this is the feedback we received:
WHAT WORKED
- Liked aesthetic
- easy-to-learn mostly
- Pops of color
- No broken links
- Search options
- Consistent
WHAT DIDN'T WORK
- A lack of back buttons
- Didn’t like the harsh edges
- Navigation took time to get used to
- Search options
- A little dull
Reiterating…
So we went back to the drawing board and worked on improvements
2024 Refresh
We go on and on
After the first round of testing, this is the feedback we received:
Challenges
Areas of Improvements
Add more features and allow integration with other existing apps like Canvas, Handshake, LinkedIn, Duo Mobile, etc and add more interactivity and illustration.
Reflection
Focus and Impact 💡
Through this project, we learned to focus on human-centered design and how to align a whole project with a brand identity, including navigation icons, input actions.