Google UX Design Challenge

Artboard – 1.png
 
 

Google Design Challenge (2019)

 

Mission

A new school year is approaching and the orientation team is looking to you for some design expertise. Design an experience for new students to browse, search, and propose new student organizations.

 
 
 

 
 
 

Problem

As a first year student, there are difficulties in finding detailed information about student groups and connecting with other students.

 
 

Solution

I suggest a mobile platform that helps students connect with members of student groups and/or individual students.

 
 
 

 
 
 

Who are involved in this?

 
 

To better identifying problems, I conducted user interviews with first-year students and members of the student union. It helped me understand the overall process of seeking and/or organizing student groups. While the student union is not a targeted user group in a given challenge, having the interview with them provided me valuable insights about students’ struggles in depth.

I found out that most students fall on a spectrum of two student types: seekers and organizers.

spectrum.png
 

Here is a brief summary about them.

Seekers:

  • Do not have any or very little interest in organizing a group.

  • Looking for one or more existing student groups to join.

  • Want to ensure that they picked the right group(s).


Organizers:

  • Already looked up existing student groups but failed to find the right group(s) for them.

  • Looking to start a new student group.

  • Looking for other supportive students who can help them organizing.

Down below is the detailed analysis of both user groups.

 
 
 
 
persona  – 1@2x.png
 
 

After the research, I solidified a direction of this project. The goals are the same as the following:

  1. Help users to gain deeper insight into student groups they are interested in joining.

  2. Provide a space where users can find, compare and share ideas with like-minded peers.

  3. Help users to easily connect with each other within the app.

 
 
 

 
 
 

Sketches & Wireframes

 
 

I started brainstorming on the app structure for both user groups. I penned down necessary features, core contents and focus area for each user group.

notes.jpg
 
 
 
 
 

Then I plotted out a base structure of the app. I opted for the bottom navigation bar as a primary navigation tool and a navigation drawer for an account & app management.

 
user journey – 1.png
 
 
 
 

Here are some quick sketches for the base structure of the app.

user journey – 3.png
 
 

 

Based on the hierarchy tree above, I started to design a flow of the app. While working on this, I noticed that the seekers and organizer’s in-app activity have the same flow in the beginning and at the end.

Once they sign up/log in, they will:

  1. browse student groups(either to check if there are any groups interest them or find out groups similar to their idea).

  2. join a student group or write a proposal and began recruiting others.

  3. engage with group members/other students.

The charts below illustrate the flow of the app for each user group with more details.

User flow: seekers

 
user journey@2x.png
 
 
 
 

User flow: organizers

 
user journey – 2.png
 
 
 
 

 
 
 

Designing a core experience

 
 

Seekers

Seekers do not want to be in socially awkward situations. Knocking on a door of the unknown community could turn into a terrifying experience for them. In the cases of seekers, they want to have as much information as they can before joining the group. Especially, they look for more detailed information about the members they will be engaging with. However, this type of information has limited availability to people who are not friends with them.

Therefore, I designed the page that provides users sequential access to the information they are looking for. It allows seekers to access the list of groups, group information, then member profiles.

Down below is a detailed explanation about the functionality of the feature.

 
 
seeker-ex1@2x.png
 

The browse page shows the list of student groups. From the list tab, users can access to the list of student groups. The list of student groups shown under the list tab is personalized for individual users. The users can archive student groups under the favorites tab.

 
 
 
seeker-ex2@2x.png
 

On the group page, users can view more detailed information: group description, the list of members, announcement and etc. Tapping member profiles will redirect them to their profile pages. Users can send a join request of the student group from this page.

 
 
 
seeker-ex3.png
 

On a member profile page, users can view information about the member. It shows their student information(their academic year and major), their hobbies, personal traits and links to their social media accounts. Users can send direct messages to group members on this page and continue communicating with them on the messages page after.

 
 

Here is a video demonstrating the transition between pages.

 
 
 

 
 
 

Organizers

Organizing a group requires many tasks. It includes research, recruitment, and formal writing. For an official approval, organizers need to prove that their idea is not taken, have a certain number of students signed up for their student group idea and submit other supplementary information along with the formal request letter. These challenges motivate organizers to find the right people to work with for their proposal ideas.

Therefore, I designed the page that provides a space where organizers can find, compare, and share ideas and connect with other students.

Down below is a detailed explanation about the functionality of the feature.

 
 
org-ex1@2x.png
 

From the proposal page, users can view other students proposal ideas. It helps them to quickly check if there are any proposal ideas similar to theirs. The posts shown on the find tab is personalized for individual users. From the create tab, users can write their proposal idea.

 
 
 
org-ex2@2x.png
 

From the submission page, users can write a proposal idea. Once students publish, the app will display a confirmation window informing that their writing is successfully posted.

 
 
 
org-ex3@2x.png
 

From the proposal page, users can access a proposer’s profile and the list of students who liked the post. If you are a proposer, any user engagement will be alerted in the notification page.

 
 

Here is a video demonstrating the transition between pages.

 
 
 
 

 
 
 

Personalized feeds: matching system

 
 

Since there are hundreds of student and student group exists, manually finding students and/or student groups can be time-consuming. I suggest a matching system that finds right students and/or students groups for users.

 
miscelleneous@2x.png
 
 

First, users need to open their settings page and activate matching features. Then the users will receive push notifications from the app when it finds a right match for them. The users will be redirected to the student group page or student profile page by tapping those notifications. Suggestions are made out of information from individual users’ profile and their in-app activities.

 
 
 
 

 
 
 

Reflection

 
 

As mentioned in the beginning, the given design challenge asked me to focus on students. However, it would be interesting to consider including student union(the school organization administrates the student group registration process) as one of the target user groups. One of the ways the app can help student union is to provide them with a tool to track down the status of student groups. It can give them a great insight into how each student group is doing, which one is popular among students and so on.

Overall, it was a fun project to push my creativity and design thinking skill as far as I could in a short period of time.