Joseph Kim
oweek_banner.jpg

OWeek

.

orientation.jpg

Summary

Following Option 2 of Google’s 2019 Design 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.

OWeek is an app that helps students discover orientation events based on their interests. While event discovery is the focus of the experience, event sharing and community building were also considered to reflect the students’ goals of college orientation.


Challenge

Entering college is an exciting time for students. While orientation is supposed to help students make a smooth transition, it often leaves them overwhelmed with a lot of activities and people packed into a short timespan.

How can we make discovering events more enjoyable and social for new college students?

Outcome

A Discover view that recommends events based on personal interests. Every event can be shared with friends, orientation group, and residence, which helps students meet other people with similar interests.

Main Insight

Students see events as a bonding experience with old and new friends. Therefore, events are discovered and attended together with other students.

Searching and Sharing Events with Friends Externally


Understanding the Orientation Experience for Students

For my user research, I interviewed current seniors, recent graduates, past orientation leaders, and current freshmen:

  • Past orientation leaders provide an insider’s look into how schools run orientation events and third-party insights into student behaviour during orientation.

  • Current freshmen provide recent accounts of orientation which are good for emotional research.

  • Participants were selected from different schools to reduce selection bias.

Through research, I identified my users as students attending orientation and orientation leaders. For this challenge, I decided to highlight my design process for students.

user_stats_2.jpg
 

Turning Actions Into Insights

The diverse pool of research participants provided unique perspectives with overlapping experiences. For my analysis, I grouped similar actions with intended goals to extract key characteristics of my users. These characteristics were used to create my user personas and experience journey maps presented below.

Grouping Similar User Actions with Intended Goals and Behaviours

I discovered events mainly through word of mouth. We’d be informed by our orientation leaders and by other people in residence.
— Kristin, College Senior
I don’t think I really went to any of the events that my friends didn’t go to!
— Ashley, College Freshman

Actionable Insights

1. Students help other students discover orientation events by sharing information.

2. Students are motivated to attend events that personally interest them and prefer to attend events with friends.

3. Students find it easier to meet new people and make friends in their residences.

4. The event discovery process is largely community-based; therefore, the experience should accommodate students with varying social behaviours and backgrounds such as international students.


Introducing Tinashe and Yusuke

User Personas of Incoming College Students — Tinashe and Yusuke


Defining the Design Requirements

The user interviews, personas, and journey maps helped me internalize the unique circumstances and pain points that students have during orientation. Through this, I was able to formulate business, user, and technology requirements as a baseline for success.

Business Requirements

  • Create online student communities to promote student interactions and event sharing

  • Retain students on the app by being a dependable source of event information and streamlining the event discovery and sharing process

  • Recommend events that match closely to the students’ interests

User Requirements (Students)

  • Inform the app of personal interests

  • Search, discover, view, and share events with friends

  • Find opportunities to meet new students within orientation groups and residences

User Requirements (Orientation Leaders)

  • Provide students with event details and guidance during orientation

  • Engage with students within assigned orientation groups and residences

Technology Requirements

  • A recommendation engine that promotes events based on students’ personal interests

  • A search engine for finding and browsing events

  • Group messaging between students within their communities

Discovering and Sharing Events with Residence


Off to the Drawing Board

I started my design process by defining separate user flows for onboarding and event discovery. Isolating the onboarding experience helped me focus on branding, user expectations, and value proposition as students transition into the event discovery experience. It was important that both experiences complement each other to set the right balance between excitement and satisfaction.

 

User Flow Diagram and Wireframe Sketches for Onboarding

The onboarding experience was designed to be as welcoming as possible considering that students will be feeling both excited and anxious as they first enter college life. Considering these emotions, students are greeted with personalized welcome messages, reassuring them at each step of the onboarding process.

Additionally, onboarding includes an optional one-time questionnaire that asks students to select topics that interest them. This is a data-collection step that will allow the app to recommend the most relevant events to students.

User Flow Diagram for Onboarding

Wireframe Sketches for Onboarding

 

User Flow Diagram and Wireframe Sketches for Event Discovery

User Flow Diagram for Event Discovery, Searching, and Sharing

Wireframe Sketches for Event Discovery, Searching, and Sharing


Iterating with Low-Fidelity Mockups

The next step of my design process was to add user interaction to the flow and determine how that will affect the overall experience.

Motion Design as a Solution for User Complexity

One criticism about the event discovery process is that it is very information-heavy. A major source of user complexity arises from mentally processing all of this information as students jump between browsing and viewing events. Transitional motion design was implemented to ease mental work for students during the discovery process. Motion design improved the user experience in the following ways:

Motion Design for Revealing Event Details

Motion Design for Revealing Event Details

  • It helps students orient themselves in the app — understanding where they came from and how they got here.

  • It helps students retain focus on the event that is being viewed — literally jumping into the desired content without abrupt changes.

  • It provides students with small bursts of energy — sparking joy in a repetitive task.

