Google

7 business days - Create a new experience for new students at Parsons to search, browse, and create student organizations (2019 UX Design Exercise)

Skills: wire-framing, IA design, applying Google's Material Design Guideline, creating a design system with the Atomic Design Methodology

* Project at a Glance

Prompt: 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 the Parsons School of Design is a part of

Stakeholders: The New School orientation team, and 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

Skills: wire-framing, IA design, applying Google's Material Design Guideline, creating a design system with the Atomic Design Methodology

Steps

Research

  1. Defining the Brief: Defined users, platform, DOs and DON'Ts, and next steps
  2. Timeline: Established deadlines
  3. Student Organization Registration Process: Summarized the process from 3 domains, and 12 legal documents (Ran concurrently with 4. and 5.)
  4. User Interview: Asked 1 question about the content, and 1 question about the platform to each of the 12 interviewees
  5. Stakeholder Interviews: Interviewed the Assistant Director of The New School, and the Assistant Director of Advising to establish common problems new students have, and the stakeholders' expectations
  6. IA Research - Meetup & Eventbrite: Without any quantitative data or the time to complete in-depth qualitative research, I used Meetup's IA as a basis for the new product
  7. Information Audit: Synthesizing user (primary) research and IA (secondary) research
  8. Product Requirement Document (PRD): Documenting the entire process

Design

  1. Website IA: Structured the information in Excel tables
  2. "Molecules": Designed key components
  3. Tiling: Combined molecules into styling tiles
  4. Medium Fidelity Screens

1. Defining the Brief

Persona

Woman Sitting on Gray Chair
Stock image @DGTportraits

Meet Jocelyn! She is a teenager trying to adapt to a new environment. She is hoping to meet like-minded people through joining student organizations. With so much to do in a new city, she would only consider creating a new student organization if none of the options appealed to her.

  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

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

2. Timeline

I aimed to complete the task within 7 days, with 3 days on research, 3 days on designing, and 1 day on presentation.

3. 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 12 legal documents. You can find a summary of the process in the wireframe.

4. User Interviews

Demographics

  • With limited time, I interviewed my classmates instead of transfer students.

Questions

  • To learn more about the content of the site - what factors do you consider when you are looking to join 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.

5. 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

6. IA Research

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.

7. Information Audit

I've made the following edits to the Meetup experience 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.

8. Product Requirements Document

Key Assumption

  • There is no representative quantitative data.

Summary of Assumptions

  • Everybody at The New School knows english.
  • This is the 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 the features in the brief.
  • We will assume Meetup has the most optimized experience and IA for group sign-ups.

Document: https://docs.google.com/document/d/1hYq69KvNrlohvLh9SlW0tnyO6eRN7arFP9cfNBqgmP4/edit?usp=sharing

9. Final IA

10. "Molecules"

General rule: rectangular media, circular profile photos, and rounded edges for clickable items.

I. Organization Preview

  • No overlapping
  • Smaller image to compensate for lower community image upload quality
  • Sharp edges for a full screen experience and easy tiling
  • Icons such as $ (requires a fee), School (on campus), and Food (food or drinks available) help users quickly access whether they want to join

II. Event Preview

  • Clear distinction between organization and event previews
  • I have removed the pre-event graphics to save screen space

III. Gallery on Organization/ Event Page

  • 3:2, the most common photography dimension, especially for DSLRs
  • To limit the number of pages designed and to prevent the page from being too long, there will be no option to expand. Only horizontal scrolling is allowed.
  • Edge case: no more than 40 images

IV. Comments and Discussions

  • Borderless to save space
  • Circular images for profile pictures

V. Categories

  • Round edges for clickable elements
  • Illustrated categories as a branding opportunity

VI. Search

  • Edge case: show related categories when a search returns no results

VII. Major-specific Browsing

  • Round edges for clickable elements
  • Organized by school names, which students would be familiar with
  • The New School has 50+ majors. Placing them in scrollable lists help save screen space

VIII. Text Fields

  • Round edges for clickable elements
  • Whereas buttons have a grey background, textfields have a white background

IX. Contracts and Agreements

  • Increased contrast by changing font size and italicizing numbers from ordered lists to make large blocks of texts look more interesting

11. Tiling

12. Medium Fidelity Screens

13. Next Steps

  • 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?
Other projects: 

marvincheung@yahoo.com
New York / Hong Kong