S. J. Zhang
Intro Background.png
Oriant logo.png

Orientations made easy for students and schools. Oriant is available to be embedded in your websites and apps.


Discover categories

Tap on a category

Check out an event

Like it ? Mark it


Search & filter

Enter keywords, or not.

Don’t care to travel? Filter and explore what’s nearby only.

Can’t go to any events after Thursday? Don’t show them.

My Schedule-c.gif

My Schedule

See all the events you marked interested.

Bad sense of time? Try the calendar view.

Highlighted events are mandatory!




What do you not like about orientations?

I interviewed 15 people on what they don’t like about their past orientations and how they discovered events (if they had an app or website to guide them through them).

Some people had websites centralizing information, but most relied on emails. Meeting new people is great, but managing what events to go to turn out to be a bigger pain point than discovering them. I concluded three problems that I would like to tackle through this experience design exercise.


From here I decided to design something that works like a calendar within the experience to help students get through orientation easier, and make it possible for them to maximize their time and go to more events.

Through the Calendar View, I want to achieve two purposes:

1. Make it easier to manage what events they want to go to and what they have to go to. 

2. Make it easier to get a sense of times and locations of the events.


What platform?

What is the product? A Web App

In recent years, the assignment system Canvas has been adopted into the workflows of students across the country. They allow customization and provide services to hundreds of universities. Their large scale gives them resources to craft a better experience for students than any system an individual school could build for itself. I designed Oriant to do the same.

In deciding what platform I will design the experience on, I thought about all the different applications in which different institutes can use this product:


After these considerations, building an adaptive web app came out as the best option. It can be embedded into these institutes’ existing mobile apps and websites. Since students would only use the app at the beginning of the semesters, a native app doesn’t seem urgent at this point.

It is important we allow institutes to customize the looks of the apps and make sure the design not only adapts to different kinds of events, but also the fact that different institutes have a different number of campuses and categorizes their events uniquely.


User Scenarios

During or before orientation week, students tend to have a lot on their plates. For planning events, it’s definitely more efficient to plan events on a larger screen — perhaps these students are doing class registration at the same time. But while the students are on the move, it’s easier to use a mobile app/site to check the times and locations.

Group 4.png

Although the two platforms are equally important, the mobile experience needs more attention on designing a solution that helps students to manage these events, so I decided to start with the mobile screens.


From browsing to attending events

Lo-Fi User Journey

Users can browse events and download schedules to the system calendar. If you sign in through your school ID and mark events, you can easily access your plans on mobile and desktop later.

Group Copy.jpg

Visual System

I designed the system to be as flexible as possible. Institutes are encouraged to customize the color of their apps. Since most educational institute do not have signature or custom fonts, it is not advised to change the fonts as that influences the legibility.


Customize your school color

Most of my examples in this case study is a violet palette for NYU. Below are two examples for how other universities could customize.

Customize School Color Copy 10.png

Adaptive Layout

From different text lengths to different images uploaded, the visual system adapts and renders a balanced and legible user interface.


Quantity matters

Number of search results changes the result page’s layout. When only one result is found, a taller large primary card is displayed. When 2-3 results are found, regular cards are used. When there are more than four, the list view is used to display results.

Group 7.png

Responsive & pixel perfect

All the components follow a responsive grid system that makes the interface friendly to different screen sizes and environments.


Design Decisions

Filter > search

From my interviews on how students discover events, many of those who had a website to use responded that they don’t know what’s available so they don’t know what to enter for keywords. For many smaller institutes, overly specific searches lead to few or no results found. Filtering through category and giving the results a quick scroll tends to be more effective in those cases, so I decided to discourage entering keywords and encourage filtering through visual hierarchy.

Group 5.png

My schedule

Oriant offers a convenient calendar function to plan you orientation week. If you prefer to manage events on your system calendar, you can also download the event from the detail page.



Mandatory events are highlighted. Travel and time-overlap warnings make sure you don’t set unrealistic goals for yourself without knowing.


Final User Flows

Browse a category

One tap takes you from the home page to a category filter — this is the best way to find an event and mark it.


Narrow down your search

Filter categories, dates and locations. You can change your filters in your result page too.


Check your schedule

Once you have events marked, tap on “My Schedule” and immediately see the next event. Check the details one last time or use the calendar view to plan your travel.

Group Copy.jpg


Data from schools would be useful.

Since the project was a seven-day design exercise, the design decisions were made based on experiences of my friends and myself. Real data would suggest information such as “how many events do students actually go to during their orientation week?” On the school side, I did my best to design a flexible system to suit different numbers of events and different ways to categorize events, but talking to different schools to understand their needs and challenges could validate some of my assumptions or find out limitations.

Orientation longer than a week?

A large part of my UI, especially the search function and search result page is based on the assumption that orientations take place on a week from Monday to Friday. If a school does orientation longer than a week, the UI in the search result page can implement a sliding interaction to show more dates, while the UI in the search filter page could be changed to a dropdown menu for timeframes longer than eight days.