ConnectU

A digital solution to promote commuter students’ sense of belonging on campus 

ABOUT

ConnectU is a mobile app product that aims to foster connectedness amongst University of Toronto St. George Campus undergraduate commuter students, by connecting commuters to each other and to campus resources and events.

Collaborator: Natasha Malik, Nian Liu, Lee Wan Chun Wah

My Role: Lead in visual design, prototyping, and video production, I actively participated in all phases of the project, from researching, interviewing to ideation and usability studying.

Course Project – Fundamentals of UX 

Fall 2019, University of Toronto

Project Type: UX Research & Design

Project Duration: 12 Weeks

Tools: Figma, Adobe Photoshop, Illustrator, InDesign, AfterEffects

Skills: user interviews, empathy maps, personas, sketching, wireframing, storyboarding, prototyping, usability testing

Watch Our Promo Video

PROBLEM OVERVIEW

What’s troubling the Commuter Students?

To understand the context of the situation regarding commuter students, we conducted both primary and secondary research. For primary research, we recruited 25 participants for survey and 8 for interview. And news articles and research studies are the major sources for our secondary research. From the materials collected, we gathered the following key findings.

75% of students on the University of Toronto St. George Campus identify as commuters with an average travel time at about two hours round-trip and the majority of students commute at least 4 days a week.

Long commuting hours heavily influence students’ university experience. Of all the factors, students identified campus involvement (44%) and physical and mental wellbeing (40%) the most negatively influenced.

Factors Negatively Influenced by Commuting

Awareness / Usage of Commuter Resources

The University of Toronto provides specific resources for commuter students, such as Student Lounge, Commuter Dons, Meal Plans, and Commuter Lockers. However, about half of our participants (44%) were not aware of the resources and of the students who have heard of the on campus commuter resources, even fewer use them.

Quotes from Interview

We had 8 undergraduate commuters as our interview participants and plotted our findings onto a affinity diagram, from which we concluded that the major three issues for the commuter students are

 Lack a Sense of Belonging on Campus

“I feel Jealous toward my friends who live on campus and get to make new friends. I wish I had a commuting friend.”

Lack Awareness of Commuter Resources

“I feel I’m not making full use of the resources available at the University. I don’t know what is available.”

Lack Personal Time

“I usually go home directly after class because I have a bus to catch. So… no on campus activity unless it’s academic related.”

So the design challenge is …

How to help commuter students at the University of Toronto to build more connections and have full experience of on campus resources so that they can feel a sense of belonging?

REQUIREMENT ANALYSIS

Meet Connie the Commuter

From the research findings, we built our persona – Connie Smith the Commuter Student, a second-year student at the University of Toronto who spends an hour commuting to school. We also constructed an as-is scenario map looking deeper into Connie’s every-day journey and examined the pain points and possible according design opportunities in each stage.

As – is Scenario

Click image to view in full size

SYNTHESIS & IDEATION

Brainstorming

After we have developed an understanding of our users, we summarized the principle need statements and started the ideation process by brainstorming possible solutions. Using “Diverge-Converge” method with sticky notes, we came up with a total of 9 different solutions, including 7 realistic ones and 2 absurd ideas. The ideas are evaluated by using a prioritization matrix, and the most impactful and effective ones are refined into the 3 main features of the app.

Check the detailed documentation of our ideation process.

Design Proposal

We summarized three major need statements based on the pain points we identified in the experience of commuter students. And according to the three needs statements, we decided on the three features for our digital platform, and defined their impacts and values for each.

Need Statements

Social Engagement

Connie the commuter needs to find students with similar commute so that she can socialize on her travel

Main Features

Friend Connector

Initiate a connection with a commuter student who share similar routes within 5 minutes of setting up.

Time Scheduling

Connie the commuter needs to better arrange her congested time schedule so that she can feel more in control of her time

Event Matcher

Find events that fit into gaps in commuter students’ schedule in the same day within 24 hours.

Access to Resources

Connie the commuter needs to learn more about UofT commuter resources so that she’ll make full use of them.

Resource Finder

Find all commuter resources that matches user’s need within a single search

PROTOTYPING

We brainstormed for how our project will look like with low-fidelity prototypes. To begin the process, we first decided that our product will be launched on mobile phone because in all our researches, the commuter students favor mobile phone as their primary access to technology on route and I created the sequential storyboard with hand sketch and Adobe Illustrator.

Design Rationales

