User Interface (Mobile)
Animations and Visuals
Winter 2019 — 7 days
Team: Devansh Gandhi
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.
Incoming students that want to discover events during orientation. I considered the University of Washington as a reference for this project.
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.
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)
Keeping these things in mind, I knew what I wanted to achieve through the user interface and decided to move onto the ideation phase.
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.
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:
Searching for events
Viewing event details
Based on these key experiences, I opted for bottom navigation with 5 views:
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:
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.
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.
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:
Organizer and/or sponsor
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.
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.