Google Design Challenge

How can we improve the orientation experience for students through the design of visual systems?

 
Cover3.jpg
 

Spring 2019 | Google Design Challenge

Individual Project

Timeline: 7 days

My Role: Research, Concept Development, Wireframing, Design, Prototype

 

Design Brief

This is a 7-day design exercise for Google’s summer UX design intern application process.

I chose the design option as follow:

“ Design an experience for students to discover orientation events and craft a visual system to accommodate different types of events: sports, music, visual arts, social groups, and volunteering events.”

My prototype and process can also be viewed in this slide deck:

 
 

Overview

ConNet is a platform designed to create personalized and engaging orientation experience for new incoming students to discover different types of orientation events. The design aims to provide accessible and synthesized information of different events, and serve as a platform for exploring the surrounding context of the campus and meeting new people.

 
 

Timeline

Screen Shot 2019-02-05 at 9.26.25 AM.png
 
 

Prototype

 

An interactive version of the prototype can be viewed at the end of the page.

 

 

Understanding the Problem

 

To fully understand the issues of interaction with existing orientations, and better gauge the scope of the design within a limited timeline, I started out by writing down a list of questions to brainstorm about the topics of the design exercise, and then formulated these questions for user interviews to understand the underlying issues with the existing orientation experience.

  1. What are some typical ways that you used to discover orientation events on campus (how did you know where they are or when they are)?

  2. What are your goals and motivations when you go to these events?

  3. What are some platforms you used to communicate with other students(or student groups) during orientation? Do you find these platforms useful?

  4. What are some difficulties you have experienced when trying to discover or go to these orientation events?

  5. What are some factors that prevent you from going out and discovering these events?

 
 

User Research and Interview

During the user survey and interview process, I gathered insights from over 20 students in universities across the United States who have experienced student orientations.

Selected Results from User Survey

Selected Results from User Survey

Q1: How do students get information such as time, location and type about orientation events? Are these platforms currently in used helpful for discovery?

Orientation informations are printed on booklets, sent through emails or shared on social media.

The information is usually scattered across various platforms, therefore it is hard to keep track of the status of all events (especially for prints) and easy to miss changes and updates.

Insights 1:

There is a lack of integrations and low accessibility of information through various platforms, which result in latency in communications of updates and changes to events, causing potential schedule conflicts.


Q2: What are students’ goals and motivations for discovering different orientation events?

I mainly go to orientation events to discover what organizations and resource the university has to offer, and get myself familiar with the campus environment.

I want to socialize, meet new people and have fun.

Insights 2:

Making connections with other students and getting to know the new environment are the two main goals of incoming students for discovering different events on campus and in the surrounding neighborhood.


Q3: What are the major problems that students encounter during the process of exploring and participating in orientation events?

There are too many events listed in different places, and they’re usually only text descriptions. Sorting out all these information and finding interesting events or events that are relevant to me is difficult.

The campus environment is usually new to everyone, and navigating from one event to another within a tight schedule can be challenging, especially in a large school.

It is intimidating to be the “new one” at an event, but sometimes I cannot find people to go with.

Insights 3:

The traditional text-heavy display of information prevents students from finding relevant information easily.

The lack of clarity in the mental model of associating events with the physical context makes it challenging for navigation. There are also social challenges with finding like-minded people before going to the events.


After gathering all the insights, I created a user journey map to synthesize the insights and map out different stages of the exploration process to understand the corresponding pain points and user goals.

User Journey-01.png
 

 

Design Opportunities

Problems

Based on the user research, I synthesized the insights into three major problems that my design will focus on.

  • Lack of Relevance in Discovery Results

  • Lack of Clarity in Information Representation

  • Low Accessibility in Information Updates for Effective Planning

Design Goals

Keeping these problems in mined, I identified the design opportunities to improve students’ overall experience in discovering orientations events with these design goals:

 
  • Personalize browsing and viewing process to create socially engaging and valuable experience for individual student.

  • Organize and represent information of different types of events in a new environment in a clear and meaningful way for exploration.

  • Synthesize and integrate information of orientation events in a coherent platform for effective planning and communicating real-time updates.

 
 

 

Design Rationale

Assumptions

There are over 50 events during the orientation including the ones organized by university, student clubs and community outreach.

The platform can continue to serve the entire class of students after orientation to provide accessible information of events happening in the school and in the community.

Multiple Platforms

Mobile

I decided to focus the design on mobile application because of how heavily students rely on smartphones for communication, navigation and social engagement on a daily basis.

