Google Design Exercise 2019
Helping Incoming Freshman Navigate Orientation Offerings
Roles: UX/UI Designer
Tools: Human-centered design process, User testing, Adobe Illustrator, Adobe Xd
Key Learning Opportunities: Designing an app experience with limited timeframe
Challenge 2: 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.
Above you see the walkthrough of the final prototype I arrived at, but let’s dive into the juicy part - the process - and see where each of my design decisions came from.
I immediately started sketching to think about which information would be most relevant and how users would want that information presented. In other words, I started making assumptions that would need to be tested.
I noticed that the prompt didn’t include a category for academic or mandatory events. This seemed strange to me, because one of the main reasons students attend orientation is to build their course schedules. I added a category for mandatory events that would include things like academic advising, welcome dinners, and pep rallies. Then I grouped the music and visual arts categories into a new “arts & media” category because they seemed to make sense together, and too many event options seemed too overwhelming.
Next, I developed a task list for the next week that looked like this:
Design lo-fi prototype
Test + refine (round 1)
Test + refine (round 2)
Final hi-fi prototype
The first part of the research phase included desktop research on existing orientation apps. I also looked at common UI patterns for calendar apps. See a few relevant examples below.
Next, I sent a survey about freshman orientation experiences through several social media platforms. I received 13 responses from college students and recent graduates from 4 different universities. 38.5% of the participants are freshman. Several students left quotes that drove the next phase of my process.
“I felt so aware [of orientation activities] that it was overwhelming.”
- freshman, Sonoma State University
“I have social anxiety and my school has mandatory orientation, so my time was just an overwhelming nightmare.”
- freshman, Sonoma State University
“I spent the majority of the time planning my schedule because I was nervous about getting the classes I wanted. I felt like I didn’t have a lot of time for social events because I was focused on the academic/planning side of things.”
- freshman, University of Texas
Even though I collected limited results due to the quick nature of the research phase, I gained valuable insights which I translated into tangible goals for my prototype.
Observation #1: 61.5% of responding students felt well-aware of all activities taking place during orientation. Freshman seem well-aware of available events, but might choose not to attend them because they feel overwhelmed.
Insight: Going to orientation is a very overwhelming experience for freshman, so it’s important not to further overwhelm them.
Prototype Goal: Focus on the simplicity of the interface so that already-overwhelmed freshmen can zero-in on events that interest them.
Observation #2: Eleven students identified “being nervous about making friends” as the biggest obstacle when deciding whether to attend an orientation event. The second most-selected obstacle was: “not sure if the activity was worth my time.”
Insight: Students want reassurance that voluntary activities are worthwhile during a jam-packed orientation, and that there is a reasonable chance of making friends in a comfortable environment.
Prototype Goal: Allow students to see how many of their peers are attending each event so they are empowered to decide which activities fit their expectation/preference.
design lo-fi prototype
Tasks for the low-fidelity prototype included design decisions relating to the interfaces, colors, fonts, information architecture, visual system, navigation system, and tone. I decided to assign colors to each event type. At this point, I also planned on assigning icons to each type - a decision that I would later rethink.
It seemed important to provide users a place to browse all events, but also to view a personalized schedule with events they expressed interest in.
After decided on a basic user flow using low-fidelity mockups, I refined the visual design. The result was a bold, candy-colored tessellation with event titles that resembled sticky notes.
Above: My first, lowest fidelity prototype. This was not tested, but refined to create the version below.
Above: The prototype I took my first user tester (I would call this one mid-fidelity).
test + refine (round 1)
The biggest issue my user tester had with my prototype was the color scheme. She found it overwhelming, which directly contradicted my first prototype goal. While she felt comfortable with the flow of the interfaces and was easily able to complete the tasks of browsing, searching, and viewing event details, she wanted colors that were easier on the eye. Together, we co-created a new color palette. After cleaning up the design with the new color scheme, finalizing the amount of screens to create and how they would work together, I took my prototype to another user tester.
Above: A sketch of an example user flow, and the next iteration of my mid-fidelity prototype. This one featured a more muted, academic color scheme.
test + refine (round 2)
The second user-tester thought the color scheme looked too boring and stuffy. He also didn’t realize each color depicted a different type of event. This is when I realized that each event tile needed a label to make it very clear what the colors represented. At this point, I was still planning to associate an icon with each event category, but I decided to take a more straightforward approach with the labels. I also realized that the brightness of the original color scheme didn’t make the first design overwhelming - the lack of white space did. I also decided to make the schedule screen mimic the same interface as the browse screen to avoid confusion. Then I also refined the search, filter, and sort functions based on feedback. Ideally, I would have taken my final prototype back to the user-testers, but in the interest of time, I had to make informed decisions and move on.
final hi-fi prototype
After following my task list with equal parts diligence and flexibility, I arrived at my final prototype.
In a perfect world, I would have had more time to test and refine my design. Even now I see areas for improvement and ways to elevate my design, but given the conditions, I gave my best effort at designing an experience that communicates clearly and is rooted in a human-centered process. This exercise was a lot of fun for me, and throughout the week I found myself itching to work on it more than the other items on my to-do list. There was a great challenge in organizing the information and creating a visual system that is easy for users to navigate. I feel confident that this exercise reflects my mindset when solving any problem; I am process- and research-driven, value choices informed by real insights, and able to expedite designs when necessary by strategic decision-making. I am happy to receive feedback and answer questions about my exercise, and looking forward to the next steps in the interview process.