Another motion I considered was “swipe down to close” to return students from item view back to list view. However, due to technical difficulties, I was not able to present this in my mock-up. Instead, I decided to focus on explicit ways to inform students on how they can return to the list view. This was accomplished by revealing a hidden “X” to close the event details. I believe striking a good balance between explicit and implicit information is an important part of UX design.

 

Conducting Usability Tests to Inform How Students Explore Events

With the convenience of low-fidelity prototyping, it allowed me to experiment with different user interactions by testing them against real users. For the Discover view, I wanted to compare whether using tabs or cards provide students with a better experience for discovering events:

Comparing Tabs vs. Cards in the Discover View

Comparing Tabs vs. Cards in the Discover View

Assumption

Tabs facilitate event discovery and exploration better than cards because it provides a flatter hierarchy of events, allowing students to quickly jump between categories. The chosen test metric was the completion time for the assigned task.

I like tabs — it saves an extra click for going back.
— Nathan, Past Orientation Leader

Findings

Students preferred the tab layout because exploration felt smoother and faster compared to the repetitive back-tracking that was prevalent in the card layout. Trials with the tab layout scored a lower median completion time.

Action

The tab layout was chosen for the high-fidelity iteration and transitional animations were adjusted to emphasize a smoother experience, which the students enjoyed.


Onboarding Students with the Quickstart Model

Collecting Students’ Interests during Onboarding

Collecting Students’ Interests during Onboarding

For onboarding, Material Design’s Quickstart Model was chosen because the main behaviour for increased retention and engagement was already identified to be event discovery and sharing. This afforded placing the students directly in the UI upon signing-in and the Quickstart Model provided the fastest way for students to begin engaging with the app after selecting their interests. Additionally, students were familiar with choosing interests to power personalization within similar apps.

I like the interests choice feature — I feel like most social media apps incorporate that.
— Caroline, Recent College Graduate
 

Using Animation to Resolve the Pain of Personalization

While data collection is a crucial step in personalization, it also introduces a pain point in the user experience. In order to resolve the dip in user satisfaction, I decided to leverage the emotional impact of animation to re-excite the users as they enter the app.

Managing User Satisfaction with Animation

Managing User Satisfaction with Animation

Designing for Inclusivity with Groups

While interviewing a past orientation leader, he shared that promoting events in a Facebook group also had the effect of facilitating communication between new students. Based on this, Groups was designed to create online communities where students and orientation leaders can share events.

Upon signing-in, students are added to group chats of their respective orientation groups and residences. It was important to integrate with residences because that was where most students met their closest friends. Being physically close to each other made it easier for students to meet up and plan events they can attend together. Therefore, Groups promotes inclusivity by giving every student, either introverted or extraverted, the opportunity to meet others through an initial online interaction.

Left: Real-life Use Case of Facebook Groups during Orientation

Right: Student Sharing an Event with His Residence and a Pinned Event by the Orientation Leader

 

User Content for International Students

Continuing with the theme of inclusivity, the orientation experience should accommodate a diverse student population. After speaking with an orientation leader, she mentioned that some international students had difficulty engaging with orientation due to cultural and linguistic differences.

Based on my user persona for Yusuke, an international student from Japan, one of his pain points was that a lot of new and important information were presented in English. While Yusuke is able to understand the language, the fast-paced nature of orientation requires constant awareness of events. To make it easier for international students to discover events, OWeek supports multiple languages to help them understand the content better and faster.

Event Details In Japanese

 

High-Fidelity Mockup

 

High-Fidelity User Flows

Searching and Sharing Events with Friends Externally

Discovering and Sharing Events with Residence


Measuring the Success of the First Iteration

Looking back on my design requirements, the first iteration of OWeek was able to deliver on the key business and user requirements after conducting post-design interviews and usability tests with students. While most students felt that OWeek met their needs, one student admitted that the event discovery experience did not align with his preferred method of browsing events:

I personally prefer to look at a schedule so I can cross off certain events that don’t work for me immediately.
— Nathan, Past Orientation Leader

While this may be the viewpoint of a single student, it garners enough validity to consider conducting further user research with a larger sample size. Therefore, the first iteration was not quite successful.

 

Preparing for the Next Iteration

  • Conduct user research on how students use schedules during orientation.

  • Explore filtering event schedule by event type as another way of discovering events.

  • Prototype a personalized schedule that contains events a student marked as “Interested”.

  • Implement push notifications for upcoming events — this feature can help students stay updated with the events they’ve shown interest in.

 

Closing Thoughts / Notes to Self

  • Be user-obsessed — involve users throughout the design process to facilitate conversational design.

  • Be wary of designing in a vacuum — sometimes you can trick yourself in thinking that your needs are the user needs, which can lead to undesirable outcomes.

  • Be a systems thinker — instead of focusing on designing a component of the experience, try to challenge yourself in thinking how the design can affect the ecosystem. How will changing the students’ behaviour affect the entire orientation experience? Are you introducing the right feedback loops into the system? Can your design accommodate them?

 

Thank you for taking the time to review my design process for OWeek.