Real-time space management application
Product Designer (Contract)
5 months (May 2018 - Sept 2018)
User Research, Prototyping, UI/UX Design
Sketch, Zeplin, Invision, Figma
Waitz Inc. (now Occuspace.io) is a space management company that focuses on delivering wait times and human congestion information sourced from BLE (bluetooth low energy) technologies. It has won multiple pitch and innovation contests. Primary tasks include: market research, IP research, financial forecasts, and business plan development.
Waitz reports the real-time "busyness" for locations around campus. Waitz sensors are currently live in Geisel, Biomed, Rimac, Main Gym, and PC at the University of California, San Diego, as well as several other UC campuses and universities.
I joined Waitz as their Product Designer in Summer 2018 and designed a variety of digital projects ranging from security heat maps, B2B data dashboards, and responsive multi-platform management system.
My first design task at Waitz was to create a responsive web-interface for the Waitz website to display “This Day Last Quarter.” The web page will be used to show students how busy a Waitz location was on a specific day in the previous Quarter, i.e. Monday of Week 3 in Winter Quarter. From this page, the user should be able to select a desired location and view the data in an intuitive way.
At the prototyping phase, I inherited the visuals from the current Waitz app (left image), which are the blocks of locations and the status of busyness. The busyness bar is especially iconic for the Waitz app and users of Waitz should be able to see the same visual style and information carried over to the web version for visual consistency.
Waitz app UI & web version prototype
An important feature of Waitz is to show the realtime and average busyness on a certain time, day of the week, and of a quarter from the data collected overtime. I took inspiration from the Google popular times for this project since it's recognized by the majority of our users. In the pull-down menus of the main page and the modal, a google popular times-like design is implemented. To detail more information such as fullness percentage and busyness, users can simply click on the specific time bar to learn more.
Google popular times, created by Alex on Dribbble
Check the average busyness and popular times by quarter
The key product of Waitz is the powerful hardware device that utilizes bluetooth technology to accurately report the occupancy data for organizations to optimize space management. For the data to easily translate to the hands of our users, I was tasked to create a compatible software application that shows the historical occupancy data to provide contextual view of how spaces are utilized.
Data dashboard ver.1 (built in InVision)
Data dashboard final ver. (built with React.js)
Data dashboard on mobile (built in Figma)
UCSD expressed interest in occupancy data for security and safety purposes and asked Waitz to build a security heat map application to detect real-time anomalies on campus. This initial heat map will display real-time information, allowing us to discern the value of isolated occupancy data for this use case.
A real-time application that shows occupancy data in installed areas. This can be viewed in a list view, at any level of a location, or on a map. The list view gives the ability to quickly scan, while the map view gives relational data context, meaning a user can see how busy an area is relative to the areas around it. This extends from a top level view of all buildings serviced, to the relative busyness of a particular floor within a building. The heat map will determine and alert users of anomalies through statistical analysis and describe the irregularity. In emergency events, the most recent, or last available data point will be highlighted for the afflicted areas.
Heat map ver. 1 (areas are highlighted in red, orange, yellow, or green depending on how busy they are)
After reviewing the first design with the team, we decided to remove the blurry heat area design as the map may look cluttered and unclear should more locations add onto the list later. To simplify the design and make the heat indicators more clear, I replaced them with arrows with distinct colors pointing directly at the locations.
Security heat map with an expanded view showing location details in a pop-up (full design on InVision)
The final design is a much clearer version of the first one. In addition to the simplified heat indicators, an option to switch between People and Percentage view is available on the top right corner. This feature was added because users reported a hard time understanding how busy the location is by merely looking at the number of people present in this particular location in comparison with the total number of people in the whole area. To save the users from doing mental math, I created the toggle to switch between viewing in Percentage or People, so now the users can see the data as "this location is 80% full" instead of the more complicated headcount numbers.
Waitz is the first start-up environment I had the pleasure to work at. It has given me an incredible amount of project variety and freedom to create as a designer. Being the only official product designer in the team, I was extremely fortunate to be surrounded with open-minded and talented individuals to help me grow as a capable designer who can work in a multi-disciplinary team.
The challenge of designing products for a start-up company is that a lot of times the products may not be actualized due to budget concerns, pushbacks from stakeholders or changes on company goals or values. However, Waitz is a place that I'd place my whole confidence in knowing that they will thrive and grow bigger and closer to their goals each day. My days at Waitz was well-spent and I've gained so much valuable experience and created rewarding projects as a young and new product designer. Thank you, my lovely team at Waitz. See you again at Occuspace.io.