top of page

Introducing CampusClub

Home: Welcome

design problem statement

Students have trouble finding communities in college because of the large student body. Many find communities within student organizations, but it is hard to navigate the campus to find one that you will like, and many students are not aware of the existence of certain clubs. Most first-year students make use of the official directory provided by the school, but this is hard to navigate and not updated. Moreover, the links for organizations are inconsistent, sometimes usually redirecting users to the groups’ abandoned websites, or sometimes Facebook page.

Home: Text

research

interview with a student reveals that the main motivation of joining student clubs are the social and community aspect

In order to ensure that my design solution is helpful, I decided to collect some data on my users by interviewing them and conducting a survey.

I conducted an interview with a college senior who has been involved with several student organizations during his time at UCLA. Mainly, the interview was to probe on the social aspect of student organizations and the motivations behind joining these organizations. Here's a key finding that I found useful for understanding my core user base based on the interview:

“I think most of it (joining clubs) was for social purposes. For one, I don’t want to be an entrepreneur, so obviously I’m not in Bruin Entrepreneurs to do that. It was just more so… 


...I guess I kind of just joined because I felt right. I left all the other clubs because it didn’t feel right. I joined Bruin Entrepreneurs because I met the people, I thought they were cool, and I ended up joining. Even though I didn’t want to be an entrepreneur.”


- Mitchell Zia

Home: Text

survey results

Given that clubs are important to students, I conducted a survey in my network of UCLA students to understand how they navigated the UCLA club scene during their time here.

96%

people used unofficial resources (word of mouth, social media, etc.) to did find out about the student clubs that you are involved in now

89%

do not use the official UCLA club directory as a reliable resource to find out what the campus has to offer

96%

felt overwhelmed during their first year at UCLA due to the sheer amount of clubs and lack of ways to navigate the campus

Home: List

design solution

My design solution is redesigning the campus club directory into a live, centralized directory that can allow users to quickly get a sense of what is out there and understand the communities by creating a social media-like platform where groups can update their pages themselves and showcase their personalities and events, and users can browse clubs in a social-media setting. This way, the campus student organization ecosystem becomes more tight-knit, which will then improving social fabric at UCLA.

Home: Text

persona

michael xie: eager college freshman trying to make friends

I developed a persona to understand my target audience's motivations and needs, and to ensure that my design solution addresses their pains and their desires.

Screen Shot 2019-05-17 at 1.18.14 AM.png
Home: Image

user scenarios

scenario 1: exploring clubs on campus to join

Michael just started his first week as a college student at UCLA. He feels overwhelmed from the large size of his classes and wonders if there is a different way to find friends. He soon learns that people find communities in student organizations, and Michael begins to search for a student organization that he will fit in with. However, talking to students in Bruinwalk (the main road on campus) is overwhelming and the campus club directory is not updated and confusing to navigate.


He hears of the app CampusClub which UCLA is partnered with, and one night in his dorm room, he downloads. After creating an account where he can indicate which school he goes to, he is able to select categories and types of clubs that he will be interested in. Michael opts for clubs that are open to new members to join, and wants to find professional and social clubs. Based on these preferences, Michael is then presented with a list of recommended clubs that he might be interested in exploring.


He browses through the list of clubs and clicks on a club that looks interesting: Bruin Entrepreneurs. The app then shows a brief description of the club, its mission and history, and additional information. The app also tells Michael the different members in the clubs, along with their pictures and profiles that state their majors, year, and interests, so Michael can gauge whether or not he likes the vibe of the club. Lastly, Michael is able to see the upcoming events and meetings that Bruin Entrepreneurs is holding for the upcoming weeks, as well as any additional posts and updates that the club posts on its Feed. He finds the club interesting and decides to follow the club on the app to see ways to become more involved. He does the same thing for Anime Club and decides to follow it too.

Home: Text
Home: Text

scenario 2: messaging and RSVPing to go to an event

Michael is now trying to find some events to go to and meet some people. Currently, it is zero week at UCLA (classes have yet to begin), and he wants to schedule some events for week one. From the timeline on his homepage, he sees that Bruin Entrepreneurs is hosting a workshop on how to start a clothing company. Since Michael is interested in business, particularly consulting, he thinks that he will find some business-oriented peers at the event and understand more about this space. However, he wants to make sure that he is able to go to the event as a new freshman who doesn’t know anyone.


Michael contacts the club through the app using the messaging function. Bruin Entrepreneurs responds promptly, encouraging him to come to the club, and even informing him of a way to become more involved if he is interested. Michael feels welcomed, and after reading the event description through the event page, he RSVPd to the event. Now he can find the event on the “Your Events” tab in the homepage so he can always check back for new updates.

wireframes + wireflows

the registration process (version 1)

These initial sketches show the process of signing up with the app and discovering the clubs the student’s campus has to offer. If the students have an account, upon signing in the students will be directed to their home page.


If students don’t have an account, they enter their school and is presented a survey that enables the student to indicate their personalities and preferences so the system knows what to recommend. Then, the students will get a list of recommended clubs registered in the app in the campus.

