Untitled-19-01-01.png

[d] Orientation App

Google Design Challenge

 
 

This project designs an experience that could facilitate the orientation process by bringing students a maximum amount of guidance and emotional supports while requiring a minimum amount of difficulty/anxiety.

 
 
 

Project

Internship application work

Tools

Sketch, InVision, Illustrator

Keywords

uiux, research, experience design, interaction, animation, wireframe, user flow, persona, competitive analysis, style guide


Google design Challenge Brief

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.


The problem

Imagine you are back to your first day at your college. The school orientation guide has opened the door for you to endless amount of information, guidance, advices and events; however, the anxiety and the exhaustion of coming to a new place could be catalytic by the overwhelming amount of information.

the objective

How to design an experience that could facilitate the orientation process by bringing students a maximum amount of guidance and emotional supports while requiring a minimum amount of difficulty/anxiety.


i. Research

I.01. understand orientations

According to James P. Havelka and Lipham & Hoeh, the goal of a student orientation is defined in two parts. In order to bring the students a successful orientation, it must meet those two goals below.

 
 

1.It brings the students into the administrative program of the school

This includes enrollment, registration, assignment, etc.

2. It involves bringing the students into guidance programs that “increase the student’s feelings of satisfaction, belongingness, identification and achievement in both present and projected life situations.”

This includes different types of events such as sports, music, visual arts, social groups, and volunteering events.

I.02 Existing condition

Screen Shot 2019-01-21 at 11.01.30 PM.png
Screen Shot 2019-01-21 at 9.31.52 PM.png

Harvard and Yale class 2022’s orientation guide

Currently, many schools still use conventional medium for orientation information: books, pamphlet, posters, word of mouth, etc.

The information is organized by dates and time, and there is barely any information hierarchy to help the students to differentiate what events they should attend. Many events have time conflicts, which creates more confusion.

Current condition’s problem lies in the disjunction between the students and the events.

I.03 Identify the Problems

In order to acquire first-hand information, I have conducted an online survey to examine the real experience of school orientations from students, and to identify their needs. This survey has four major sectors and each responds to a key question related to the experience of an orientation.

Including myself, there are 30 people in total have answered the questions. This survey might have its limitation since many of them attended to the same schools (UCLA, Harvard, Yale, Cornell, and Columbia). For the “other” option, they were asked to provide an answer.

From the survey we can see many students care about getting the necessary steps done, such as check-ins, and they also prioritize finding what interests them and socialization. Ironically, many reflect that they have encountered difficulties in finding what is interesting because of the overwhelming amount of information. Time coordination is also problematic, considering many students were unfamiliar with the school and thus it was difficult for them to walk to the destination in time. Eventually after a day, more students express the feeling of exhaustion and anxiety than excitement and inspired.

To synthesize the problems, I used affinity diagramming to categorize and prioritize the data of problems and challenges during an orientation.

Screen Shot 2019-01-22 at 12.54.08 AM.png

I.04 persona

From user research, I synthesized two types of personas that could reflect the identity and characteristic of potential users. Their needs and goals vary depending on their goals. Sofia wants to maximize her exposure to events that would benefit her future career while Jae wants to socialize and explore.

I.05 Related products

Instead of researching apps or platforms for orientation, I found analyzing products that fall in the realm of task management, calendar, maps, events is productive and different. I looked at apps such as Google calendar (calendar), Eventbrite (event), SnapMap (near me), Asana (task management), Uber (map), and Postmates (map) to find elements that could be beneficial to integrate under the current context.


II. IDEATION

II.01 bASIC USER JOURNEY

After the research phase, I have gained a basic understanding on what’s the problem. I decided to map out a basic user journey map where shows the workflow of a student during the orientation phase. In addition, by mapping out each phases, I could have an insight on how does the students feeling change during each phase, and what could be the opportunities for improvements.

II.02 SOLUTION IDEATION

With all the insights from the previous research, I found that some of the solutions are starting to surface. Those solutions needs to satisfy the three needs of a student without the abundance of unnecessary information.

