Google Design Exercise

Design an experience for new students to browse, search, and propose new student organizations.


Heuristic Research

Before jumping straight into the user flow and mockups, I started with doing some research on club pages from the University of Waterloo, UCLA, and George Brown College. I chose a University from Canada, a University from USA, and a College from Canada to get a broad scope of how clubs were running in different environments. For all three sites, the task was to; search for a club of interest, join a club and start a club application (starting and joining a club was limited due to student logins/portals). This is what I noticed after 'stress' testing each site, within my capabilities.

- University of Waterloo

Being my own university, I tried my best to ignore biases, as that would have impacted the user testing. From the general observations;

  • Clubs/councils were run by a student body group called Feds.
  • Seperate pages for club lists, starting a club, and a forms page.
  • On the general clubs page, a section showcases awards from clubs, and external events held by Feds.

Joining a club

  • This setup is bias towards clubs that start with the letter A, as these clubs would get initial viewings from visitors.
  • Long interaction for users who are just curious about clubs, but have to constantly scroll and load multiples pages to get to other clubs that don't start with A.
  • No visual context about the club, however this may be a development constraint, as loading multiple images slows down page creation.
  • Hard to tell whether sub-headings are a seperate club or belong to the main club.

Main club, with sub groups

Filling out forms

  • Many forms presented to user, but which ones are mandatory forms?
  • Do you need approval of one form before starting the next form?
  • Missing avenue for someone to submit completed files online. Do you have to submit these forms physically? Can it be done electronically?

The Problem

Finding The Problem

As noticed in every club fair and recruitment cycle, students (mostly first-years) are always amped to join a club. However, over the school year, participation and active counts start to die down, and rightfully so due to projects, quizzes, tests, and exams.

Being a past executive for a club called UW eSports and a member of UX/Product Club, many common statements made by club members and executives were;

1.I don’t find clubs and councils online, I like to go to the club fair to find them 2.Hard to promote an event. Everything clubs and councils do are by themselves, the club committees provide no help 3.I hear about clubs from friends, especially the wacky ones


After testing and researching other school sites, as well as having first-hand experience with running a club, these were the insights that I needed to address;

Seamless experience

The progress from joining, starting, and searching needs to be streamlined.


The club fair's experience need to connect with the students outside the fair.

Lack of recognition

Clubs/councils need to be recognized more for their efforts.

The Goal

Relating to the research and narrowing of the problem, I decided to better relations between club committees, clubs/councils, and the students

The Design


Taking the research gathered from the Heuristic Research and critical thinking from analyzing the problem at hand, I wanted to design 2 user flows surrounding both web and mobile. The reason why I wanted to design two user flows is because going to club fairs, and coming home from them both are critical points of interaction many students and club executives experience. Talking with club members is one thing, however, going home and acting on a club application or asking to join a club is another.

Club fair day

This was from last semesters club fair week. As you can see, there were alot of people interested in our club and other clubs in general. However, notice a problem? When asked how they could contact us, we had to point to our board showing them our contact info. Not only was it hard for them to see our info, but they were clogging up the space along the aisles for other clubs.

Contact info can hardly be seen

Mobile solution

Why not generate a QR code for clubs that house all their contact information? That way when interested students need the contact information on club fair day, they can instantly scan the code to get all the info. Once the scan is successful, a quick dropdown section will allow the user to quickly see valuable information, and decide whether or not they want to add it their interests list.

User flow for QR Scan

First experience

For the website, I centered my user flow around one main objective efficiency. At the start of the flow, users are greeted with the choice to either "Join A Club" or "Start A Club". This establishes an immediate response to why many students go on the website, to find clubs they are interested in or jump start a club. There is a featured section on the homepage for clubs/councils. This gives a greater motivation for clubs/councils to go above-and-beyond and get free publicity space, as this homepage would be viewed by thousands. This features section would rotate weekly giving other chances for club/councils to appear.

Green bar represents a continuation of the page

Club directory

The club directory presents an immediate statistic about the current count of clubs, giving the student an impression about the immense selection the school has off-the-bat.

Each club profile, has a dedicated profile picture, alongside an add button that allows interested students to add their clubs to their short-list. Lastly, each club presentation is in a randomized order, diminishing the bias that comes from alphabetical order.

Starting a club

The starting of a club is streamlined for many users who don't know where to start. The step by step guide is structured in a format that prepares club leaders for the ethical criterias of starting a club, then streamlines them into the technical requirements of paperwork and form submissions.

Club profile

Having an account keeps all your clubs and councils organized in one place, without having you to organize meeting dates and event dates. It also manages club applications and gives other clubs the opportunity to review and reach out to potential candidates whom never have thought about the joining of the club.

This system has many opportunities for the school community to connect. It also gives students experience in reviewing potential members whom never have thought they would enjoy a particular club. It also guarantees club executives that their club members see a particular announcement, without out having to sacrifice their post viewings to other system algorithms.

View full user flow
High Fidelity

Low-Level Prototype

For both the wireframes and high-fidelity designs, I followed a different variation of the Material Design system. I wanted my low-level design system to focus on strong typography, compared to a visual strong design system like Atlassian's.

The colour scheme was based off of my school's colour pattern. The yellow was used to emphasize the more important areas that students should focus their mouse/touch interactions with.


The buttons

The critical interaction point on the homepage, depended on the two buttons. I used yellow to emphasize that the club directory is what most people tend to click on. I used a rare green for starting a club, since most people understand there is a process for that particular button.


Personalization and encouragement

Each club has their autonomy to personalize their block on the club directory page. Also, the dropdown menu is categorized with the typical avenues of interests, but instead of only keeping it to that, I used parameters such as "Trending" and "New".

These two parameters work in two ways;

  • Motivates clubs to try to get into those categories.
  • Gives students a quicker access to view the bigger clubs.
  • Using the word "Trending" does not belittle other clubs.

Club tracking

The club profile will mostly allow students to view their club applications and club events. For those who haven't started a club, there will be an option for starting a club that can be toggled on or off in the settings. The reason for this design is to encourage students to start clubs/councils.


There is so much opportunities to expand the capabilities of the club profile page, such as integrating google calendars to sync dates, centralize all club administrative activities, and allow club executives to manage their clubs better. I would continue to explore more ways to better the club profiles page, if given more time, and think of other ways to connect the physical experience of attending clubs/councils to the digital experience.

I always love a good Design Exercise. While keeping an optimistic view, this exercise was very relatable. Clubs are a great way for students to escape the stressful life of exams, tests, quizzes, and everything in between academia. They also give students an opportunity to spend time with friends and do activities they find interesting such as this Design Exercise.

Thank You Googlers!