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.
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
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