top of page
Yo-Mockup-PC.png

Interaction Design | UCSD

Student Engagement Platform

An exclusive student engagement platform which centralizes campus resources and strengthens the UCSD student community by connecting students with similar interests and peer support for emotionally distressed students.

Problem

​Overview

UCSD students are very talented individuals, but they are diverse and isolated as a whole. Incoming freshmen experiences social anxiety and have trouble making new friends. The graduating class is all stressed out about grad school of job hunting, but they also want to find peers undergoing the same problems. Others are always in fear of being the “outsiders”.

Web Platform Design

Duration: Sep - Dec 2018   3 months

Team: Staci Xiang, William Yao

Contribution: Product Thinking, Contextual Inquiry, Interaction, Heuristic Evaluation, Prototyping 

How might we design a platform to help students explore and easily locate campus resources and make lifelong friends?

User

​Research

PRIMARY

Context Inquiry

Online Questionnaire

Natural Observation

SECONDARY

Online Research

​Heuristic Analysis

​Comparative Analysis

INITIAL FINDINGS FROM CONTEXT INQUIRY

​Going to events without a friend is awkward and scary

New students are struggling to adapt to a new environment. They are afraid to explore clubs and campus resources alone without a friend to company each other.

Students need a safe place to express and communicate emotions

Technology feeds on depression and social isolation. Rather than strengthening social connectivity, social media can undermine our mental well-being. Students rely heavily on social media from the outside world to seek comfort and escape reality.

Information is scattered

Students need to find information relevant to classes and activities on multiple platforms. However, some claimed too many choices are actually demotivating for them. In one of the observation sessions, a participant showed us her process for finding an event of interest which that does not conflict with her class schedule. She had up to 15 tabs open, but still couldn't find one she is interested in.

Screen Shot 2020-03-03 at 10.58.40 PM.pn
Screen Shot 2018-12-07 at 10.49.04 AM.pn
Screen Shot 2020-03-04 at 10.05.25 AM.pn

Define

& Ideate

DESIGN OPPORTUNITY

An exclusive  student engagement platform which centralizes campus resources and strengthens the UCSD student community by connecting students with similar interests and offer peer support for students going through emotional distress.

STORYBOARD

With the design opportunity in mind, we moved forward to ideation. We created storyboards to empathize with students' experience with an engagement platform and visualize the user interaction flow.

​We presented our storyboard to a group of 15 UCSD who specializes in interaction design, and they all gave positive feedback for this storyboard. One stated that UCSD students definitely need a platform like Yo!

Screen Shot 2020-03-04 at 11.29.03 AM.pn

​PROTOTYPE 1

Initially, we created a digital prototype, mainly focusing on helping students build connections through classes. However, after presenting the prototype to 3 students and one TA, we discovered that students want more, active ways to engage with content.

​Users found this wheel spin "site map" interactive and intuitive.

The use of emojis to display ratings were well liked.

Yo-Prototype1.png

100% Users found these information very helpful.

Profiles offer a quick dive into users' interests.

Can we connect emotions with thoughts?

Redesigned Prototype

This time, we designed using a paper prototype because we wanted to see how users interact with emojis and buttons. We added more interaction and engagement features to the paper prototype, such as an interactive map where students can send posts based on their locations on campus. Every post is associated with an emoji to encourage students to express themselves. Also, there is a live feed function where students can find other students or posts of interest based on classes, clubs, and events.

An emoji bar that slides out and allows users to post their feelings and thoughts.

Users can see posts about events or stories when they click on or search places.

Yo-Prototype2.png

Users select categories when they post which can be filtered to select topic of interest in live feed.

Users can "favorite" chats or pin chats on top.

USER JOURNEY DEMO

A frustrated student's journey with Yo!

Build

​& Refine

OVERVIEW

After ideation, we decided on 4 main features for our platform: Interactive Map, Chat Box, Student Profile and Live Feed. I was responsible for designing the 2 main flows of the app:

  • Exploring Interactive Map and sending out Emoji Posts

  • Navigating the Live Feed and searching for posts of interests

Development Plan

We created a develop plan on excel to track the progress of our project development and communicate more effectively during our weekly meeting.

Yo.png

FINAL PROTOTYPE DEMO

What I

Learned

Unknown.png

BE ASSERTIVE

Being able to assertively communicate as a team in a timely manner is significant, especially when there is a disagreement. 

14fb97c5e686adc662b7e27887d65df8.png

TAKE CREATIVE RISK

I learned to take creative risk and be bold in the ideation phase, and it enabled me to come up with the interactive map as the home page idea.

Next Steps

emoji-customize.png

CUSTOMIZABLE EMOJIS

Participants thought it would be cooler if users could post customized emoji to personalize the interactive map. We think this is not that necessary at current stage because we have enough emoji to let users express their feelings. But we think it is a good suggestion and we may implement this feature when other features in the app are stable.

map.png

ADD FRIENDS DIRECTLY FROM MAP

Participants were confused about how to add friend in our app. We originally designed to let them add friend after viewing each user’s profile, but it may intuitive enough for some users. So we decide to add the add friend button to each emoji post and feed post, and users can decide whether to add friends directly or after viewing their profiles.

bottom of page