© 2019 by Christian Leong

Google Design Challenge

As the first part of my User Experience Internship hiring process for Google, I was presented with three design challenges to help a university’s orientation team welcome new students. For the challenge, I decided to choose the one that I had the most passion for, and would allow me the best opportunity to show my skillset in user experience design.

Challenge: 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.

Before jumping right into the process of researching and designing a solution, the first thing I do is to jot down my initial ideas for solving the problem on paper.

Research

After brainstorming many of the possible qualities that I thought should be included in a successful student organization experience, I decided to do a competitor analysis on my school’s organizations website to find anything I missed in my initial considerations or that could be done better.

Competitive Analysis Key Takeaways:

  1. There is no filter to organize the 1000+ clubs, beyond their original organization which is alphabetical

  2. Organized by branches and categories. Branches represent different parent organizations (i.e. USC Viterbi School of Engineering) and categories (i.e. club sport)

  3. The space used by each club mainly comprised of a summary of each club which is lengthy, and difficult to read, especially considering there are over 1000 clubs.

  4. The “register an organization” button leads to a page to re-register existing clubs but did not offer an onboarding process for new clubs.

  5. There is no contact information for any of the clubs on the main list.

Qualitative Evidence

Additionally, to get further information on what a successful club organization experience should look like,  I went to campus and was able to survey 8 students surrounding their experience with the schools’ current involvement environment and the resources available for clubs. The questions I asked were:

While surveying students on campus, I was able to get perspectives from a number of different students such as transfers, club executive board members, a president, and club members. These different perspectives provide complete picture of not only features that consumers are looking for, but also function that producers need to host clubs

Qualitative Research Key Takeaways:

  • Respondents who have used the EngageSC platform alluded to its messiness citing a lack of contact information and difficulty accessing information about the clubs. 

  • Students usually looked for clubs based on interest, but almost equally considered the people and overall vibe of the club.

  • Several noted that they would be more inclined to join a club if there were social events in addition to events that aligned with the core interest.

  • A majority of respondents ranging from transfer students to freshmen admits, did not know about the schools’ online club portal due to difficult onboarding process (platform isn’t located in schools’ main portal)

  • A common recommendation was that the club recruiting process could be improved by providing better categorization to clubs at club fares as well as being more personal

  • Rooms used for clubs are booked through a third party site which is inconvenient because specific rooms can’t be booked, the process is slow, and clubs are only notified a few days before the event

Defining The Design Challenge

Now that I had an idea of the baseline design challenge, the properties of the current system, and research on the preference of actual users prefer, the time has come to specifically address how the design challenge will be solved with consideration with my user based and their needs.

With a better understanding of the needs of different people on campus, obtained through research, I decided to make several customer personas to help identify the key functionality needs of the experience.

Customer Personas

Jake, Student

  • Knows about many of the clubs on campus, looking mainly to find a club for his advanced interests.

  • Search feature beneficial

  • Looking to create a specialized club if he cannot find a good fit.

Kelly, Outreach Director

  • Needs contact information and succinct club summaries for outreach.

  • Categorization beneficial.

  • Must quickly evaluate many clubs

Trent, Transfer Student

  • New to the school and looking for welcoming community; open to finding new interests.

  • Browse feature beneficial

  • Outside social events are beneficial.

Marsala, President

  • Recruit members with accurate information.

  • Needs to book rooms to host club events.

  • Needs to easily communicate with club advisor.

Icons provided by: Optimize your ROI

In creating these customer personas from my research, I am hoping to identify a set of several frequent users and identify key functionality necessary to the experience based on their reasons for using the platform and their respective backgrounds.

User Journey

Customer Journey Map.png

(Click to view in new tab)

After identifying several potential users of the experience, I created a user journey map to track the exact process that Trent (transfer student) needs to take in order to achieve his goal of finding a welcoming community and maybe pick up a new interest. I chose him because his persona would likely make the most use of two of the key functions of the design challenge: browse, and search. Using a combination of tasks to be completed at each step, and empathy with the user, I was able to identify additional opportunities of affordances with each step as well as understand some of the risks.

Affinity Map And Red Route Analysis

One last step that I consider very important before designing wireframes is to organize the scattered ideas from research into an affinity map to categorize the ideas and enable order. I organized my ideas along several categories: user wants, user painpoints, and experience features (written on the pink post-it notes). By organizing the scattered ideas into clean arrangements, it is easier to form general ideas of what functions are going to do and include, and why they need to be included based on what users want and their painpoints. 

Now that the brainstorm of ideas are more or less categorized into groups, the final step that I like to take before I move on to wireframes is to create a red route analysis map. Red route maps are amazing because they clearly show the level of priority a certain function requires, based on how many people use the function and how often they use the function. By understanding the magnitude of priority of different functions, I know which functions I need to spend the most time making sure they are functional, as which features need to be highly visible.

Wireframes

Hick's Law

Using information from the red route analysis I choose to sketch some wireframes to get a rough idea of what I wanted in each wireframe. I started with the onboarding process first because it is a process that everyone uses. This part includes the personalization process which is optional. I then outlined the browse and search processes and then finally the club proposal process because it is the least used.

 

After moving these drawings to sketch and making some minor revisions, this is the flow that I came up with:

User flow.png

(Click to view in new tab)

Onboarding