Screen Shot 2019-01-22 at 10.48.35 AM.png

For information needs,

  • The list of events shall be displayed chronologically, using color to differentiate different types of events. Categories of different events can also be easily accessed.

  • The location information would be provided for each event, reducing the potential of students missing the events due to their unfamiliarity to the school.

  • The design shall provide a RSVP system where the students could reserve a spot for an event without physically going there, also where the administrator could monitor the attendance of events.

For personal adjustment needs,

  • Students shall have the access to functions such as customizable calendar where they could add and remove events at ease.

  • A preference setting could help the student to filter events and provide a personalized experience.

  • Using the integration of API or the automatic collection of student data, the app shall provide each students tailored information that are related to their background, major, and interests. Personalized AI could also sync with real time user data such as geographical location.

For emotional needs,

  • Students shall have some basic social functions that can not only provide information on events popularity/location/relevance, but also allow them to connect with new friends within the context. A unique messaging system could increase the engagement for students and the communication of information.

  • Students shall have the ability to give feedbacks to the events, which also helps the administrators to monitor the effectiveness of each event.


II.03 Goals

To summarize, the goal is to design an experience that could facilitate the orientation process by bringing students a maximum amount of guidance and emotional supports while requiring a minimum amount of difficulty/anxiety.

Screen Shot 2019-01-22 at 11.46.44 AM.png

IIi. DESIGN DEVELOPMENT

III.01 Information architecture

The information architecture page shows the overall flow of page navigation. The experience starts with a welcome screen. The user could register with an existing school system that could import student data to the platform, then the user could manually adjust the data.

The main screen is the calendar screen where required events are pinned in the schedule. Swipe left will trigger the map view, which would be handy for students who are unfamiliar with the school. Swipe right will retrieve a list of functions including settings, chat, and feedbacks.

The floating action button is a Call for Attention button which is an element that is easy to notice. By clicking it, the action would trigger the expansion of the list of buttons, including event page, reminders, and liked events.

III.02 user journey

Using the new system, the students, the information, and the administrator became a closed feedback loop. Compare with the current pamphlet or book system, information will be tailored for each individual. The end feedback gives the administrator the opportunity to review what was successful and what needs to be refined.


Iv. PROTOTYPING & USER TEST

Paper test for testing the interaction flow


v. DELIVERY

V.01 Sign up and login process

Screen Shot 2019-01-23 at 1.38.02 AM.png

The sign up and login screen uses a standardized layout which incorporates the main logo and two interactive buttons. This not only creates a sense of belonging for the students but also simplifies the initial information exposure. 

Although registration is not necessary for accessing orientation resources, yet the students desire for synthesized information that are relevant and personalized. Thus, the user could connect his or hers school account and the API could help the platform to retrieve student data for the personalization process (of course, the process will protect students’ privacy). Afterwards, the user could choose to refine the answer or proceed to the main page. 

If the student chooses to skip the registration process, one can still register later via the setting page. 

V.02 Calendar / mAP / sETTINGS

Screen Shot 2019-01-23 at 1.05.50 AM.png

I have chosen the calendar function as the main screen, considering orientation events are time sensitive and students needs to come back to the schedule frequently to review what’s the next on the calendar. Students could obtain information the quickest: not only one could review what events are interesting and booked, but also one could access the map and other information easily.

In addition to the calendar, the map and the setting menu are also the crucial features. Before this final layout, I have considered using the conventional bottom bar/button layout. By designating calendar, map, and setting to three different buttons, it creates an illusional barrier between the three. The button-clicking action implicitly informs the users that the three functions require three entry points, and thus they are completely separated. This is not what a user would desire, because only when the three are fully integrated, the user experience of events-planning and navigating could be streamlined. 

To improve this, I have arrived at the decision which incorporates the three pages using a swiping motion. When one swipe right or left, the action would trigger a side penal to appear. The user could control the panel while still seeing a small portion of the calendar that is not covered. This presentation is distinct from the bottom navigation bar, because the users essentially have not left the main page.

