Explore Campus Events — Design Challenge

Overview

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.

Process

Target User

Incoming students that want to discover events during orientation. I considered the University of Washington as a reference for this project.

Research

Methods:

1. Questionnaire (Paper)

2. Questionnaire (Online)

I started out with some brainstorming to explore the topic of the design exercise and gather my initial thoughts. Before jumping into research, I stepped back and listed all the kinds of information and insights that I would require from the potential users. Specifically, I wanted to understand:

• Students’ experience during UW Orientation (Dawg Daze)

• Challenges faced by students during orientation

• Current apps or services used by students to explore events

• Students’ experience using the existing services or apps

• Details students consider important about events

• How students keep track of upcoming events

• Students’ needs while exploring new events on campus

Based on the information that I wanted to gather, I created a questionnaire using Google Forms to reach out to as many UW students as possible and allowed for anonymous responses within a short time capacity. This was also a soft-launch for my paper-based questionnaire. It allowed me to test if my questions were actually gathering valuable insights.

I floated it around on some UW Facebook Groups and it was filled out by about 50 people within a couple hours. I was seeing some good insights already. I then requested one of my professors if I could pass the same around in DESIGN 166, an introductory design foundation class predominantly taken by freshmen. Since the freshmen class recently went through orientation, I figured it was a good opportunity to carry out some secondary research and gather a variety of insights in a quick manner.

Research Analysis

In just two days, I had responses from over a few hundred students. And while it was a lot of data to work with, I was excited to study the trends and patterns. I decided to create an affinity diagram to study all the data that I had garnered from the questionnaire.

I reviewed each response thoughtfully and established a board full of sticky notes which made it relatively easier to understand the given data. I was now able to identify some solid trends of needs, pain points, challenges, and experiences.

While there were a few trends that helped me validate some of my assumptions, there were a lot of new patterns that I uncovered. To list some of the popular ones at the core:

Challenges faced by students during orientation week:

• Hard to find their way around campus

• Hard to look for people to go with

• Hard to navigate inside buildings

Students’ struggles using current UW services:

• Events are not organized by category

• Having to scroll through hundreds of events

• Being unable to search for events of interest

• Not being able to bookmark events they were interested in

Details about events that student consider important:

• Cost, Admission fee

• Genre (category, RSO involved)

• Recommendations (based on attendance history)

• Date, Time, Location, Directions

• Food availability and options

• Popularity (friends attending, # of people)

• Event history (photos of what to expect)

• Parking availability

Keeping these things in mind, I knew what I wanted to achieve through the user interface and decided to move onto the ideation phase.

Ideation

The needed features, actions and pieces of information were already pretty clear after the phases above, so I could jump straight into a quick sketch to map out the user flow.

After a couple of paper iterations I had the general idea ready, so I switched to Figma, where it was easier to move things around.

Design

Given the time constraint for this exercise, I had to first identify the key experiences of this system. From the research I conducted, I established that I have to design an experience for:

1. Browsing events

2. Searching for events

3. Viewing event details

Based on these key experiences, I opted for bottom navigation with 5 views:

1. Explore

2. Trending

3. Search

4. Bookmarks

5. Profile

Designing the Explore Feed

One of the biggest struggles that students faced during orientation week was having to scroll through an overwhelming number of events on the website. The events are not organized by category and the details don’t provide sufficient information. Additionally, there is little to no visual hierarchy on the website. It only provides an exhaustive list of events in chronological order with infinite scrolling.

To address the pain points above, I designed an explore feed that is personally curated for each user. It features events happening today, nearby events, recommended events (based on past history), and events that are most popular.

The key elements of the explore feed were the event cards. I chose to display them as a carousel which would allow users to glance through various events without causing visual strain.

While designing the event cards, I addressed what students consider as primary information. And this is where the research came in. Based on the survey analysis above, I opted for the cards to feature the following:

• Name

• Venue

• Date

• Time

• Genre

• Photo

• People interested

• Cost, Admission fee

• CTA for bookmarking

Furthermore, I chose to create a design system for the different genres, establishing a sense of color identity and iconography that is unique to each.

Designing Search

The second biggest pain point for students was searching for events. From my survey results, more than 60% of students rated their searching experience as “very hard” while looking for events they were interested in. This led me to design an extensive yet intuitive search experience, making use of the well-established design system of genres.

The search CTA from the explore feed leads the user to an interactive map that features events happening today. Here, a bottom sheet pops up, that consists of quick search CTAs for the different genres. In case the user wishes to manually search for a specific event, they can do so using the search bar in the header.

The interactive map displays “event pins” scattered across the users’ vicinity on campus. Each pin is linked with an event that is happening today and acts as a CTA to bring up a carousel of the same. Additionally, these pins are easily distinguishable using the color identities and iconography that I established earlier.

The quick search CTAs from the bottom sheet lead the user to a results page that only displays events tagged in that specific genre. Here, the events are organized in a chronological order (happening today, happening tomorrow, and happening this week). But at the same time, users can further limit their search to a specific date using the advanced filters option in the header.

Event Details

Finally, the event cards act as CTAs for the event details page. This page displays information that students consider important prior to making the decision of going for an event. In addition to the primary information I listed above, the details page includes information about:

• Friends attending

• Event description

• Organizer and/or sponsor

• Amenities

• Related events

From the results of my survey, it was revealed that over 80% of students use calendar apps to keep track of upcoming events. As a result of this, the event details page also holds an “add to calendar” CTA that prompts a dialogue for the user.

In addition to the “add to calendar” CTA, users also have the ability to get directions and/or purchase event tickets directly from within the app. Since a majority of the students admitted to having struggled to get around campus, I believe this little integration would create the experience more seamless.

Looking Back

As I look back at my design process, I’ve had some key takeaways while working on this exercise:

• Data drives UX: Using data from user research to prioritize needs and identify pain points makes the process of visual design a whole lot simplified.

• Research v/s Design: It’s extremely important to strike a balance between research and actual visual design. Both are equally important when you’re designing for a user.

• Never assume: It’s essential to valid assumptions. The problems you think users might have are not always what they truly experience.