Role
Led research analysis
Conducted user interviews
Prototyping
Conducted usability tests
Visual Design
Client
UofT
Innovation
Hub
Tools
Mural
Figma
Figjam
G-suites
Team
Yuet Ming Wong
Yanch Ong
Min Lin
Qinzi Rita Yu
Yubing Chi
Yuhui Zhang
Sector
Student Life
Platform
mobile
Duration
2 months
Oct - Dec 22
University is a great place for younger adults to explore their passion and direction in life. New coming students at the University of Toronto(UofT) are not different. They wish to develop their school life with new interest and find a community that they belong to. Even with their strong wishes, it is difficult to get involved in clubs activities with the current setting.
The Problem
Flock is a mobile web application for student community at UofT to get involved with clubs. It provides students a unified platform to quickly view and search for all the clubs and activities in happening at UofT. 3 key features included: matching students with clubs who are also interested in them, exploring new passions, and communicating with club leaderships.
The Solution
How does Flock work?
Upcoming and Following Events
After logging into Flock with UofT student ID, the Home tab will show the upcoming and following events for regular users to quickly find out the event informations they needed.
There are 3 options inside the Explore tab, the Clubs allows users to search for clubs based on different categories. After finding a specific club, users can follow and find out its basic information and openings. In addition to that, they can directly contact the club’s leadership through the messaging function.
Different Clubs Exploration
Events Nearby Exploration
The other option inside the Explore tab is Nearby. Users can search for events that are happening nearby at a specific date and time frame. Besides, they can also reserve tickets for those future events that they found out. The tickets will then show up on the upcoming events page.
Users can show their personality to the club leaderships as well. By clicking and editing on the Profile tab, they can add their basic information, hobbies, passions, and visions etc. to their own profile. After all, finding and joining a new community is a two-way process. It is important for students to show who they are as well.
Edit My Own Profile
Design Process
Research
In order to get a general understanding of UofT students’ attitude towards clubs and its activities, a deep dive into the online discussion forum on Reddit (r/UofT) was done. From the online community, numerous questions about clubs have been found. Most students are confused and disconnected.
Background Research
The 2 main confusions are:
1. How do I find clubs that I am interested in?
2. How do I get involved in those clubs?
To further investigate UofT students’ experience and involvement with clubs activities, an online survey with 50 respondents was conducted. Same kind of confusions were again, found in the survey results.
(View the complete survey Here)
Survey
With that question in mind, 7 semi-structured interviews were conducted with UofT students. Their responses were summarized and grouped into an affinity diagram with similar themes.
User Interview
Three important pain points were found:
1. Scattered Information Channel
Existing information is scattered across social medias and official school website. It is hard to find the clubs that students are interested in and what those clubs do.
The Club Fair which is held once a year at the beginning of fall semester seems to be the most useful resource. Once students missed it, they don’t know where else to look information for.
2. Lack of Access
3. No Communication Bridge
Club organizers/leaderships often felt busy or unsure about responding to a student who they know nothing about. As a result, most students who tried to reach out don’t hear back and don’t know how to get involved.
Empathize
After analyzing the qualitative and quantitative research data, the user persona:
Mia the One Person Show, was created to further emphasize with the user group.
User Persona
We identified that Mia needs a way to:
find useful clubs information that she is interested in.
contact and communicate with the drama clubs leadership.
participate in drama clubs activities.
Even social butterfly like Mia is having a hard time to find a community and get involved in clubs at UofT. To better understand her pain points, a journey map of how Mia currently tries to join a drama club was created.
Because of the scattered source of information and lack of communication channel, Mia found it extremely difficult to get involved with a club after missing the club fair. She felt left out and disconnected eventually gave up on drama clubs because of the confusion.
As-Is User Journey
Define
1. A UofT student interested in clubs can find useful information about clubs without going to the Club Fair, at any time, from anywhere.
2. A UofT student who wants to join a club can find a club which they are interested in joining that is also interested in them.
3. A UofT student who wants to develop a fruitful life outside of academics can discover new hobbies that they never even considered in the past.
3 main design goals are identified after analyzing Mia’s journey to join a club:
Design Goal
Ideate
With the 3 goals, countless amount of brainstorming and ideations were done. The ideas were dot-voted among the team based on impact and feasibility. There are 3 popular ideas that we decided to take it to the next level and further develop the concept as an app.
Big Ideas
1. Digital Club Fair
Run around with your little characters like Club Penguin. There’s a sense of exploration like in a real club fair. Similar clubs are grouped together.
Check a time and place and see what activities are going on that you can attend. Sometimes you have a random gap between classes that can fit something in. It is an event based approach to club involvement.
2. Whatever’s Going On
You just swipe through club profiles. Navigate through a lot of options very quickly. There will be engaging and digestible profiles that you can go through to understand what a club is
3. Club Dating App
The 3 big ideas were integrated into Mia’s journey of trying to join a drama club. In Mia’s new journey, she is able to communicate and found a drama clubs that she belongs quickly and smoothly. In addition, she even found a new passion after joining a nearby event. This time, Mia is fulfilled and connected.
User Journey: To-be
Prototype
Based on the 3 big ideas and 3 design goals,
we created a low-fidelity prototyping covering 3 tasks:
1. Finding and following a club I am interested in.
2. Finding information about an activity happening nearby.
3. Edit your own profile to include your passions.
Lo-fi Sketches
Evaluation
With the low-fidelity prototype, online usability tests were conducted with 6 UofT student participants. They were required to first participate in a 5 seconds test talking about their opinion of the app at first glance. Then, they were required to complete the 3 tasks with a think-aloud approach.
Usability Testing
2 main improvements were made:
1. Restructured Information Architecture
Based on the participants’ comments. We realized searching for clubs was likely to be an infrequent task. The most common task was likely A) viewing upcoming activities I signed up for or B) viewing the activities from the clubs I follow. These were separately hidden in the profile and activity tab respectively. We took those two main tasks and moved that into the home page, then combined the rest under an explore tab, which makes more sense because they’re for searching out new clubs or activities to get involved with.
Before I.A.
After I.A.
2. Reimagined Personal Profile Page
Some participants mentioned that being like a dating profile made them feel a little weird and uncomfortable putting so many personal photos up on a school site. Hence, we kept what we liked about the dating profile idea, that customizability of the prompts. But we removed the images and kept just one. We added basic information like faculty, year. And the final interface drew more from LinkedIn to make it feel more official and formal.
Visual Design
Flock is an app designed for the University of Toronto specifically. In order to show a sense of unity, the style guide was developed by strictly following UofT ’s brand guidelines.
Style Guide
Trade Gothic in regular and bold styles were used in Flock. The minimum font size in body copy for print is no smaller than 9.25 point.
1. The Typeface
Primary color is UofT’s signature blue. 3 other secondary colors were picked from the guidelines to represent a sense of diversity and colorful life in the UofT campus. 3 other neutral colors were used as background and text colors in Flock.
2. The Colors
The Flock logo is inspired by the Defy Gravity workmark and its caret symbol. To inherit the value of upward momentum and rising above any challenge, 3 caret symbols with different colors were used in the Flock logo. The 3 colorful caret symbols represent an upward momentum to move together, with diverse groups and communities.
3. The Logo
Conclusion
Next Steps
The communication experience between students and club leadership is currently under-explored. The situation of club leadership not replying or replying in a slow manner needs to be further researched and analyzed.
1. Expand club-applicant messaging
2. Further Develop on-boarding experience
The communication experience between students and club leadership is currently under-explored. The situation of club leadership not replying or replying in a slow manner needs to be further researched and analyzed.
Club leadership is another important user group. We need to conduct more user research to understand their needs and pain points with the current situation.
3. Club leadership research
A companion prototype has to be created for club leaders to communicate with members and put up events. This will be based on the club leadership research.
4. Companion Interface
We can more concretely discuss how Flock fits into the rest of the UofT services, such as with the Student Life App and the Student Organization Portal.
5. Flock & UofT Services
Lessons Learned
Sometimes what participants said and did during user interview or usability test seems like a minor issue, but it could be an indication that there is an important underlying problem. For example, 1 participant mentioned he is confused about the personal prompt on the profile tab. It actually means a good on-boarding experience with an introduction and walkthrough to entering personal profile is needed. It is important to analyze every little clues and put together a bigger picture.
1. Listen and Observe Carefully
2. Respect Equal Voice within a Team
This is the first time I work with team members who don’t have a prior design background. It was a frustrated process at the beginning as not everyone fully understand the concept of design thinking yet. But I figured when I use a more open-minded and welcoming attitude to communicate, the team members are more likely to share their insights. Everyone has a unique and valuable opinion. It is important to value every single member in a team.
