Sep – June 2018
Helping students navigate campus
A case study on Waitz, a mobile cross-platform data visualization app designed by me and used across U.S campuses nationwide.
Timeline
Platform
Mobile
Tools
Sketch
Principle
Photoshop
Overview
UCSD is filled with 30,000 culturally diverse students. Due to this massive student body, areas of interest are often uninhabitable due to overcrowding. This means studying at Geisel Library or exercising at Rimac Gym can be a complete pain or a total waste of time depending on how crowded they are. Waitz alleviates this issue by providing real-time information on various areas of interest around campus, saving students time and frustration.
Though currently undergoing maintenance for the academic summer, Waitz is available on both the AppStore and Google Play store.
Timeline
Sep – June 2018
Platform
Mobile
Tools
Sketch
Principle
Photoshop
Overview
UCSD is filled with 30,000 culturally diverse students. Due to this massive student body, areas of interest are often uninhabitable due to overcrowding. This means studying at Geisel Library or exercising at Rimac Gym can be a complete pain or a total waste of time depending on how crowded they are. Waitz alleviates this issue by providing real-time information on various areas of interest around campus, saving students time and frustration.
Though currently undergoing maintenance for the academic summer, Waitz is available on both the AppStore and Google Play store.
My Role
As the sole Product Designer on the project I led brainstorming sessions to identify and define Waitzâs unique value, business opportunities, and user base. Then, I used user research, UX design, visual design, interaction design, and content strategy to create the right features for the right people.
My Role
As the sole Product Designer on the project I led brainstorming sessions to identify and define Waitzâs unique value, business opportunities, and user base. Then, I used user research, UX design, visual design, interaction design, and content strategy to create the right features for the right people.
The Challenge
Waitz was envisioned to be a data visualization app that would collect accurate, real-time data on areas around campus and convey that information to users in a way that’s intuitive and useful to them. However, UCSD is incredibly diverse, with a student population from all over the world. This means every potential user of Waitz is incredibly unique, and an intuitive way to visualize data for one user may be totally unintuitive to another. Thus data needed to be conveyed in a way that transcends culture and is intuitive to all.
The Challenge
Waitz was envisioned to be a data visualization app that would collect accurate, real-time data on areas around campus and convey that information to users in a way that’s intuitive and useful to them. However, UCSD is incredibly diverse, with a student population from all over the world. This means every potential user of Waitz is incredibly unique, and an intuitive way to visualize data for one user may be totally unintuitive to another. Thus data needed to be conveyed in a way that transcends culture and is intuitive to all.
Initial Goals
I began by outlining some goals for Waitz in order to visualize the product at a high level. I then used these goals to add structure and direction to my brainstorming sessions.
Initial Goals
I began by outlining some goals for Waitz in order to visualize the product at a high level. I then used these goals to add structure and direction to my brainstorming sessions.
Intuitive.
To align with our user’s needs, Waitz needed to be easy to use and incredibly intuitive. The experience should be frictionless, allowing new users to rapidly learn how to navigate Waitz and consume the data it provides, so they can focus on school.
Scalable.
Since Waitz was in its infancy, there was no telling what features we’d add in the future. Thus, it needed to be scalable, making it easy to incorporate new features and elements into the UI while maintaining a slim-to-none learning curve with each update.
Consistent.
We wanted to provide Waitz to any student on campus, regardless of phone they were using. With this in mind, it was imperative that the experience I designed remain identical across mobile platforms. Furthermore, it meant keeping all design considerations as platform agnostic as possible.
Feasible.
The developer I worked with was new to React Native (the language Waitz was coded in) and together with a tight timeline, designs needed to be easily translatable to code to assure that they were implemented correctly and deadlines were met.
Consistent.
We wanted to provide Waitz to any student on campus, regardless of phone they were using. With this in mind, it was imperative that the experience I designed remain identical across mobile platforms. Furthermore, it meant keeping all design considerations as platform agnostic as possible.
Feasible.
The developer I worked with was new to React Native (the language Waitz was coded in) and together with a tight timeline, designs needed to be easily translatable to code to assure that they were implemented correctly and deadlines were met.
User Research
Hired onto the Waitz project only a month before v1.0 was planned to go live, I had little time to conduct research. So, all my research efforts were focused around the two most pressing questions I felt needed answers before beginning my designs. With the target student body at my disposal, I conducted interviews and user tests with 30+ UCSD students.
User Research
Hired onto the Waitz project only a month before v1.0 was planned to go live, I had little time to conduct research. So, all my research efforts were focused around the two most pressing questions I felt needed answers before beginning my designs. With the target student body at my disposal, I conducted interviews and user tests with 30+ UCSD students.
Research Question 1
What is the most intuitive way to visually convey busyness information to a 21-year-old UCSD student?
To implement Waitz successfully all visual displays needs to be intuitive and straight-forward to any UCSD student. Such a feat requires a solid understanding of who our users are and how they think. I first conducted interviews to learn more about their individual backgrounds, thoughts, and perceptions. The notes I took from these conversations were translated into user personas that I would later use to facilitate design decisions. After each interview, I conducted user tests to better understand each subjects intuition when understanding visual displays of busyness.
Research Question 1
What is the most intuitive way to visually convey busyness information to a 21-year-old UCSD student?
To implement Waitz successfully all visual displays needs to be intuitive and straight-forward to any UCSD student. Such a feat requires a solid understanding of who our users are and how they think. I first conducted interviews to learn more about their individual backgrounds, thoughts, and perceptions. The notes I took from these conversations were translated into user personas that I would later use to facilitate design decisions. After each interview, I conducted user tests to better understand each subjects intuition when understanding visual displays of busyness.
Is busyness filling up a room or taking space away?
In one test, subjects were asked which of the 4 lines most strongly resemble being 30% full. This was in hopes of shedding light on our users mental models of what it means for an area to be “busy”. Of the 4, options 1 and 3 were selected more frequently than 2 and 4, with option 3 being most selected overall.
Is busyness filling up a room or taking space away?
In one test, subjects were asked which of the 4 lines most strongly resemble being 30% full. This was in hopes of shedding light on our users mental models of what it means for an area to be “busy”. Of the 4, options 1 and 3 were selected more frequently than 2 and 4, with option 3 being most selected overall.
Simplistic or exhaustive?
In another test, subjects were asked to explain out loud all elements of two visual layouts of Geisel Library floor busyness and then discuss with me what they liked or didn’t like. This was in hopes of determining how intuitive each layout was and how granular information needed to be on the home screen. Results from testing concluded that choice 2, while informative, was unnecessarily complicated and that choice 1 was more appealing do to its balance of clutter and usefulness.
Simplistic or exhaustive?
In another test, subjects were asked to explain out loud all elements of two visual layouts of Geisel Library floor busyness and then discuss with me what they liked or didn’t like. This was in hopes of determining how intuitive each layout was and how granular information needed to be on the home screen. Results from testing concluded that choice 2, while informative, was unnecessarily complicated and that choice 1 was more appealing do to its balance of clutter and usefulness.
Research Question 2
What specifically do students want to know about busyness at the UCSD campus?
Even if my designs meet user intuitions, providing answers to the wrong questions isn’t very useful. Therefore, I needed to find out exactly what questions students sought answers to when deciding whether or not to go to an area of interest on campus. In my interviews, I probed users about how they currently make these decisions in hopes of creating decision flows that would model their daily thought processes, taking into account what locations on campus they’re interested in monitoring and the additional contextual questions they subconsciously ask themselves when making these decisions. It was my hope that the information on these decision flows could be directly incorporated into Waitz.
Research Question 2
What specifically do students want to know about busyness at the UCSD campus?
Even if my designs meet user intuitions, providing answers to the wrong questions isn’t very useful. Therefore, I needed to find out exactly what questions students sought answers to when deciding whether or not to go to an area of interest on campus. In my interviews, I probed users about how they currently make these decisions in hopes of creating decision flows that would model their daily thought processes, taking into account what locations on campus they’re interested in monitoring and the additional contextual questions they subconsciously ask themselves when making these decisions. It was my hope that the information on these decision flows could be directly incorporated into Waitz.
Decision Flow
Below is one of the decision flows I formed from my interviews. The main purpose of this flow was to model the basic structure of decision making UCSD students follow when deciding whether an area of interest is too busy to visit (other decision flows were a little more complicated). The flow begins with 3 distinct categories of areas of interest that students can choose from at the UCSD campus: libraries, food, and gyms. After selecting a category and location, users then ask one question: “Is the location busy?”. If yes, they then ask a follow up contextual question about that specific location whose answer will impact their final decision to visit that location or not.
Decision Flow
Below is one of the decision flows I formed from my interviews. The main purpose of this flow was to model the basic structure of decision making UCSD students follow when deciding whether an area of interest is too busy to visit (other decision flows were a little more complicated). The flow begins with 3 distinct categories of areas of interest that students can choose from at the UCSD campus: libraries, food, and gyms. After selecting a category and location, users then ask one question: “Is the location busy?”. If yes, they then ask a follow up contextual question about that specific location whose answer will impact their final decision to visit that location or not.
Key Insights
Research showed that most users tended to share a similar mental model about the idea of busyness, where an area is “filled up” as it gets busier. Therefore, the visuals that started at 0% and filled up as opposed to starting at 100% and drained were often found to be more intuitive. Next, users tended to understand visuals more quickly and easily when color was used as a supplement to convey how busy an area is. Lastly, the question users found most valuable was simply whether an area was busy or not, with contextual questions being of secondary importance. However, many noted that these contextual questions are still very useful when making decisions especially when busyness information is scarce.
Key Insights
Research showed that most users tended to share a similar mental model about the idea of busyness, where an area is “filled up” as it gets busier. Therefore, the visuals that started at 0% and filled up as opposed to starting at 100% and drained were often found to be more intuitive. Next, users tended to understand visuals more quickly and easily when color was used as a supplement to convey how busy an area is. Lastly, the question users found most valuable was simply whether an area was busy or not, with contextual questions being of secondary importance. However, many noted that these contextual questions are still very useful when making decisions especially when busyness information is scarce.
Refocused UX Goals
My insights from research changed my views on colors purpose as well as how I’d design interactions within Waitz. These, together with the aforementioned initial goals would become the design guidelines that would direct my upcoming wireframes and prototypes.
Refocused UX Goals
My insights from research changed my views on colors purpose as well as how I’d design interactions within Waitz. These, together with the aforementioned initial goals would become the design guidelines that would direct my upcoming wireframes and prototypes.
Color, only when necessary.
Rather than using color for visual appeal, its role in Waitz will be much more important. Instead, colors will be used sparingly, with its core purpose to facilitate the understanding and consumption of busyness data.
Color, only when necessary.
Rather than using color for visual appeal, its role in Waitz will be much more important. Instead, colors will be used sparingly, with its core purpose to facilitate the understanding and consumption of busyness data.
Taps minimized, answers maximized.
Most UCSD students simply want to know if an area of interest is busy. Waitz will answer this question from the get-go without the need for user interaction, with more granular information hidden behind a single tap.
Taps minimized, answers maximized.
Most UCSD students simply want to know if an area of interest is busy. Waitz will answer this question from the get-go without the need for user interaction, with more granular information hidden behind a single tap.
Design
With preliminary research done and UX goals outlined, I began designing Waitz. First, I used wireframes to create a skeletal layout for Waitz, keeping in mind that it needed to be both scalable and intuitive. Then, I used prototypes to design the interaction that focused on immediate access to overall busyness of an area with more granular information located behind a single tap.
Design
With preliminary research done and UX goals outlined, I began designing Waitz. First, I used wireframes to create a skeletal layout for Waitz, keeping in mind that it needed to be both scalable and intuitive. Then, I used prototypes to design the interaction that focused on immediate access to overall busyness of an area with more granular information located behind a single tap.
Wireframes
I began wireframes with a pen and paper, quickly sketching out ideas that fulfilled all the criteria I outlined. Fast forward past hundreds of different iterations, I concluded that a Material-design-inspired card-based layout was the answer, where every location was its own individual card. Locations were vertically ordered on the page and as new locations were added, new cards were added to the bottom of the page – simple, scalable, and intuitive.
Wireframes
I began wireframes with a pen and paper, quickly sketching out ideas that fulfilled all the criteria I outlined. Fast forward past hundreds of different iterations, I concluded that a Material-design-inspired card-based layout was the answer, where every location was its own individual card. Locations were vertically ordered on the page and as new locations were added, new cards were added to the bottom of the page – simple, scalable, and intuitive.
Two final low-fidelity iterations of the card-based layout, labeled version 1 and version 2.
Higher-fidelity versions of the two final layouts, where I iterated further on the information architecture of each card.
Two final low-fidelity iterations of the card-based layout, labeled version 1 and version 2.
Higher-fidelity versions of the two final layouts, where I iterated further on the information architecture of each card.
Then, I needed to determine which of the layouts would be best suited for all the information I wished to include on each card. After a few more iterations and some light user testing, I concluded that version 1 would be best to proceed with as it could contain all the information I wanted to display with room for additional information in the future. Though version 2 allowed me to fit more locations above the fold, it didn’t provide much space for contextual information without the need for user interaction.
Then, I needed to determine which of the layouts would be best suited for all the information I wished to include on each card. After a few more iterations and some light user testing, I concluded that version 1 would be best to proceed with as it could contain all the information I wanted to display with room for additional information in the future. Though version 2 allowed me to fit more locations above the fold, it didn’t provide much space for contextual information without the need for user interaction.
Final Low-Fidelity Version 1
A digital remake of v1 to iterate on information architecture faster.
Final Single Floor Layout
One of two final iterations displaying overall busyness of a single-floor location with research-backed contextual info.
Final Low-Fidelity Version 1
A digital remake of v1 to iterate on information architecture faster.
Final Single Floor Layout
One of two final iterations displaying overall busyness of a single-floor location with research-backed contextual info.
Prototypes
After sorting out the skeletal layout of the app, I needed to figure out how Waitz could answer the fundamental question of busyness while keeping more granular information only a single tap away. Thus, I used prototyping to iterate on potential interactions that meet these requirements.
Prototypes
After sorting out the skeletal layout of the app, I needed to figure out how Waitz could answer the fundamental question of busyness while keeping more granular information only a single tap away. Thus, I used prototyping to iterate on potential interactions that meet these requirements.
Specific Floor Interaction Prototype
The final paper prototype used in light user testing to test the intuition of the individual floor interaction.
Specific Floor Interaction Prototype
Users select a colored square to see more granular information on a location. Most users understood the interaction or picked it up quite quickly with some light exploration.
Specific Floor Interaction Prototype
The final paper prototype used in light user testing to test the intuition of the individual floor interaction.
Specific Floor Interaction Prototype
Users select a colored square to see more granular information on a location. Most users understood the interaction or picked it up quite quickly with some light exploration.
After many iterations, I concluded that the best way to answer the question of busyness without interaction was to use color. Thus, I represented each floor as a colored square. The color of the square signifies it’s busyness, with green representing least busy, orange signifying moderately busy, and red warning very busy. For more granular information, a user taps any of the colored squares which activates a pop-up containing more information on that specific floor.
Comparison Interaction Prototype
The final paper prototype used in light user testing to test the intuition of the comparison interaction.
Comparison Interaction Prototype
Users can expand cards to see busyness information across all areas of a location. This allows them to easily compare busyness and make decisions.
Comparison Interaction Prototype
The final paper prototype used in light user testing to test the intuition of the comparison interaction.
Comparison Interaction Prototype
Users can expand cards to see busyness information across all areas of a location. This allows them to easily compare busyness and make decisions.
I then iterated on a second interaction that would allow users to compare the information of multiple floors. Instead of seeing the specific information of one floor, a user can expand the location card to see the same type of information for multiple floors, allowing them to compare busyness percentages and number of people. Once done, the user can collapse the card back to its original state.
Specific Floor Interaction
Uninteracted state of the final version, where colored squares are used to represent busyness.
Specific Floor Interaction
Interacted state of the final version, where a user has tapped a square revealing a pop-up containing more granular information.
Specific Floor Interaction
Uninteracted state of the final version, where colored squares are used to represent busyness.
Specific Floor Interaction
Interacted state of the final version, where a user has tapped a square revealing a pop-up containing more granular information.
Comparison Interaction
Uninteracted state of the final version, where a grey down-arrow represents a cards ability to expand.
Comparison Interaction
Interacted state of the final version, where a user has tapped the grey down-arrow revealing all floors busyness data.
Comparison Interaction
Uninteracted state of the final version, where a grey down-arrow represents a cards ability to expand.
Comparison Interaction
Interacted state of the final version, where a user has tapped the grey down-arrow revealing all floors busyness data.
My Learnings
Designing for Waitz provided me valuable experience that came with shipping a product from concept to implementation. In school, my coursework focused more on conceptual design techniques, and less on design’s role within an organization and how it impacts business. Waitz, on the other hand, showed me real-world application, teaching me how to identify a product’s unique value proposition and it’s associated business opportunities. Then, designing experiences became even more thrilling, findings unique ways to bridge the gap between a product’s purpose user’s needs with it’s business goals.
Furthermore, I began to understand more deeply the value behind different disciplines and how they contribute to a products success. For example, before designing v1.0 the team agreed that similar to Airbnb, gaining the trust of our users is vital. Â We only had one opportunity to make a great first impression and thus Waitz needed to be accurate and credible on launch. This feat required the expertise of everyone on the team: our data scientist to create algorithms that accurately measure busyness for each location, the designer to design an experience that met intuitions and assures users of data reliability, the software engineer to precisely translate designs to code, and the marketing team to inform our users of Waitz’s unique value.
My Learnings
Designing for Waitz provided me valuable experience that came with shipping a product from concept to implementation. In school, my coursework focused more on conceptual design techniques, and less on design’s role within an organization and how it impacts business. Waitz, on the other hand, showed me real-world application, teaching me how to identify a product’s unique value proposition and it’s associated business opportunities. Then, designing experiences became even more thrilling, findings unique ways to bridge the gap between a product’s purpose user’s needs with it’s business goals.
Furthermore, I began to understand more deeply the value behind different disciplines and how they contribute to a products success. For example, before designing v1.0 the team agreed that similar to Airbnb, gaining the trust of our users is vital. Â We only had one opportunity to make a great first impression and thus Waitz needed to be accurate and credible on launch. This feat required the expertise of everyone on the team: our data scientist to create algorithms that accurately measure busyness for each location, the designer to design an experience that met intuitions and assures users of data reliability, the software engineer to precisely translate designs to code, and the marketing team to inform our users of Waitz’s unique value.
Waitz’s success, quantified.
Waitz’s success, quantified.
25%
of UCSD downloaded Waitz
$2.5m
estimated valuation
1.5k
weekly active users
25%
of UCSD downloaded Waitz
$2.5m
estimated valuation
1.5k
weekly active users
Proof of Concept