Finding the right organization for students with Google and AI
Google Redesign Challenge
A redesign challenge for Google 2019 User Experience Design Internship.
UX/UI designer
USER RESEARCH | INTERACTION DESIGN
Overview
As part of the hiring process of Google 2019 Summer User Experience Design Internship, I completed a design exercise to be considered for the next round of interview. I picked the 1st exercise to showcase my overall process in design, which involved a lot of design thinkings, quick iterations, extensive user research and quick prototyping through sketching.
As part of the design process, I designed and created an experience for new students to browse, search, and propose new student organizations. In this particular prompt, I used UCLA as a starting point to figure out the problems of university students finding clubs or organizations.
Timeline
Jan 26 2019 - Jan 29 2019
20+ hours of work
Methods
Design Methods: Design Thinking, User Research, Visual Design, Rapid Prototyping
Tools: Illustrator, Photoshop, Sketch
The Prompt
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. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity.
Challenge
How do I enhance the experience for students finding and proposing new student organizations? There are so many resources online and activity fairs to assist students to find students' organizations. There is also SOLE (Student Organization Leadership & Engagement) to help UCLA students to propose their own clubs. How do I address the problems and make a better experience on the android application that integrates both platforms?
Design Thinking: Process to tackle the prompt
I started this whole process approach to tackle the problem. This is very useful looking back which I can approach the problem in multiple ways and come with different solutions to find the best one that fits to tackle the problem directly.
Ideation
Current
Experiences
Main Problems
Solutions/
Goals
Research
Synthesis
User
Journey
Qualitative User Research
Quantitative User Research
Competitive
Analysis
Wireframe+
Iteration
High-fidelity
screen
Ideation
I started to break down the question into 3 specific purposes which included a) browsing: casually looking through the web/app to find student clubs, b) searching: specifically finding students clubs they like and c) propose: make a new organization. With that in mind, I then designed two sets of interview questions to address both a + b and c respectively. This included qualitative and quantitative results gathered from both surveys and face to face interviews with 45 students.
Research Plan
Part 1: 4 questions addresses idea a and b which are questions concerning the browsing and searching experiences.
1. "What do you use to find students' organizations?"
2. "What are the problems you face when finding the organizations you want?"
3. Why do you use the website instead of going to activities' fair, or vice versa?
4. What are you looking for when finding organizations?
Part 2: 3 questions addresses idea c which are questions concerning proposing students' organizations.
1. "How do you open an organization?"
2. "What problems do you face when you open the organization online?"
3. What are other opportunities you seek or use when opening your own organization?
Part 1: Quantitative Results
I onboarded 40 students to participate in the surveys that are 10 multiple choices on google form with the research plan above. To make it a diverse and unbiased demographics, I onboarded equal number of people from freshman, sophomores, juniors and seniors and obtained the following main reasons to search or browse students' clubs.
-
45% join clubs via UCLA annual enormous activity fair
-
34% join clubs through recommended by friends
-
10% through flyers, Facebook recommendation and etc
-
11% through UCLA organization's page
Part 1: Qualitative Results
I then conducted face to face interviews with 5 people ( 2 freshman, 2 sophomores and 1 senior) to understand their experiences with browsing, searching and proposing clubs.
By using affinity mapping, the searching and browsing experiences can be categorized into two groups which included searching for sophomore and senior, browsing for freshman. Both sophomore and senior are more clear on what clubs they want to join and only join clubs recommended by friends, while freshman have no specific goal when coming to college and will take advantage of the browsing experiences or enormous activity fair to figure out what they like. This gives me a clear goal on producing a solution that satisfies both groups of people.
Part 1: Finding the problem (browse + search)
Before I look at the problem I want to solve, I try to break it down to the root cause and find the following problems from the conversations with different college students.
-
"The website shows 1155 clubs, with more than 25 categories. How should I start with?"
-
"Enormous Activity Fair is disorganized and crowded. I always feel too rushed to have a full understanding with the club before the next person behind me squeezes in and replaces my spot. Subscribing email is a long process due to the queuing line"
-
"I often miss the deadline for clubs I want to join"
-
"I want to know which student organization is huge and worthy to join and probably their workload as well so I can balance my study schedule."
Part 2: Finding the problem (propose)
With the problems I found in searching and browsing experiences, I then utilized competitive analysis and interviews to figure out the existing structure of the platform that enables the proposal of clubs, which is SOLE ( Student Organization Leadership and Engagement) at UCLA.
Existing user flow with SOLE website
Club details
3 signatures
Add details
Review +
Submit
Competitive Analysis
Pros
-
Steps are broken down concretely with clear instructions
-
UI is organized and presented clearly
Cons
-
Must sign by hand and scan it online
-
Cannot save the information if done halfway
-
Lack of transparency of deadlines for mandatory workshops and application submission time
-
Only workable in desktop
Research Synthesis
With all the research results combined from Browse + Search, I discovered that people are unfortunately very disappointed with the current options to find and propose new students' organizations. There is a huge gap to enhance the opportunities for students to browse, search and propose new student clubs when comparing to physical presence in fairs and online resources. There are just too many flaws with the current solutions and systems.
Since majority of students find clubs through physical interaction in enormous activity fair which only happens once a year in Fall, there might be a lot of opportunities in winter or spring that students do not realize. Thus, I want to solve this pain point by creating a simple, seamless virtual experience to increase the chances of students findings clubs and setting up their organizations. Below, I synthesized the research into 4 major problems and 4 corresponding solutions to aid the problem.
Main Problems
-
1. Bad representation of the categories of various clubs due to disorganized resources and over crowdedness in enormous activity fair and Facebook
-
2. No transparency about the popularity, credibility and deadlines of the clubs
-
3. Poor filter system online for students to match their interests with clubs they like
-
4. The only channel to propose new student organizations is flawed: only desktop avalaible, tedious signing process by hand and scan and no saving function
Solving the Problem
Create a simple, easy way to match students with the organizations they like by building trust and transparency. Also, simplify the process for proposing their own organizations in a seamless, easy flow.
Goals
-
1. Leverage onboarding experience to match students and organization: students are prompted to fill up a simple multiple choice questionnaire to shortlist the potential organizations that match their preferences. The questions can include workload and the club's competitions. Enhance the existing experience in activity fair with Google Lens.
-
2. Enhanced transparency of new student organizations: Each organization's details are accompanied by the deadline of the application, functions such as how many people are viewing to show popularity, years of establishment and active members to show credibility
-
3. Make the filter system ergonomics: Ergonomics enhance user experiences. Provide a well designed filter system that includes categories, competitiveness, popularity, and workload to better gauge opportunities for students.
-
4. Make the proposal of new students' organization simple and compatible on the phone. Integrate functions such as electronic signature and ability to save. Also, make it compatible on different devices in order to make the flow efficient.
Design Process
I created four design flows that achieve each of the goal respectively, including Onboarding, finding clubs, club proposal and filter system.
While creating the user journey, I often ask myself these questions to enhance the experiences for college students:
-
1. How to enhance continuous engagement for students on the application while making it non-obstructive? Google Calendar Integration, Google Lens
-
2. How to make the signature process for proposal easy and fast? Send link via DocSign and sign electronically, invite friends for signature in GMail, directly link to Gdrive for all information
-
3. How to increase trust and establish credibility for clubs? Popularity, comments, length of establishment and active members all help
-
4. How to shortlist categories to simplify search process? 1155 clubs/ 73 categories = 15 clubs per category, way too many categories. Combine categories like Asian = cultural, Exercise = meditation
User Journey
4 user Journey
Wireframe (Sketch)
Onboarding and main page flow
Club details and Club proposal
Wireframe flow
Fulfilling Goal 1: Onboarding
The starting 15 multiple choice questions fulfil Goal 1 to increase matching students with organizations by shortlisting the clubs that will be potentially appealing to students. Then, the students will get into the homepage with suggested organizations.
Also, I ask myself how to make students more inclined to fill in the questions since it is optional? Then I make skip questions smaller and place it around the right corner to make it sway away from the attention of the user. Also, I use wordings that are friendly and welcoming to prompt students to use the mc questions. Google Sign up is also useful to store the names of the users to save steps and increase efficiency.
It is worth mentioning that the multiple choice questions can be chosen with more than one options which adds some flexibility when choosing. Preloading animation is also key since it can add that differentiability to the app by using a logo for animation and increasing credibility of the results. This is because if the results immediately pop up after the users finish answering the questions, they will feel that the app is not analyzing their results, thus losing trust.
Fulfilling Goal 1: Leveraging activity fair with Google Lens
Even though activity fair is overcrowded and disorganized, I cannot neglect its importance since it is still the most popular channel for students to get information about organizations' information. With Google Clips' AI powered image recognition, solving the problem of crowdedness and poor organization are not a dream anymore.
I leverage the real experience with activity fair by giving the ability to users "Search what you see". Now students can easily locate the clubs with one click icons to the club's logo, related visual items in front of them and get all the important information. If they want to know more, they just click down at the menu bar see more.
What's more, even queuing for a long and tedious process to sign up for email subscription will not happen again since users can easily enter "email subscription" after the resources of the club appear.
Fulfilling Goal 2: Enhancing Transparency
A strong product description should be comprehensive. It meets both users' and business goals. Club's Name, photo, category, years of establishment and active members are there to give a brief intro to the club that may possibly spark the interest of users.
However, there are three specific functions I want to mention here that greatly enhance the transparency and speed up viewers' interests.
Firstly, there is the "people viewing" function that basically show how popular it is and spark curiosity of users to know more about the information. In Social Psychology, people are easily influenced by others subconsciously with the "generalized others", basically people will follow the norm (popular things) automatically. Thus, by showing how many people are viewing, users will have a better idea of the popularity of the club.
Secondly, below 'Deadline for Application' is an icon that sends the deadline directly to the Google Calendar of the users. This is so that users are not obstructed by notifications which keep telling them when the deadline is. It gives the choice back to users to remind them while having the advantage of not disturbing them.
Lastly, there is the "Inquire through email" and "love" function that easily allow the student to get more info about the club by shooting an email directly and saving it into the selected favourite page. Since college students are very busy with work, saving and coming back to see the content is useful when they are deciding which club to join.
Fulfilling Goal 3: Make filters ergonomics
The search has 4 filters, namely categories, competition, popularity and workload. Students who don't want to take on intense workload but would like to join popular clubs can get their search results immediately with the filter. Users on the home page can see the club's photo and ratings that matches them at the top of the list. They can easily click in to see more about the club if they want. I underwent two iterations after some preliminary user testings and came up with the second version.
Competition Filter
Competition is filtered two ways. A range of continuous values is employed so that the users can toggle between the two extremes. Users can easily find the clubs that meet their expectations by knowing the acceptance rate.
Users can choose the application materials by clicking more than one option to find out the competitiveness of the clubs.
Fulfilling Goal 4: Make proposal simple and compatible
I made the student organization proposal simple by maintaining the original 4-step flow. However, to address the complexity of signing on paper and scanning it to the website, I incorporated electronic signature for easy signing up.
Also, there is no need for the physical presence of students. With the function "Invite Friends to sign via DocSign", users can now sign remotely using their phones and do not need to download the app since they are integrated seamlessly.
With "Import from Google Drive", the users can just import all the necessary documents seamlessly into the app with just one click. No need to worry from writing a long report anymore.
Lastly, users previously cannot leave the platform since all the information is not automatically saved. With "Save and Continue" , it is very useful where the users can continue where he or she leaves off and saves time and efficiency, avoiding to redo the application again.
High Fidelity Wireframe: 2 screens
In terms of visual design, I used marine blue #4F87EC as the primary color and orange as the secondary colors. I limit the use of blue so that it is only used in important situation like icons, functions and signalling transitions. Blue also represents the main color of UCLA and established that kind of trust for college students to choose clubs on the app. Orange #F5A623 is employed to give energy in the ratings and the competitiveness of the clubs.
Screen 2: Upper Part
Screen 2: Lower Part
Thinking about space and users
When designing a new app, I was constantly challenged to merge the experiences from different spaces that included physical experience of Enormous Activity fair and also the virtual experience of proposing clubs through the UCLA SOLE website. This is definitely a big challenge for me to constantly question myself on what to improve on those current's space experiences and what key advantages I can leverage from that. I cannot deny every platform has its own functionalities and advantages. But by bridging the gap between different platforms and syncing them into one whole application, I strive to create and even foster a better experience on my Android application than other platforms. It is important to always keep in mind that I am creating values for users while holding that kind of disbelief system (The 46 rules of Genius) so that I can critique my own work and improve on my existing design.
Another thing to be mindful while I am designing is the technical difficulties that are implemented for every design decision. I believe there are still ways for uncovering technical limitations such as exporting the screens from Sketch to Framer and find out possible React component's limitations and time to put the product out in store. Also, Google Alto may be useful for the messaging between students in the app with the club's officials, so that the students can can in depth information about the club which might be otherwise not disclosed on the application.
Looking ahead: How about AI + design?
I am very excited and optimistic about the design direction of Google. Ultimately, this is a Google Design challenge, and thus I treat it as an authentic Google product designed by Google employees shipped to millions of users. While reading about some cool projects Google Design are recently doing such as NSynth Super by Google Creative Labs to generate 100000 sounds using Tensorflow and openFrameworks. These are definitely some amazing milestone working towards maximizing AI for goods of human being.
By learning from People + AI Research (Pair) Collection, I dived deep into the two products Google Clips and Emoji Scavenger, both of which serve as a great inspiration to improve on my existing application.
I was shocked to realize that in the case study of Google Clips, UXers are building ML that fits human need while considering the technical difficulties of AI to solve problem. It is interesting to see how the UXers in the Google Clip's team are building AI products to be more humane that addresses human needs through time, visual and people factors.
Back to topic, I want to add that if my Android application, beyond Google Lens, can incorporate more ML models that predict the popularity of the clubs using click-through rates. By predicting what students will write in the proposal of organization in the app, we can use natural language processing to see what words students might usually say inside their proposal and how neural network can leverage that data by offering some general writing suggestions to users so that their process of filling in details can speed up drastically.