The intention is also to design a flexible framework that allows for different compatibilities and future scaling across various digital platforms and depending on sizes of school.

Web (future rollout)

As a further step of developing a scalable platform, I find that providing a web version of the application can help users effectively build a mental model of such complex layers of information in relation to a new physical environment.

Bigger screen size on tablets and computers will enable clear visualization and comparison of more information at once, which can complement the limited space on the mobile app. But because of the time constrain and trade-off for development cost in a new product like this, my design will focus on the mobile version.

Design Pattern

Material Design

I referenced design patterns from Material Design and started out with the most basic functions and components to craft the visual system, considering the timeframe and cost of development for future roll outs.

Walk-up and Use

I integrated existing visual language and systems such as Google Map and the shortlist feature to make the interface and interactions familiar and easy to use for first-time users without a deep learning curve.

 

 

User Flow

 

Based on the design goals and rationales, I proposed a potential user flow. I explored the existing pattern of students exploring orientations events and build upon the process to make it intuitive to use. I also added new exploratory and social features to help augmenting the experience.

User Journey (3).png
 
 

Wireframing

 

 

Final Design

 

Challenge: Relevance in Discovery Results

solution1.jpg

Solution 1

Personalized Recommendations with Visual Cues

  • The Home Page shows the most popular events and recommendations based on user profile such as majors, preferences and friend groups, as well as overall user engagement and RSVP rates.

  • The “coming up” section at the top of the homepage also helps reminding user about the personal schedule.

  • Cards are used to enable easy actions such as save and share while browsing through recommendations.

Solution 1 Cont.

Personalized Recommendations with Visual Cues

  • The Event Detail Page utilize full bleed images to engage user and provide direct visual information about the event.

  • Images instead of lengthy text descriptions are used to showcase event highlights for effective representations of what can be expected at the events.

  • The match score provides analysis of the event’s associations specific to user’s past experience and preferences, and helps user better gauge the relevance and build a mental model of event systems.

  • Dark mode for events at night.

Solution 1 Cont.

Personalized Recommendations with Visual Cues

  • “Related Events” section help users discover similar activities.

  • Match score also warns potential conflicts in event scheduling to help user make informed decision.


Challenge: Clarity in Representation of Multilayer Information

solution2.jpg

Solution 2

Color Code System for Event Browsing

  • Events are color coded based on topics for categorization and visual distinction in browsing and searching.

  • Students can easily select the desired timeframe and types of events to narrow down the search result.

solution2con.jpg

Solution 2 Cont.

Color Code System for Event Browsing

  • Search results are displayed based on color code as well as time frame selected for clear viewing.

  • More specific filters can be applied to further narrow down the search results based on event locations and types.

Solution 3

Map View and AR-Enabled Camera

  • Map with scheduled event overlays and amenities provides a clear view of the user’s agenda in relation to the physical world, and the details in the event enables direct navigation with the option to invite friends.

  • AR-enabled camera allows both augmented navigation service as will be provided in Google Map, as well as the discovery feature that suggests events based on the immediate context recognized by the camera and the user’s schedule. This helps the user build a more comprehensive mental model about the physical world along the way of the discovery.


Challenge: Accessibility in Information Updates and Planning

solution4Push.jpg

Solution 4

Push Notifications and Personal Schedule

  • Real-time notification regarding changes and status updates of saved or scheduled events.

  • Personal schedule provides estimated times of travel and reminders of upcoming events.

  • Shared events are labeled for distinction.

  • Future rollouts will consider in-app messaging features for effective communication within an integrated eco-system.

solution4.jpg

Solution 5

Customizable Lists for Personal Planning and Sharing

  • Events can be saved to personal lists or shared with others.

  • Shortlists can also be created for group planning.

 

Key Interactions

 

Scrollable Cards

Map and AR Camera

 

Interactive Prototype

 

 
 

Future Considerations

If given more time, I want to go in-depth to concept testing with college students to see how they react to the design features, especially the AR-enabled camera with event suggestions, and the event planning with groups. Due to the time constraints, I only tested low-fi sketches and the event browsing section of my high-fi screens with a limited number of students. Therefore, the next step in the future will be conducting usability test on my entire high fidelity prototypes iterate on the screens more.

For the longer roadmap of the product, I want to develop the web version for desktops and tablets, which will allow for better visualization of information on the map and more sophisticated interactions.

I also want to incorporate more social feature such as in-app messaging and embedded Google Calendar to leverage the ecosystem of Google products for more engaging and integrated interaction process.