Since everyone uses the onboarding process I thought it would be the best place to start my experience design process. I wanted to keep the onboarding process as quick as possible because of the alternatives to using the experience: going to the club’s website or club fair. Only the bare essential information located in the first wireframe are required for the user to complete the onboarding process. Through inputting the school and school email, a generic browse list will be populated, and the user will be able to receive updates through email.

 

The personalization process is used to populate the user’s browse screen with higher quality recommendations. As my school has over 1000 clubs, a number of clubs will be eliminated from the user’s pool as they answer more questions. The main emotion felt during most onboarding screens is a constant feeling of when it’s going to end and how long it’s going to take. Keeping this in mind, the user will always be able to drop out of the personalization process by tapping “skip”, and the experience will work with the information that it has.

The General Flow

Browse

Club bin/Compare

Calendar

Feed

Propose Club

The main flow of the experience is 5 pages and consists of browse, club bin/compare, calendar, feed, and propose club. They will be able to be navigated by swiping the screen right and left and the current page is shown by the navigation pane at the bottom. 

 

The browse section is divided into several tabs located right under the search feature. The “FOR YOU” tab is generated by the personalization process during onboarding. “BROWSE” consists of clubs that are popular at the moment. “TYPE”, “INTEREST”, and several other filters will be included (off the screen, such as commitment time), which can be slid left to view. 

 

I decided to only include the club’s name and picture in “BROWSE”, because the main idea is to show users a composite list of clubs that they might be interested in. If the user is interested in the club, they can tap the photo to get more information or add the club to their cart, which can be viewed in the “club bin/compare” section.

 

One of the findings in the research was that many were interested in clubs that had social events. To keep track of the happenings of all of a user’s clubs, I decided to put a feed page, where club members and officials can interact. This will be especially useful in communicating events, event details (obtained from tapping on the image), and calendaring that event, done in “Calendar”.

Club and Event Info

Club Info

Event Info

Club and event information both contain specific details about a club or event, and can be accessed anywhere where there is a thumbnail of a club or event (i.e. club thumbnails can be found in the browse page and event thumbnails can be found in the feed page).

 

Both pages will be variable in height as more information and comments are added. Since swiping has been used as navigation gesture earlier in the experience, the user will swipe right to access the general flow.

 

A user’s cart of clubs will be accessible in the club info page by tapping the icon in the top right. The club being viewed will also be able to easily be added to the cart by tapping the icon in the bottom right of the club picture. 

If there are multiple photos posted for clubs and events, the user will be able to swipe left or right to view the next photo.

The Proposal Flow

The last key feature of the design challenge was to create a way for users to propose a club in the experience. Rather than just proposing a club, I decided to include screens for the whole process because it can be done for the most part online. Before I started to create the screens though, I had to first understand the process, so I decided to search for my school’s club proposal process which in summary goes:

  1. Submit a club proposal request detailing the purpose of your club

  2. Attend a recognized club meeting and formally propose the club as well as determine your club advisor and founding fathers.

  3. Submit the necessary documents required of all clubs (i.e. constitution, waivers, etc)

  4. Wait for committee approval

The process takes some time, especially between steps 2 and 3 of the process, which is why the corresponding screens will update automatically when they are completed, and a notification will appear on the device’s home screen. This will completely eliminate the stress of having to check up on the committee’s decision constantly. 

Since all the required documents will be listed on the “Submit Documents” page, the need for pulling up an external reference, with the checklist of documents will cease to exist, as each document will be checked off as they are scanned in and then the page will update once all the documents are scanned in.

 

If I had more time, one thing that I would’ve liked to add was a more intuitive advisor and founding father solution on the “Awaiting Response” page. Additionally, if I had time, I would’ve liked to provide complete wireframes for those portals.

Hi Fidelity Models

To drive interest and showcase the true colors of clubs, I decided to include photos as much as possible so the user can get a visual representation for the club.

Also speaking of color, since my school is the University of Southern California, I decided to make the theme red. However, my plan for the experience is to have the theme change, depending on what the school’s primary colors are.

Takeaways

Due to time constraints and a rough personal week, I was unable to put many of the smaller affordances in that I would have liked, such as a clean advisor and founding fathers portal in the proposal section and club manager wireframe where club information can be added.

 

Instead what I focused on areas that I believed that users of the experience will use the most (based on the research I took). These areas are represented in my red route analysis, which I consider a summarization of a lot of my research that was collected.

 

Another area that I would have liked to focus on during this process was usability testing. For this project, I would look to cheap, paper testing to save money and carry out the testing process quickly.

In doing this specific design challenge, one of the things I was most excited about was the idea of helping a wide range of users, which range from not just new students, and transfers like Trent, but also club executive board members as well as even advisors. Understanding these different personas was extremely exciting for me, and pushed me to never make assumptions and to always think of the user.

 

Lastly, I want to thank Google for writing me to participate in this design challenge and hope they continue the spirit of helping their over a billion person user base!

Thank you for reading!

  1. When looking for a club, what qualities do you look for to determine if it is a good fit?

  2. Have you used EngageSC (school’s online club portal)? 

  3. If so, what were some strong and weak points? 

  4. What was your goal for using it? Were you able to achieve that?

  5. Have you proposed a club?

  6. What were some of the challenges?

  7. Did you do it through EngageSC?

  8. What do you like or dislike about the USC club recruiting process?