The problem statement:
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.
Stakeholder & problem space research
High-fidelity interactive prototyping
I started off by jotting down some initial thoughts when approaching this problem, which helped me plan the appropriate path forward.
My most pressing question:
What advantage does a digitized schedule of events have over a traditional pamphlet of "orientation events?
Stakeholder and problem space research
I wanted to understand what an orientation team is hoping to achieve by hosting events for incoming students. I found a lot of research which basically confirms that students who attend orientation events go on to have academically and socially successful semesters as opposed to those who do not. I've condensed these findings into three goals that fit the project.Time to brainstorm how these objectives might appear as features in the UX!
Overarching Goals for App
Build a strong campus community
Encourage start of social development
Branding of school/traditions throughout experience
Highlight social aspects of events, perhaps with many photos of students
Familiarize students with campus
Utilize an interactive map in the app.
I spoke to several students who had gone to at least one orientation to inquire about their motivations for attending events during orientation week, and I've listed my findings here. You'll see many of them actually align nicely with the goals of the orientation team. I also showed them Stanford's physical pamphlet of events for their orientation as well as a digital interactive map of events that the University of Oregon used in lieu of a paper pamphlet and asked for thoughts on each.
Findings from Students
Social anxiety prevents students from attending the events, unless they know someone who is going
Ability to see if anyone from your program or dorm is going.
Some students want to see only events they are interested in. Others want to be able to explore.
Include an ability to filter by interests, but also include a "just browse" mode.
NO NATIVE APP! Every single student vehemently protested against using a native app for just finding events during an orientation.
Either use a browser-based system or it would need to be part of a larger orientation app
The way information is displayed on the paper pamphlet makes it difficult to see what events are overlapping in time.
Ability to plan schedule in browser and export to Google Calendar
Having the ability to see where the events in an interactive map were occurring was very useful.
Ability to view events in a map
Woohoo, here starts the fun part of getting to integrate all of the features into one cohesive experience. While I was sketching, I performed a bit of market research on the side to see how others were handling these types of problems. After many pages of paper, I figured out a general flow for the user.
And the resulting wireframes and flow...
From a high-level perspective, one thing you might notice is that I include a hamburger menu icon in the top header but never display it in the flow. That's because I was imagining that this is part of a larger orientation app (or website). I imagined the ability to search/browse events as a tiny function within a larger ecosystem of orientation functions which would be accessed via the hamburger menu icon. So as much as possible, I've tried to condense this one function into a single, scrollable page without needing to flip back and forth between too many pages. Now on to some more detailed explanations...
Resulting High-Fidelity Mockups
One of the things preventing users from attending events in their own orientations was social anxiety about not knowing anyone at the events. I propose a design which not only shows events pertinent to user interests, but also indications of how many people in their social bubble are attending to alleviate some of that anxiety. Because I read a study that said that students typically are in a hurry to form friendships in the beginning part of their freshman year, I imagined most of their friendships forming in the dorm halls or with people in their majors. The purpose of the on-boarding screen in this app, then, is to confirm what their dorm is and what their major is. Because this is imagined to be part of a larger University app, the fields are auto-populated and only a confirmation is needed.
You can see how social information is displayed in the event cards on the next screen (shown below). Seeing that people in their program might provide some additional feeling of familiarity to ease the anxiety.
Within each event "card" I've tried to create graphical hierarchy. The most important information being the event name and time, followed by a brief tagline and social statistics. Clicking on these cards will take you to a detail view (seen later)
There is a horizontal bar/header at the top of each screen that shows days of the week. This is the secondary header for the app, and is present for the entire duration of the experience because all of the subsequent pages are specific to whatever day you have selected. Based on user feedback, I wanted to make the "time" aspect the most prominent part of the design/layout, with the "interests" being a secondary filter.
Switching days on the calendar view...
Switching days on the event cards view...
Many interviewees mentioned that the "time" of the events relative to their personal schedules' availability was very important, and that the paper format made it hard to determine if an event fit into their day's schedule. I realized that the benefit of digitizing the orientation schedule of events was that users could now easily compare their digital calendar to the times of the events in one location. So, I broke up the screen into a top half which contained information about one's schedule (including mandatory events during orientation) and events in the bottom half. As the user scrolls up, the "schedule button" fades away but reappears if the user begins to scroll back up.
If an event does not fit within the user's schedule, the card is grayed out.
Some students mentioned that they planned their schedule based not on interests or time availability but rather convenience of proximity. So I implemented a map function that shows the same events as the card/list version, but overlaid onto a map.
Clicking on a marker will bring an overlay with more information. Notice this one provides different slightly information than the overlay accessed through the list view. The export feature is for those who want to export to their existing Google Calendar (or other calendar product).
Finally, I implemented a filtering system by interest. While some students wished they could sort events in a paper pamphlet by interest, others actually preferred being able to browse all of them in one location. So I built an option to either filter by interest or see all of them at once. The user can tap more than one interest and the resulting pages will only show the events that have been tagged to meet that category. As mentioned previously, the filtered events list is day specific per screen.
Ultimately I think I satisfied my most pressing curiosity, which was "what advantage does a digital schedule have over a physical pamphlet?" Besides the whole saving-the-trees thing. :) Thank you!