Picture1.png
Home: Image

Students can click on the presented clubs to find more information about it through the club profile. Students can follow the clubs that they find interesting to find updates on their activities. Thus, the app still provides the student freedom to “explore” what the campus has to offer - it simply makes things easier for the students.


Once they are done, students will be directed for an additional step of creating a profile before being directed into the home page, where they have a feed that displays activities and events of followed clubs and a list of the clubs that they are a member in. If a club is an open club, following the club page on the app automatically enlists the student as a member.

Picture2.png
Home: Image

the registration process redesigned (version 2)

This is a redesign of the sign-up process, as after I show the initial sketch to some friends, I realize that it might be counterintuitive to have the user create a profile after being provided a recommended list of clubs as it breaks the flow of the process. Therefore, when the user enters their school, they will also be prompted to provide basic identification (for an account) such as a school email and password, and an account will automatically be created.


The system will then follow the steps shown in the previous version of the system, with the exception that a basic profile has been created. The user can then go into their profile section later and add the photos, bio, and any other additional details they may want to share.

Screen Shot 2019-06-05 at 10.39.12 PM.pn
Home: Image

process for registered users

If a user is signed in and has a profile, they will see the home page when they open the app. They will have quick access to clubs that they are members of in the top of their home page. Underneath, there will be the chronological feed of events and activities by the clubs they are in or that they follow. The navigation bar is at the bottom, with three options: home, search, and profile.


To explore more clubs beyond what the student is already engaged in, the student can go to the search menu, and search for organizations using keywords or filters. In this tab, the app will continue to recommend clubs based on the user’s interests and activities. This way, the user will always have access to what the campus has to offer, even after being involved in a community.

Screen Shot 2019-06-05 at 10.30.31 PM.pn
Home: Image

In their profile section, they can see and edit their profile (how clubs and others in the system see them). The profile shows their name, year, major, and photo. They have the option to include a short bio about themselves. The section lists out all the clubs and communities that the individual is involved in or a member in, and displays the user’s status (e.g. a director or a member) in the said organizations. Essentially, this is a snapshot of the user’s involvement on campus.


They have the option to add the a club into their profile, but some clubs will need to approve of their membership (e.g. closed, application-based clubs) before it appears on the user’s profile.

Home: Text

main features

below are some features and functionalities that the app will have

explore different clubs

Students will be able to explore what the campus has to offer by getting personalized recommendations through the explore page. Students can also search and filter for clubs in a more user-friendly way than the campus directory.

view club & student profiles

Each club will have a page that displays their description, members, and upcoming and historical events and meetings. Students will also have a page displaying their involvements and activity on the platform. The goal is to give users a glimpse of the personalities of each club and student.

timeline of happenings

The app will tell the user what is happening on campus based on the clubs you follow - this includes big events, meetings, etc. so students will not miss events that they want to be involved in. The app will also recommend events through the explore page.

Home: List

screen designs

registration process

Screen Shot 2019-06-02 at 5.10.05 PM.png
Home: Image
Screen Shot 2019-06-06 at 12.42.39 AM_ed
Home: Image

club profile pages

Screen Shot 2019-06-02 at 5.10.24 PM.png
Home: Image

student profile pages

Screen Shot 2019-06-02 at 5.10.51 PM.png
Home: Image
Screen Shot 2019-06-02 at 5.14.45 PM.png
Home: Image

home page

Screen Shot 2019-06-05 at 11.04.22 PM.pn
Home: Image

search function

Screen Shot 2019-06-02 at 5.18.23 PM.png
Home: Image

messaging

Screen Shot 2019-06-02 at 5.24.47 PM.png
Home: Image

usability testing

A usability test of the rough prototype was conducted to find whether or not the app flows well and is intuitive for the user. The person who tested the app was a college student who understands the struggles of the campus. He was asked to use the prototype to complete two tasks:​

  • To successfully register and follow recommended clubs to set up the account

  • To successfully interact with one of the clubs on the app and RSVP to an event


The following data was collected:

  • Qualitative observation on how the participant interacted with the app

  • Participant’s verbalizations on how the app worked

  • The verbal feedback after completing the tasks

Home: Text

findings from usability testing

The following findings are recorded from the interview and observation:

  • The prototype seemed simple and reminded him on Facebook and Instagram, apps that he regularly uses

  • Participants could easily register and explore club pages

  • Participants found it easy to follow clubs and look at events

  • Participants found it counterintuitive to go back to the club profile from an event page to be able to message the club about the event, he felt that there should be a button in the event page to enable him to message the club easily

Home: Text

redesign based on feedback

event page redesign

Based on user feedback on the messaging task, I realized that it was not intuitive that the user will need to go back to the club’s profile to direct message the club about an event. The user was expecting to have a message button on the event page for convenience, and when there was nothing the user was confused on how to proceed. Therefore, I redesigned the event page screen to include a message button.

Screen Shot 2019-06-06 at 12.56.51 AM.pn
Home: Image

try it yourself

interact with our app prototype and tell us what you think!

Home: Text
bottom of page