UW Orientation

UX Design

Project Overview

This is the google design challenge 2019. After applying to Google's summer UX design internship position, I received an email with this challenge. Challenge accepted!

Here's the prompt I chose:"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."

My Contributions

I am the designer of this mobile app. The original app is used at UW for orientation and I changed the user interface to make the app more user-friendly.

Project Overview

"A big thing about reworking furniture is that people like to paint wood things white, white things black and black things wood color. "
- Me observing my friend Sarah doing wood work.

I decide to design an orientation mobile app for University of Washington, Seattle. The orientation week lasts for a whole week at UW and is called "DawgDaze". The current design which is shown below has a list of events that are offered by time. The user can filter by type of events "drop in", "wellness", "guests & family", etc. When the user clicks on each event, a more detailed description is provided. User can also add the event to their personal calendar. The goal of these events are to help students make friends, learn on-campus resources, and find what major of interest.
‍

The improvement I'm trying to achieve with this app is to "gamify" the events. If students only find events that seems interesting, they will miss out on new opportunities that they have never tried before. Therefore, I decide to make a campus wide scavenger hunt. The new students are encouraged to do at least 3 events per day across topic. Every time they finish an event, they receive a stamp on the app. The new students will become more familiar with the campus, discover secret pathways and study areas. They can also post images and comments about the events they attended to help other students.

Persona

Rachel: freshman from out of state who wants to make friends duing orientation.

Wireframe

I divided page by functionality. In orientation page, the students will see a summary of event. The location page will show how to get from building to building. The event page will show the details of the event and comments from other students.

Mockup

The mockup version shows the flow of the action. The student would start on the orientation event page and see a list of events by date. I kept the filter function because it would be helpful for students who have strong preferences.
From their, the student can check out the detail of each event and the reviews. If they are interested, they can add it to their calendar.
The location page shows the student where the events of the day are located.
Once the student checks in to an event, they get a stamp. At the end of the event, they can leave a review about their experience.

Prototype

The first screenshot is the orientation events page. The student can scroll horizontally to see more events. If the student likes an event, they can "heart" it and it will be added to their calendar.
The color Theme follows the UW typography so that the student instantly takes on the roles as a current UW student.

The second screenshot shows the detailed event page. In this page, the student can see event name, date, time, number of participants. Students can share this event with their friends, contact the event host about questions and find the direction.
The app itself is super simple and is designed to be used only in orientation. The other aspect of the app is that when the student visits a building, it will light up in the map. The more events a student attend, the more likely they will get to know the campus.
‍
*The design of this mobile app follows the google material design guideline and is designed in Figma.