Some design rationales we developed for our prototypes are:

Personalized Recommendation: the app would prompt students to input their route and interests at first log-in so that it can better match their needs. We also added the filter section for each function so that users can flexibly adjust what they want.

Security Authentication: we added a Step 0 in our design, asking students to sign up with their University ID foe safety concerns. Also, when connecting with other commuters, there’s a confirm process on the receiver end.

+

Keeping track: to help commuter students feel more in control of their time and life, for “event matcher”, we added a calendar page with class schedule imported from school system and also the events added. Similarly, for “resource finder”, we enabled a mark as favorite” function for students to refer back later.

Easy navigation: since the app has three distinct functions, we included a bottom navigation tab for users to switch between features easily.

Low fidelity Prototype

Click image to view in full size

Lean Usability Testing

We conducted the first round of lean usability testing on the low-fi prototype with 4 representative users, asking each one of them to go through all 3 features using the think-out-loud protocol.  See Full Usability Testing Report

R

Here are the changes we made:

  • Prioritization – Put task that concerns user most to the top
  • Intuitive Search – Use visible bubble filters instead of sidebar
  • Flexible Browsing – Enable left/right swiping to flip between content pages

Mid fidelity Prototype

We then created the refined mid-fidelity prototype featuring the 4 steps. Check out the Clickable Prototype in Figma 

Step 0 – Setting Up Your Route in Profile

Upon the first log in, users will be directed to profile setting page where they can input the start point and destination of their daily commute and select the route as their profile.

Step 1 – Friend Connector

Users can view recommended potential commute friends, filtering by similarity in route, class schedule or hobbies. They can tap to view detailed information of the person and send connect invitation over the chatting page.

Step 2 – Event Matcher

Users can view the gaps in their imported schedule and browse for possible events in that fits the time frame. They can always tap on the events to view more details and register and add to calendar with just one click

Step 3 – Resource Finder

Students can browse for all kinds of commuter resources available and select the type to display on map. Tapping on marked location will open the overlay info page and users can mark specific targets as their favorite

SUMMATIVE EVALUATION

Usability Testing

For summative evaluation, we conducted another round of usability testing with more thorough metrics and included two parts: the first was an in-person usability test to examine the flow of the prototype and the second was a post-test evaluation questionnaire to learn about users’ impression on the features.

3 out of 4 users (75%) strongly expressed that our app was easy to navigate and they would like to use the “Event Matcher” and “Resource Finder” because the features match their needs for better scheduling and locating school resources. 

Some suggestions/problems we found in our feedbacks are:

 

  • Friend Connector – 2 out of 4 users expressed they feel reserved about the “Friend Connector” feature for safety concerns and also for feeling hesitant to reach out to strangers.
  • Information Overload – On certain screens, such as the profile setting page, there’s too much information for the user to find the thing they want.
  • Phrasing and Wording – Some of the terms we used are too self-referential, such as “resources”. A user said she didn’t know what’s included in there.

Next Steps

To address the issues mentioned, we plan to keep iterating on our design in the following four aspects:

Increase Safety

Introduce a security screening for users and add an opt-out option for “Friend Connector” Feature

Build a Community

Establish a community for commuter students by linking with friends on social media

Design for Emotions

Engage more visual elements in the hi-fidelity design process to make the app more relatable to its users

Think Beyond

The project can be applied to all three UofT campuses for addressing the common issue.

KEY LEARNINGS

“You are not your users” – I realized as a UX designer, it’s important to leave your presumptions behind and listen to what your users say. We found out in our initial research phase that if we approached our users with pre-constructed design ideas, we are likely going to be biased because we can only take in the feedbacks that agree with our pre-set beliefs.

 

Design for Emotions – One enlightening feedback we gathered was our design “looks too functional rather than emotional”. This brought up my attention since we initially set out to design a digital service to bring commuter students a sense of belonging. How can we design for emotions? For this project, we came up with one solution – use more visual elements in a storytelling manner in our design to engage the users, and hope to test it out in future iterations.

 

Less is More vs More is More – Whether to address all the issues mentioned by our targeted users or just to focus on one of them was an inner debate I had during the design process. Reflecting on our design process, I think both quotes (from famous architects) are right. In real problem-solving situations, it depends on the time and scale of the project and both can relate to users, and it’s important to keep a balance between the breadth and the depth.

All

ConnectU

MedMo

Redesigning Vea’havta

Graphics

Wenzhao zhang, 2020