Navigating New Student Orientation
UI/UX Design + Visual Design
Introduction

This case study was done as a prompt for the 2019 Google Design Challenge. It searches for issues regarding to UC Berkeley's new student orientation program and ideates solutions in the form of an PWA. A large focus was to create a visual design that helped users navigate the various orientation events.

Logistics
  • Project Duration: 1 Week - January 2019
  • UI/UX Design + Visual Design
  • Team: One Member
  • Role: Primary UI Designer and User Researcher
  • Tools: Adobe Illustrator, Adobe Photoshop, Adobe XD
Background

Throughout the past few years, UC Berkeley’s new-student-orientation has evolved from a quick overnight excursion, to a week-long immersion where students are encouraged to explore the campus and city, while also attending mandatory events that inform them about campus rules and regulations. In the program, the new students are given a vague schedule (the schedules differ based on the type of new student, like freshmen living on-campus, to junior transfers living-off campus) of the upcoming events and then are handed off to “GBO (Golden Bear Orientation) Leaders” who are to guide them. The overall reception of the of the GBO program has been mixed; with praise to the immersive experience and criticism of the treatment of the overworked GBO Leaders. The following design case study will address the proposed challenge (stated below) by understanding the pain points that students encounter throughout the process.

The Challenge

As part of the Google design challenge, I was provided with the following prompt:

A new school year is approaching and the orientation team is looking to you for some design expertise. 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. Provide high-fidelity mocks for searching, browsing, and viewing the details for these different events.

Interpretation and Constraints

Reading the prompt, there are a few things I can pick out and define based on what it refers to in my situation:

  • students: UC Berkeley Students
  • orientation events: GBO (Berkeley’s orientation plan for new students)
  • visual system/high-fidelity mocks: digital experience?

Additionally the prompt of the challenge lays out the basic needs for the design that I am required to create, it must include:

  • a search function
  • a browsing function
  • an event details function
  • a visual system
  • User Research + Insight Synthesis
    Target Groups

    When deciding on how I wanted to conduct user research, I first needed to determine the target group of users whom I should interview and empathize with. Considering the challenge addresses navigating the new-student-orientation events, I deduced that my target groups would be:

    • GBO Leaders
    • GBO Attendee (Freshman Living On-Campus)
    • GBO Attendee (Junior Transfer Living Off-Campus)

    Luckily, I am in contact with persons who fit these target group specifications and was able to interview them.

    Observations + Affinity Mapping

    At the conclusion of the interviews, I recorded my observations onto post-it notes and organized them using affinity mapping. The map groups together relevant observations and allows me to identify over arching themes or ideas.

    Insights

    With the observations organized, I was able to analyze them and deduce several insights about the problem space.

    1. New student’s find the preplanned GBO schedule to be too packed and they can experience event fatigue.
    2. New students are wary of exploring events because of the fear of missing mandatory events.
    3. There is no official resource to find non-GBO sanctioned events, thus student’s rely on social media or world of mouth to discover new events.
    4. New students approach finding new events in an open exploratory fashion rather than looking for a specific event.
    Personas

    From the research I could distinguish two different types of users: group goers and independent planners. To better visualize who they are and what they need, I created personas.

    Ideating Solutions
    Design Goals

    Based on my research, the primary goal of the design is to:

    Allow new students to flexibly explore orientation events without the fear of missing mandatory events.


    New Design Solutions

    With the goal of my design defined, I ideated a handful of solutions and narrowed down the most important aspects to the ideas listed below:

    PWA: Progressive Web App

    From the interviews, I noted that students couldn't be bothered to download the GBO app (as they'd be deleting it within the next two weeks anyways), and that their experience with the static GBO website was using it as a guide reference. To make my digital design effective, I need students to make it easy to access yet still have all the required functionality. Keeping this in mind, I would make the design a Progressive Web App. This allows users to easily access it like a website and add it to their home screen, while still enabling a scheduler type functionality.

    Event Exploration

    This design solutions proposes that the search function has more of a browsing mentality. This design decision is effective because most of the time, students don’t have a specific event in mind; thus they cannot enter a specific search query.

    Event Sorting

    Having events organized by type makes it easier to browse. Additionally, there can be additional event characteristic signifiers such as: conflicts with mandatory events, GBO recommended, free or open to all students.

    Organizing and Managing Events

    Providing a do-to list/ itinerary will help alleviates the issue for new students missing out mandatory events, and allows students to be more independent from their GBO leaders.

    Out Source to FB Event Page

    Users are already familiar with using Facebook to learn more about an event. Instead of implementing a similar system within the design, it would be more efficient to allow users to interact with the event on the exisitng Facebook event page.

    Mid-Fi Mock-Ups
    User Flow

    Before creating the mid-fidelity mocks, I first needed to create a user task flow chart to understand how users would complete a task. Doing this early allows me to minimize wasted time mocking a screen that has no place or effect in the flow.

    Browse and Search Screen

    When browsing events, users typically do not have a specific event in mind; thus I created a more exploratory approach to finding events. They will have access to a large list of events within an “event type”. From there, they first filter by date, and if needed, apply a search criteria. I want to purposefully make search feel like a secondary function to allow users to explore.

    Itinerary Screens

    Students felt overwhelmed when looking at the weeklong preplanned GBO schedule, worrying about if they are going to make it to every event or the consequences of missing a mandatory event. With the scheduling screens, I wanted to reduce the magnitude of the plans, by showing activities in a “day-by day” format. When thinking about user interactions, I created a system of tapping to switch days, and using a swipe to delete events. My initial mock ups were modeled after a to-do list, showing only time stamps with relevant/existing events, but this created issues with overlapping events and double booked events.

    Detail Screens

    When designing the detail screens, I wanted to create an emphasis on decision making logistics and placing them at the forefront. These include characteristics such as: conflicts with mandatory GBO event or open to all students.

    Defining a Design System

    When creating a visual system, the first thought that came tom mind was the Olympic Games branding. Every Olympic Game has a different branding, but what they do is develop a motif and implement the motif through all the icons and symbols that are created. This ensures that the icons for sports as different as equestrian and rowing have a feeling of commonality within them.

    Developing a Motif

    For a while, I struggled to sketch out a solid motif. I messed around with shapes, lines and symbols, but eventually decided on creating a simple guideline in lieu of a traditional motif. Using these guidelines, I created some logo designs for the new GBO. Based on those logo designs, I continued to make icons that represented different types of events: visual arts, food, sports, volunteering events, social groups and music.

    Visual Association & Correlation

    Style Guide

    High-Fidelity Mockups + Prototypes

    On Boarding

    Itinerary Page

    Browse + Search

    Details Page

    Conclusion + Reflection

    Through doing this case study, I was able to practice my user ethnography skills and apply them to the UX design process. Through my work on this concept app, I was able to take observations from interviews and user sessions and develop them into insights that were relevant in shaping the eventual design. Another learning experience that I took away from this case study was how to conduct testing for interaction design and understanding which interactions work best. A large struggle for this design case study was the visual design choices for the interface.


    Seeking Out Better Search

    Read the Digital Search Case Study