The Calendar

Referring to the Google Calendar design, the calendar screen organizes the events chronologically. One could review “today”’s events from morning to night. School administrators would pin the required events on the calendar, which reduces the possibility of students missing important events. Different types of events would display in its categories’ corresponding color, so that the color could help the user to differentiate the hierarchy of information. The user could click in an event to see the detail and remove it from the calendar. 

Screen Shot 2019-01-23 at 3.10.54 AM.png
Screen Shot 2019-01-23 at 3.12.14 AM.png

The Map

Many students face the difficulty of navigating through the school that they are not yet familiar with, and this is when the map function come into the play. The map panel could integrate the Google Map, which retrieves users’ live GPS data and the calendar events in order to map out a route that connects all the destinations. The bottom of the screen shows the location address and the time of the next calendar event. By reviewing the map, the user could have a clear picture of where the person is and where one needs to go.

Screen Shot 2019-01-23 at 1.10.16 AM.png

The Settings

In the settings panel, one can change the calendar view between 1-day view and 3-day view. Additional, it is where the chatting function, setting screen, feedback screen, search, and help located at. 


Chat 

Orientation is a phase when students make new friends efficiently. In order to encourage socialization and reflect the user demand in the survey, a chat function is added. Instead of aiming it to be exactly like iMessage or WhatsApp, the design of the chat function focuses on interest groups and location share. Imagine you made some new friends during the previous event, and now you are seeking for event-attending advice from them. Chat would remove the additional action of going out of the app and provide you a platform to meet people who share the same interests. The “add” button allows one to add friends, and to search for interest groups to join in. Additionally, the user could share locations with friends and understand what events are popular at the moment. 


Feedback 

Last but not least is the feedback section. The page is organized in a similar manner as the event page, where attended events are organized chronologically. A user could click into an event to provide feedbacks. 

V.03 eVENTS

Screen Shot 2019-01-23 at 2.58.19 AM.png

Event Listing

The event page displays non-required events for the users. The top filter bar allows the users to get a more tailored list by adjusting the range of event types (sports, music, visual arts, social, and volunteer events), event requirement level (recommended events and regular events), and RSVP events (events that limit the number of attendee). These filters are not conflicting with the registration process, which already removed events that are not relevant to the specific user, and pushed the user-relevant events to the recommended category. This page is chronologically ordered by default, and the user could add or like the events using the listing button instead of the necessity of clicking into the listing. 

Screen Shot 2019-01-23 at 2.58.29 AM.png

Event Page

Each event listing includes all possible info without information overload. Chosen and submitted by the administrator or the organizer, the top of the page contains an image represent the feature of the event.

The page highlights the type of event, time, location, recommending level which are the elemental information that the students care about. Users often make decisions based on their schedule and the relevance to their interests, and those metadata could offer the needed information at one glance. A “like” button and an “add” button are also conveniently located on the top of the page, so the users could put the event on their list after judging the initial information. The “add” button would trigger a simple animation to indicate that the event has been added to the user’s calendar. Compare with opening up a new state and adding the event manually, this button makes the process incredibly seamless and stress-free. 

Going into the content, the lower page displays event detail, location map, organizer, and contact info. By giving the users the accurate location, they could have a better understand on whether they could make it to the event on time. A special feature is student testimony, where current and past feedback would be included. When an event is highly promoted by students, it would be pushed to users “recommended events” section.

Screen Shot 2019-01-23 at 2.58.39 AM.png

Special Events

Some of the school orientation events require different UIUX treatment.

  • Events with flexible time range would require the user to select a time frame when one adds the event to the calendar.

  • Events with repeating schedule would push a notification to let the user know that the event would occur repeatedly.

  • Events that has limitation on the number of attendee would require RSVP, which will show up as a new dialogue. 

Screen Shot 2019-01-23 at 2.58.45 AM.png
Screen Shot 2019-01-23 at 3.13.19 AM.png

Thanks for Watching!