Duration: 1 week (1.10.19 – 1.17.19)
Type: Individual
Role: UX Designer
Tools: Sketch, InVision
For Google’s 2019 Design Exercise, I decided to tackle the following prompt:
"Design an experience for new students to browse, search, and propose new student organizations. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity."
Research & Brainstorming
Club finding process
First, I decided to think through the process of finding, joining, and keeping up with a student group to help me understand how to begin to tackle the problem.
1. Finding the group
- Facebook (pages, groups, events)
- School website (Callink)
- Individual club websites
- Word of mouth/flyering
2. Joining the group
- Online application form
- In-person interviews
- Auditions
- Just show up to meetings
3. Keeping up with the group
- Meetings
- Facebook groups/events
- Emails
- Slack/other messaging platforms
Personas
I decided to create two personas to help me design an experience centered around the needs of the users by empathizing with them and their two main goals.
Madeline: Wants to join a dance team
Madeline is a first-year student looking to join a student group, specifically a dance team. She has some dance experience from high school, and wants to try out for a handful of teams because she doesn’t know which ones she can make it onto. She’s looking to commit about 5 hours per week, and she’s available for practices on Tuesday and Thursday nights. She wants to be able to view up-to-date information about all the teams so she can choose which ones she wants to try out for based on her availability and preferred dance styles. She needs to be able to keep track of the audition times and locations for all the teams she wants to try out for so she doesn’t miss an audition.
Alex: Wants to start a beach cleanup club
Alex is a third-year student looking to start a beach cleanup club with a few of his friends. They want to get a group of students to go to the Berkeley Waterfront on Sunday mornings to pick up trash, and they will also meet on Wednesday nights for team bonding and planning strategies. Alex is the club president, but he wants the other officers to be able to monitor the club’s approval process at any time. They want to allow anyone to discover and join their cleanup events, even if they aren’t regular members of the club.
Interviews
I interviewed several fellow students to find out what they value in the experience of discovering student groups. Many of them talked about issues they have with Callink, UC Berkeley's existing student groups website. Students told me:
“I think it’d be nice if Callink had more filters instead of just the specific categories they currently have.”
“I never used Callink because it was really laggy for me and there are also a lot of organizations that no longer exist that are still on there.”
“Callink has a general decryption and stuff but you really only get involved through events so I wish it had an events section. Otherwise you would have to email the org through Callink which is a weird interaction.”
Defining the problem
Using the insights I gained through my research, I defined the following problems to focus on:
1. Students are overwhelmed by the wide variety of student groups there are, and are unaware of all the groups that fit their interests
2. Club information is scattered across different platforms such as Facebook, club websites, and Callink
3. Students need a way to access and filter up-to-date information about groups and events
4. Students are confused about the process of proposing new groups
Vision
I aimed to solve these problems by focusing on the following goals:
1. Help students discover groups and events that fit their interests and availability
2. Let students propose and monitor new student groups
Low-fidelity prototyping
User Flow
To determine a logical and efficient user flow, I used Post-its to map out different screens and features.
Sketches
From there, I sketched a wireframe flow for the main screens.
Wireframes
Next, I moved into Sketch to create a cleaner, more comprehensive wireframe flow.
Onboarding
Upon first opening the app, the user is greeted with a welcome banner and a prompt to sign with a university email and password so the user can save their preferences and personally connect with groups as a student of the university.
Then, the user is asked to select what subjects they are interested in so that the experience of finding student groups can be catered to their passions. I opted for a scrolling checklist to allow for many options, and the ability to select as many interests as you like.
Next, the user is asked how much time they are looking to commit, so that they can be matched with organizations that require similar time commitments. I chose a dual-ended slider (as opposed to multiple-choice or a text field) in order to allow flexibility in selecting a range of time, while keeping it within reasonable constraints.
Finally, the user is asked about their weekly availability. I decided to include a calendar format where the user can drag to select when they are free each day of the week, similar to When2meet or Google Calendar. I chose this format to create a highly visual experience that allows for great flexibility such as the ability to indicate multiple free periods per day. This format also allows users to compare side-by-side with their Google Calendar to easily visualize their free time and what their schedule would look like.
The bottom of the screen includes a progress indicator and arrows so the user can go back and edit their preferences in case they make a mistake or change their mind. I wanted to keep the questionnaire short and sweet with only three essential questions so that users don’t get impatient and can quickly dive into discovering student groups!
Explore & Favorites
After completing the onboarding process, the user is brought to the explore page, where they can browse groups or events. Student groups are represented by a photo and the group’s name so that users can get a sense of what the group does with a quick glance. UC Berkeley has over 1,000 registered student groups, so I opted for a 2-column format to allow users to quickly view many groups at once so as not to miss out on anything.
However, for events I chose a 1-column format to display important information such as the time, date, and location of the events. Users can favorite groups or events by tapping the heart icon on each card, and they can access their favorites by tapping the heart icon at the top bar. Items that match the user’s preferences will appear first, but as they scroll, more items will continue to appear, encouraging users to discover and explore new interests that they didn’t even know about!
Groups & Events
Tapping a group or event card brings the user to the group or event page, where they can view details and photos. These pages feature fixed top bars so that users can share, favorite, or exit the page at any point without scrolling back to the top.
The group page features multiple scrollable photos, the group’s logo, a description, and contact information. More detailed information can be found in collapsible accordion sections so that users can easily access the specific information they’re looking for. Group pages also feature events that are being hosted by the group.
The event page features one main photo, important information such as the date and location, a link to the group that the event is hosted by, and a section for more details about the event.
Search
Users can search for specific groups or events by tapping the search icon on the top bar. As the user types, suggestions will pop up, allowing users to quickly access what they’re searching for. Once the user has hit “enter” they can browse search results in the same format as the explore feature (with cards and sections for groups and events), creating a sense of continuity throughout the app.
Filter
Although users entered their preferences during the onboarding, their results are not strictly limited unless they choose to use filters, which can be done on Explore, Favorites, and Search results by tapping the tune icon on the top bar. A drawer will pop up from the bottom of the screen, allowing users to filter by time commitment, interests, and availability in the same ways as the onboarding process. Users can quickly clear filters by tapping the “X” icons, or edit them in more detail by tapping the “Edit” buttons. I decided to make the filter feature into a drawer rather than a new screen so that users don’t feel disconnected from the page that they are filtering. Users can return to the page by tapping anywhere outside the Filter drawer.
Propose a new group
By tapping the hamburger icon on the top bar, users can open the side drawer, from which they can propose a new student group, monitor their existing groups, access settings, or send feedback. I decided to confine the Propose feature to the navigation drawer because it would not be frequently used.
Hitting “Propose a new group” takes the user to a form where they enter the new group’s name, select the type of group from a dropdown menu, and enter other information such as co-founders, statement of purpose, and constitution.
From the “My groups” page, users can check the progress of their proposed group’s pending approval, as well as monitor groups they have created that have been approved.
High-fidelity prototype
Interact with the prototype below!
Improvements
In another iteration, I would include the following improvements:
Integration with Google Calendar:
Connecting to Google Calendar would allow users to easily identify free time to filter by availability. I would also include a calendar view that displays favorite events and meeting times with the rest of their calendar to allow users to visualize their schedule as a whole and get a better sense of how extracurriculars will fit into their lives. This would help students take on just the right amount of work and play without overloading themselves.
Built-in messaging
I would design a built-in messaging system to allow students to communicate with group officers and members. Currently, club communications are scattered across platforms such as Facebook, email, and Slack.
Filter by size and application
I would allow users to filter their results by size and whether or not there’s an application, because some students are looking for tight communities while others are looking for large networks, and many students find applications, interviews, or auditions to be crucial considerations in joining a student group.