A Social Network for University Clubs

Club Hub university clubs directory landing page

Project background

Team + Roles:

This project was part of a semester-long assignment, carried out in a Fundamentals of UX course within my Master of Information degree. My team comprised five people: Piper Deck, Adrian Petterson, Sam Gulati, Zina Adwan and myself. Our roles were relatively balanced; however, with my background in graphic design, I created the majority of the visual assets that went into our presentations, as well as the overall design and structure of the presentations themselves. I also drafted much of the written content, and edited our work before submission.

ClubHub development team photo

Client + Users:

As this was a class project, there was no real client for ClubHub. Fictionally, the client would have been the University of Toronto, supporting a platform for students to easily find clubs and join them. My group and I created an alternative to Ulife, which is the current repository of clubs information at UofT. There are some shortcomings to the existing system that create a number of barriers for students. Researching this helped my team and I to come up with a problem statement that would kick off this project that bridges the educational and social sectors.

The Problem:

We started out by determining that the current state of (extracurricular) student social engagement has focused primarily on individual campus organizations managing their own sites and search tools. What the existing platforms fail to address are usability and interoperability. With our project, we have intended to address the gap by centralizing and refreshing the way that students find and join clubs.

The UX Process

Methodologies:

Initial research had our team investigating existing platforms for groups and clubs, both within the University of Toronto, and at other universities in Ontario and Quebec. We discovered that many universities use 3rd party platforms to host club information and any corresponding social networks. UofT manages its own, with Ulife and Student Life, and we learned more about these by speaking to a university staff member from Ulife. We researched further into the role that clubs play in students' lives, keeping in mind an NCHA statistic that 67% of UofT students have felt lonely in the last 12 months.

We carried out primary research in the form of surveys and one-on-one interviews, to learn about University of Toronto students' social experience on campus, whether they have found clubs to be beneficial, and any feedback on the current processes to get involved with extracurriculars. Overwhelmingly, students had positive things to say about being a part of clubs, but plenty of constructive commentary on how the current platforms could be improved.

slide-persona

Our team next developed a persona to embody the data and general sentiment of what we had learned. We called her Samara Salms, the student. Our general procedure used IBM's activation journey as our guide through creative and contemplative activities that would help us focus on Samara's needs throughout the project. We created an empathy map, needs statements and a step-by-step scenario of how Samara must currently go about finding and joining clubs, complete with pain points. Samara is unsure of where to look for clubs, how to narrow them down, overwhelmed by the choice, and too anxious and intimidated to email a club official in order to join. We analyzed our user and her challenges, bringing us into the next phase.

slide-empathy-map
slide-needs

Individual brainstorming sessions led us to dream up some imaginative solutions to the problem. When we came back together as a group, we realized that a number of these overlapped. We clustered this big ideas, and plotted them out in a prioritization graph in terms of how feasible and impactful we each thought they could be. What this led to was a clear winning idea that we ran with: the development of a social network. It may have been an early, popular idea, yet it was important for us to explore options and weigh them in order to arrive on the most appropriate solution.

slide-prioritization

At this stage, our team reimagined the scenario of Samara finding and joining a club, this time, using our hypothetical social network that would function as an enhanced club directory. We could immediately see how Samara's needs and pain points could be addressed, making her process frictionless and even enjoyable. Our group then ensured we were aligned on the key offerings of this new platform, solidifying them with hills statements. We knew we wanted to help Samara out with club recommendations to ease her search, and we hoped to make the joining process simple and immediate.

slide-hills

Next we were able to begin creating prototypes of what we'd decided to call 'ClubHub.' We sketched them on 8.5x11" paper, representing nine screens of the website. We formulated realistic tasks that would be carried out within these interfaces, then we tested these paper prototypes on a number of students, to determine if our initial designs were effective for users to accomplish their goals.

slide-annotated

Following several rounds of tests, evaluations and updates, we moved our low-fidelity prototypes into medium-fidelity prototypes made in Balsamiq, then more refined mid-fi prototypes that we created in the Sketch app. This marked the end of the process as far as the project scope was concerned in our course, yet in reality, my team and I would have continued to iterate and elevate our prototypes into well-tested high-fidelity prototypes. The high-fidelity screen displayed at the top of this page was developed by me after the completion of the group project.

slide-midfi-refined

Our Solution

Our solution, ClubHub, is a platform hosted by UofT that employs the university's existing API login system to securely provide access to current students. It would pull only basic information from the student, including their name and email address, as well as a few details to improve club suggestions. These would include courses, faculty and college. With a priority of club discovery, we designed a personalized landing page that would make club recommendations to the user, making browse and search features secondary ones. Importantly, we wanted to offer students like Samara the ability to gauge the relative size of the club and its events, as well as join a club with a single click and instant confirmation.

This is a video, addressing the initial problem statement and introducing our solution:

Considerations + Relfections

Platform:

All of the prototypes that you will have seen of ClubHub demonstrate it as a web platform accessed as if on a desktop computer. It is important to note that this would be a responsive environment, accessible on all devices. The rationale for choosing a web-based platform is manyfold. First of all, we wanted ClubHub to be easily findable in Google Search results, and not require students to download yet another app. We were satisfied with the idea of ClubHub being used within a browser, in much the same way as other UofT platforms do, for student accounts, course content, library services and more. We felt this would be easier to scale and update. Finally, students are already on their laptops a great deal of the time, and ClubHub would likely have more engagement on computers than phones.

Tools Used:

Throughout this project, my team engaged in quite a few analogue activities that helped us to ideate with more creativity and efficiency. We used stacks of sticky notes, and produced many drawings with black markers on whiteboards and paper. To share progress on our project phases, I cleaned up some of these sketches in Photoshop, and we described our process each week with presentations in Google Slides. In the later stages of the project, we used Balsamiq to generate clickable prototypes in medium-fidelity. Finally, our refined prototypes were completed within the Sketch app.

After the completion of the group portion of the project, I turned a few key screens into high-fidelity versions of ClubHub using Figma.

Reflection:

This project afforded my group and I the opportunity to practice the full cycle of product development, with rich research and design components along the way. Learning this activation journey enabled us to familiarize ourselves with various UX and Design Thinking methods, comprised of small activities that would inform and inspire each subsequent stage of development. I know that I feel better practiced for having done this course, and better understand where my team could have gone deeper with it, had we had the time and resources. We were all, of course, taught a lesson in managing and balancing expectations to work within our restraints. I'm eager to take what I learned with this case study and apply it to future professional projects; I would do additional rounds of user research with more participants, to bring more validity and clarity into my final designs. I am pleased with the overall success of this project within the context of its particular scope, yet I look forward to developing it further as I continue to enhance my portfolio.

Scroll to Top