Google Design Exercise












Overview

Project Title Google 2019 Design Exercise

Brief Create a new experience for searching, browsing, and creating student organizations

Goal Streamline and increase registration for student organizations

Users New students at The New School, which Parsons School of Design is a part of.

Analogy Design a mobile site like Meetup, but for new students at The New School.

Stakeholders The New School orientation team, new students

Constraints No quantitative data, and within 7 business days

Deliverables Overall process, a wireframe flow, and one to two screens at higher fidelity

Key Skills Wireframing, information architecture design, interaction design, and using the atomic design methodology to establish a design system.


Steps

Red is for research, and green is for design.

2. Users

Users New students at The New School

  1. No prior knowledge of the student organizations available or the process to create student organizations.
  2. The first communication about student organizations to new students is an email newsletter before the semester starts. It has a hyperlink that will lead you to a website.
  3. Once the new student reaches the campus and is exposed to the same communications eg. posters, classroom banter, one would assume that their browsing behaviour become very similar to that of "old students".
  4. Therefore if we are designing for new students, we would not begin with an app → web experience
  5. Without data, mobile-first is the best strategy to create responsive designs. It also paves the path to an app experience.
  6. “quality not quantity” → not necessary to do both desktop and mobile

3. Job-to-be-Done

Meet Jocelyn, a teenager trying to adapt to a new environment. She is hoping to meet like-minded people through student organizations.

She would first search or browse for student organizations, and consider creating a new organization only if none of the options appealed to her.

4. Project Scope

Some DOs

  • Do allow browsing by event
  • Do assume that all pages are run by an external party eg. student organization committee

Some DON'Ts

  • Don’t build an enterprise side dashboard
  • Don’t allow student-teacher chat/ communication on the platform. All follow-up communications would be completed through email.
  • Don’t allow sign-up and log-in
  • Don’t allow students to update student organization pages through the new web experience
  • Don’t allow listing of events not associated with an organization

5. Timeline

The timeframe for the task is technically complete “within 7 business days”. To be safe, I aimed to complete the task within 7 days.

Plan: 3 days of researching, 3 days of designing, and 1 day of presentation-crafting.

Reality: 4 instead of 3 days were spent on designing.

6. User interviews

Demographics

  • Given time constraints, I was not able to find and interview new transfer students.
  • Instead, I interviewed sophomores I share classes with.

Questions

  • To learn more about the content of the site - what factors do you take into account when you are looking for a new student organization?
  • To establish users' expectations - what to you would be important in a new “browse, search, and propose new student organizations” experience?

Results

  • Q1: Who is in it, what the commitment is, when it meets, where the events are, and why the organization exists, are the key questions users are asking when they are on the site.
  • Q2: They expect the website to “make me want to join an organization”. Specifically, this means making the site feel fun, exciting, and motivating.

Proposals

  • Making events pages to demonstrate what organizations do is pivotal to the browsing experience.
  • Making a quick sign-up form that sends an email to the organizers is easy - it can be done with a typeform, but will dramatically improve the browsing experience, and help us achieve the goal of increasing sign-ups.

7. Stakeholder interviews

Email interviewees

  • Daniel Wencek, Assistant Director of Advising
  • Jacinta Avery, Assistant Director at The New School

Questions

  • Targeting users' pain points - would you have around 3-5 common questions students have about student organizations?
  • Targeting stakeholders' expectations - What to you would be important in a new “browse, search, and propose new student organizations” experience?

Key takeaways

  • Make sure the information is as comprehensive as possible
  • Clear list of requirements, instructions, and timeline to propose a new organization
  • Professional, as a university platform

8. IA research - Meetup, Eventbrite

Without the time to complete in-depth qualitative research, or any quantitative data, I used Meetup’s IA as a basis moving forward. More screens can be found in the documentation 6. IA research - Meetup, Eventbrite (Google Doc). Some interesting features include using the footer to allow quick access to create a new student organization, adding a motivation bar on the home page for users who are not sure what organizations they want to join.


Something to think about

  • I realized that “browsing” primarily consists of two aspects. Firstly, structured searching eg. browsing by category, and secondly contextual navigation. Both of which are aimed at supporting users when they are not sure what they want.

9. Defining the problem - Synthesizing interview results and research

These are specific ways to adapt the Meetup experience for school organizations based on user interviews.

  • Include more inclusive tags
  • Allow major-specific browsing
  • Tweet length (140 characters) only goals, paired with longer descriptions
  • Highlight perks eg. food and drinks in preview
  • Highlight costs of events in preview
  • Show whether events are on campus or off campus in preview
  • Allow video uploads
  • Clarify the student organization creation process.

10. Student organization registration process

The process’ complexity surprised me. In order to get a complete picture, I had to find information across 3 domains, and read through more than 40 pages of agreements. You can find the final registration process here, and the collection of documents here.

11. PRD

Key Assumption

  • There is no representative quantitative data.

Summary of Assumptions

  • Everybody at a university that teaches in english knows english.
  • The new website will be integrated into the current set of communications, or in other words, we will not be redesigning the newsletter or how the website is presented to new students. This is the first and only touchpoint we will be considering for the project. Examples of other touch points include the displays, as well as the presentations at the legally required orientation session for F1 student visa holders.
  • Do not challenge the existing student organization creation process
  • This is a “must-have” - a standard website commissioned by the school. There is no need to build and validate separate pieces, nor do we need to question whether the features in the brief best serve user needs.
  • Meetup prioritizes group sign-up over individual event-going.
  • Unless there is gatherable data, we will assume Meetup has the most optimized experience, and follow the established system.
  • Meetup has optimized the category names, and have ordered the categories by their demand, from most clicked on, to least clicked on.
  • Assume the information architecture (IA) is correct. Users prioritize the other information over specific organizer information.

View the complete PRD in the documentation 8. Product Requirements Document (PRD) (Google Doc)

Main pages, with IA based on Meetup

13. “Molecules”

  • Referenced the design of other websites, such as GQ, Kickstarter, and Meetup, to inform the design of key components
  • General rule: rectangular media, circular profile photos, and rounded edges for clickable items.

Reference screens are in documentation: 10. "Molecules" (sketch file)



  • Informed by user interviews, I wanted the site to feel fun, cheerful, and motivating. This is done through the quirky Futura font, the bright and colorful pages, as well as the lively illustration style.
  • With more time, I would have created more tiles to explore other design directions.

15. Wireframing

      View high res image
  • Assembled the pages with designed components.

16. Wireframe flow

      View high res image
  • Diagram to demonstrate how you navigate the pages.

17. Questions to ask, things to do better in

  • A service level question - why don't students join student organizations? How can we address more needs with the website?
  • A sort of product life cycle" question - what do users do after they have been on the website? Do they share events/ organizations? If they do, do they share them publicly (eg. through a facebook post), or privately (eg. through a facebook message)? How can we facilitate that action?
  • Something to A/B test - organization and event previews have as much information as I can reasonably fit in. Is there any missing information? What information can we remove? How do users' expectations change from one page to another?

About me


Hi, I'm Marvin, a UX designer from Parsons School of Design!

I enjoy data-driven design immensely. As a UX consultant for Miro Ai previously, I leveraged quantitative and qualitative research to redesign their 2 million USD website.

In my free time, I like to cook or watch cartoons. I'll never say no to dogs or cool furniture catalogues :) Also, I have a mini-tree in my apartment called Rigby. Check out the bizarre books I'm reading this month.

Get in touch, or see CV