Making it simple for students to join societies and find their community at Brunel University London.
University societies play a crucial role in fostering campus community, offering great benefits to those who join them - from the opportunity to connect with new, like-minded people to having something new to add to your CV, the advantages are numerous.
After noticing a disconnect between societies and students, I took the initiative to develop a platform aiming to bridge the gap between them.
My Role
User Research
UI/UX Design
A/B Testing
Branding
Team
1 Product Designer
2 Brunel Student Union Members
Tools
Figma
Notion
ProtoPie
Project Type
Non-Commercial Collaborative Project
Search, Filter, Discover Societies
Searching & filtering options to help you find societies that align with your interests
All The Information About Societies At Your Fingertips
A details page with everything you need to know about every society - from upcoming events to membership requirements. If you need to know more then feel free to contact the members directly through the website!
A modern dark mode for reduced eye strain and fatigue, particularly in low-light environments.
Your Personal Student Profile
This is your profile, showcasing your clubs, interests, contact info and similar profiles. Your listed interests help us suggest societies you may like to join.
Context
Making it simple for students to find a community that aligns with their interests
In 2020, I volunteered to join a team of 4 and help with the development of Brunel’s Student Union website. With this case study, I aim to revisit and redesign this old project as well as improve upon it. I originally divided this project into two parts tailored to the needs of the target users:
Students searching to join a society
Society Executives that want to start a society or advertise it
However, this case study primarily targets the students, with a main focus on simplifying the process of searching and joining a society that matches their interests.
Background
It all started with a simple question…
It all began when I started having casual conversations with friends about university life. It was there a recurring question caught my attention: “If you could go back to university, what would you do differently?”
Observations
I got curious about the participation in society activities
Participation in societies is low
There are 2000+ Economics and Finance students at Brunel but less than 150 have joined the Economics and Finance society.
Brunel has over 16000+ but less than 5% of them have joined non-sport or culture-related societies.
There is a disconnect between students and societies
Participation seemed low for a University with over 16,150 students. If most students wish to join a society, then why aren’t in one? This suggests a potential gap or disconnect between societies and students.
After noticing the disconnect, I sought a challenge:
“How might we connect students with societies that match their interests?”
Finding The Problem
The current solutions are semi-functional
Identifying the issue and collecting valuable insights became the first step in defining the project's goals. I started by asking myself:
"How do students connect with societies?"
"What are the current solutions? Why do they not work?"
To answer these questions, I have conducted in-depth research and interviews with students from Brunel University. The analysis revealed that all the current solutions are semi-functional, exhibiting their own advantages and disadvantages.
Freshers Week
During Freshers Week societies have tables around the campus with posters to inform students about their organization.
Pros
Lots of information about societies
Students can ask questions in person
Cons
It happens only once per year
It’s too crowded and new students are still adjusting to university life.
Freshers Week
During Freshers Week societies have tables around the campus with posters to inform students about their organization.
Pros
Lots of information about societies
Students can ask questions in person
Cons
It happens only once per year
It’s too crowded and new students are still adjusting to university life.
Freshers Week
During Freshers Week societies have tables around the campus with posters to inform students about their organization.
Pros
Lots of information about societies
Students can ask questions in person
Cons
It happens only once per year
It’s too crowded and new students are still adjusting to university life.
Surveys
Learning about the students
After taking a look at the current solutions and understanding the problem, I wanted to delve deeper into research to understand student pain points and motivations. I conducted primary research through surveys and gathered results from over 40 students. I have asked them questions such as:
"Why would you like to join a society?"
"What kept you from joining a society in the past?"
"What is the most important information to know before joining a society?"
"What are your thoughts on the Brunel Union website?" What do you like or dislike about it?"
Opportunities
Defining the goals of the project
I envisioned crafting a platform where students could seamlessly access all the information they need about university societies. This is where the Brunel Union Web platform steps in, serving as the ultimate destination for university students to discover their new community. After analysing all the data from the research, I redefined the challenge using "How Might We" statements that address the needs of the students:
Frustration
Unclear /or lack of information on the website
Opportunity
HMW help students to easily find all the information they need?
Frustration
Feeling anxious about going to an event without knowing anyone
Opportunity
HMW relieve the anxiety of attending a society or an event alone?
Frustration
Unaware of societies that align with their interests. Most students join only societies through word of mouth.
Opportunity
HMW make it simple for students to find societies that match their interests?
Frustration
Searching for new societies through the website can be difficult and overwhelming
Opportunity
HMW encourage exploration? HMW make searching for new societies based on multiple criteria seem effortless?
Wireframes
Crafting a low-fidelity prototype
After brainstorming and sketching potential solutions, I brought my idea to an interactive digital low-fidelity prototype.
Layout Design
Creating a responsive layout
Fixed & variable sections
Establishing a set of layout grids and breakpoints, was critical in ensuring we could design and build quickly and consistently. Inspired by web platforms such as Spotify and Jira, I divided the layout into two sections. A fixed section for the sidebar and a variable section, which expands according to the screen size. The goal is to align the container "building block" elements to the grid and create a responsive layout. However, the content inside the containers doesn't need to align with the grid.
Responsive cards
The cards are expanding to fill the grid until there is space for an additional card. However, the sidebar stays fixed on the screen. I have determined a maximum and minimum width for the cards and set the grid to 12 columns as it's divisible in multiple ways.
Visual Design
Designing the perfect society card
The Society card component was highly critical from a content organization perspective. It was designed to prioritize readability while accounting for responsiveness and flexibility. It was also an opportunity to leverage Figma’s component properties functionalities to greatly speed up my workflow.
Choosing The Layout
I have chosen a top to bottom visual hierarchy making the card easier to scan while having plenty of space for longer names.
Image on top
Image at the bottom
Fill full width card
Designing the call to action
Making an entire card clickable simplifies user interaction, especially when there's only one action associated with that card. This design choice reduces the cognitive load, encouraging users to engage more effortlessly with the content. The arrow icon signals that the entire card is clickable by changing color and shape upon hovering.
Entirely clickable card
Bottom button
Bottom right button
Choosing The Colours
I initially wanted to create colorful tags to distinguish societies by category type. However, I decided to go with a single color for universal clarity.
Coloured tags based on society category
Same colour tags
Neutral Tags
The grey tags seem much less aggressive and no longer felt like an error state. It also decreases eye strain. Thus we have arrived at the final card design.
Red tags look like an error state
Avoid colours that don't pass WCAG standards
Neutral colours
Design Iteration
Refining the solution according to feedback
How might we enhance the search experience?
Clicking on a Society card opens up the "Details Page". I designed two options to display the additional information. A new loaded page or a full-screen modal. To identify the best performer I conducted A/B Testing by showing the different versions to users and asking them which one they prefer.
New loaded page
While it is a perfectly fine option, it is overall slower and less efficient.
Modal
Enables the user to pop in and out of club pages without resetting their position in the database. This allows for quick navigation throughout the database making it the ideal interaction.
How might we simplify searching for societies based on multiple criteria?
Being the core interaction point, the goal was to create a toolbar that maximized search flexibility while encouraging exploration for all levels of curiosity and knowledge.
Top Toolbar
The Top Toolbar saves up a lot of space, allowing more societies to be displayed at once. However, that decreases accessibility to the filtering options, which can reduce the overall user experience.
Sidebar
Allows the user to easily access the filtering options and change the searching criteria, which encourages more exploration and increases the user experience.
How might we encourage exploration?
One of the goals of the project was to encourage students to discover new Societies and interests as they continue their journey at University.
Onboarding
When students log in to their account for the first time, we ask them to tell us about their interests to personalise the experience by suggesting them societies and events they may like in the future.
Personal Profile Page
Opening with a discover page tailored to their interests opens the opportunity to also introduce similar Societies for students to check out. The page refreshes every week to always introduce new and interesting Societies.
Reflection
Learned to design responsive layouts that adapt to different screen sizes.
Building dynamic components in Figma and establishing a design system early on can vastly speed up the workflow as well as make it easy to stay consistent when designing the UI.
A/B testing and constantly asking for feedback is very important. As a designer, I should embrace an iterative approach to refine the product and add value over time.
We are just getting started…
Using the high-fidelity prototype we will conduct usability testing with real users to refine the design even further.
We need to start thinking about how to integrate the design to the rest of the Brunel Union website.
There are more problems to solve! The MVP for this case study were University students, but what about the needs of the society executives?
Develop the "Upcoming events" page. One of the main user pain points was "Feeling anxious about going to an event without knowing anyone". With the events page, students will be able to view in advance more information about the event as well as a list of the students that are going to attend the event.
