Low-Fidelity Sketches
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.
Lean Evaluation
To identify early-stage usability issues, a lean evaluation was conducted with 6 representative users. The methods included a 5-second test, think-aloud testing, and a post-test semi-structured interview. Below are some of the key findings:
1. Restructured Information Architecture
*Before
Clubs was originally the Home tab, but searching for clubs was an infrequent task. The most common tasks were likely: 1) Viewing upcoming activities I signed up for 2) Viewing activities from clubs I follow. However, these were hard to discover in the Profile and Activity tab respectively.
*After
The information architecture was restructured to improve usability. The two primary tasks were moved directly to the home page for easier access. Remaining features were consolidated under an Explore tab, designed to support discovery of new club opportunities.
2. Reimagined Personal Profile Page
*Before
An unexpected insight emerged during testing—participants reported feeling uncomfortable due to the layout’s resemblance to a dating app. The presence of multiple personal photos on an official university platform caused embarrassment and discomfort. In this case, the familiarity of dating app interfaces had an unintended negative impact on the user experience.
*After
The customizability of the prompts was retained, but the design was adjusted to feature just one photo. The final interface drew inspiration from LinkedIn, incorporating a more official and formal aesthetic. Additional professional information, such as faculty and year, was included to enhance the platform’s sense of credibility and purpose.
Medium Fidelity Storyboard
Based on the evaluation findings, a mid-fidelity prototype was developed. An initial component library was established, and all screens were refined to ensure consistency in visual style. A storyboard was created to effectively present the user flows, as shown below.
Usability Testing
A second round of usability testing was conducted with the mid-fidelity prototype and 6 representative users. Below are the key findings:
1. Detailed Information for Activity Tabs
*Before
Participants liked the nearby exploring feature. However, they found the search location marker confusing and wanted more information on the map. Most participants did not realise they could swipe the bottom menu up.
*After
The search marker was removed, and category markers were added to the activities for better organization. Additionally, a handle was incorporated into the bottom menu for improved navigation.
2. More Friendly Directions to Users
*Before
Participants were overwhelmed by the empty home screen and did not know what to do.
*After
A call to action was added to direct users to the Explore tab to discover clubs and activities. Additionally, a more comprehensive onboarding process would be introduced for new users, guiding them to select an initial set of clubs that align with their interests.
Style Guide
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.
1. The Typeface
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.
2. The Colors
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.
3. The Logo
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.
.png)
.png)
.jpg)
.png)
.png)
.png)
