Discovering Orientation Events

The Challenge

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.

Team Solo
Duration 7 days
Tools Sketch, InVision, Procreate, Google Form

*This article is unlisted. Only accessible via the direct link.


The Outcome Overview

How Might We Statement

  • How might we make more students attend helpful events?

3 Goals

  1. Help students identify events that fit their needs & interests.
  2. Help students identify events that fit their schedule.
  3. Help students to attend events with peers.

InVision Prototype

Invision Prototype https://invis.io/FKR630PDQGZ#/353972575_01

THE PROCESS


1. Define the Problem Scope

First, I defined the scope of the problem space I’m going to work on —

School Level: Universities in the States
Definition of Orientation Events: Any student event aiming at welcoming and engaging newcomers at the beginning of a new academic year. Integrating new members to the community is a continuous progress that could take weeks or months and from multiple fronts.

2. Research

Since I’m designing for students to search, browse, and view orientation events, I first started with the big question below to understand what might motivate them to go to orientation events and what they’d want to get out of those events —

What are students’ psychological needs when they first start at a university?

Also, I wanted to discover —

What obstacles do they face towards events that they might actually go?

In order to figure these out, I surveyed 17 people who are current university students or recent graduates in the country. I asked questions such as “What were you looking for when you first start at the school?” and “What are the problems you often have towards events that you might actually attend?”

Google Form Survey Responses

I also did some competitive analysis and took notes on how other products introduce events to users and how users interact with event news.


3. Synthesis Findings

According to the survey results, these insights stood out —

Newcomers’ Top Needs

→ We should help students identify events that could fulfill their needs. Events should be highlighted with its characteristic if that fulfill the specific need of the student.

- -

Easiness to Discover Events

→ The solution should focus more on helping students spot events of interests, than providing access to a huge amount of events.

- -

Major Issues

  • Too much event news to digest and most of them are not of interests.
  • Conflicting schedules; Troublesome to check availabilities.
  • Hesitate to go alone; Not knowing who else is going; Troublesome to share event info (to invite peers to go together).

→ Solving these 3 major problems are the major goals of the solution.


4. Design Mission

After distilling my research into concrete insights, I developed the major HMW statement —

How Might We Statement

How might we make more students attend helpful events?

3 Goals

  1. Help students identify events that fit their needs & interests.
  2. Help students identify events that fit their schedule.
  3. Help students to attend events with peers.

5. User Flow

Keeping the HMW and goals in mind, I started mapping out the user flow and incorporated the features and actions needed into my sketches.

User Flow and Screens by hand sketching

After trying out several iterations on paper, I moved this version on to digital wireframing (using Sketch).


6. Wireframing

The design is comprised of 5 major parts, On-boarding, Setting-up customization, Exploring best matches, finding/inviting peers, and notifications. Details follow in the high-fidelity section.

Digital Wireframe by Sketch

This event finder is designed to be part of Google’s G Suite for Education, which universities adopt for students to manage their campus life (email, calendar, messaging, and file management).

G Suite Example

Why do I choose to make it a part of G suite?

(1) Students are already dependent on this system. Eliminate the burden to sign up and get familiar with an additional app.

(2) Information from the calendar & other G Suite apps and the student demographics can be utilized for a better-integrated event finding service.

(3) It’s school-based, which clearly sets up the context of including events of this university only, instead of being an Eventbrite.

(4) Students are allowed to access the community directory and reach out to any member. (Ex: Typing a name in the Gmail recipient column triggers an auto-search in the directory) This can be perfectly adopted to help students invite peers.


7. High-Fidelity Prototyping

5 major parts of the design are introduced below:

Onboarding

The onboarding process of the designed G Suite Event Finder. Using CMU as an example.

The first screens welcome the new student to the school and to this app as a user. It reads the account recently logged in on this device, so the user can simply tap to continue if it’s correct.

- - -

Setting-up Customization

There’re 3 questions to identify the user’s psychological needs, preferred types of events, and time preference. These contribute to the Match Score calculations. Additionally, we provide the feature to filter events that conflict with the user’s existing schedule (on G Suite Calendar).

After responding to all questions, the system would process the recommendation list. The icon is double-sided and will be spinning on Y-axis. The front side of the icon is the school logo, and the back side is the user’s profile pic. The spinning animation implies the integration of the user and the school.

- - -

Exploring Best Matches

Major Screens:

3 bottom navigation tabs, Explore, Saved, and Going. Users move through the navigation from left to right as they start from exploring suggested events to narrow down several to decide to go.

Explore View:

It displays a tailored event recommendation list to the user. Events are ranked by Match Score, which is designed for addressing Goal 1. It helps students to identify events that fit their needs/interests.

Match Score is calculated with the data taken from

(1) the user’s basic info in the school system,
(2) the responses from the onboarding process into consideration, 
(3) continuously learning from the user behavior in “saving”, “going to”, and “rating” events.

It’s inspired by the match intervention on Google Map to suggest points of interest.

Event Info Page:

  1. 3 primary call-to-action, Going, Save, and Share. Also, it indicates the match score and its reasoning, the time and the user’s availability according to google calendar, and displays who’s going.
  2. Users can tap on the Match Score to see the reasoning of the high match score. — addressing Goal 1
  3. It indicates “You’re free!” next to the event date and time if it doesn’t conflict with user’s existing schedule on the google calendar. — addressing Goal 2

- - -

Finding/Inviting Peers

In order to address Goal 3 — Help students to attend events with peers — there’re 2 particular features designed on the event info page.

  1. Users can effortlessly share the event with their peers simply by tapping on “Share” and entering the name. The app will search within the school directory and send an invitation email to check out the event.
  2. Users can also tap on “Who’s going” and see the list of fellow students going to the event. Students in the same college and the same cohort with the user will be listed on the top.

These are designed to help students find or invite peers to go together, and that is to increase their motivation and execution in actually attending.

- - -

Notifications

As mentioned in the beginning, integrating new members to the community is a continuous progress that could take weeks or months. So, it’s important to have notifications to make the app a mid-to-long-term solution for event recommendation.

There’ll be a push notification when a newly-posted event matches a user with a high score; Another push notification when a saved event is coming up in a few days (and the user hasn’t RSVP).


8. Visual System for 5 Types of Events

First, I associate each type of event with a human sense / body part to represent the interaction between people and events. For example, human uses “eyes” to appreciate visual arts; people give a “hand” to others when volunteering. So I use an eye icon to symbolize visual arts events, and use a hand icon to represent volunteering events.

Furthermore, I associate colors with the events/symbols. For instance, green is beneficial for eyes, just like visual arts sparks joy for humanity; red represents the hot blood of passionate volunteers. Therefore, I use green for visual arts and red for volunteering.

In terms of the layout to distinguish different types of events, I choose to apply the colors and icons subtly. The color is applied to the thin bar next to the event cover photo and event title, and there’s a tiny icon on the lower left part of the photo. Since each event has its own photo, uncoordinated with one another, it makes the app visually complex already. Hense, I want the UI itself to be clean.

Type — Symbolic Icon — Color

  1. Visual Arts — Eye — Green #0F9D58
  2. Sports — Foot — Yellow #F4B400
  3. Volunteering — Hand — Red #DB4437
  4. Social Groups — Mouth — Blue #4285F4
  5. Music — Ear — Fuchsia #CA08A0

Last but not least, 4 of the colors are intended to be aligned with Google colors, since the product is designed to be part of G suite solution.


9. Reflection

Next Step: Conduct usability testing and iterate.

Given more time: Explore how to make the overall experience more playful and engaging.


Thanks for reading!

Photo Credits