mobRadar UX Design   •   UI Design   •   Branding

Project overview

mobRadar was a startup a bit ahead of its time. Tackling "occupancy detection and reporting" in a variety of establishments such as cafes, restaurants and nightclubs, their app showed how many people were in an establishment in real time.

Google came along a few years later with "Popular Times" on Google Maps that showed occupancy level estimates and forecasts. The startup pivoted from the original concept and came up with a crowd detection and dating app for the young club-going market. The following are design concepts that were produced to sell the concept to investors.

Personas

From the start I focused on the fundamental question: "Who are we designing for?"—which led to the creation of personas. Personas are a great tool for understanding a product's core users, their needs and what they are trying to achieve—they represent user types synthesized from user research.

I created two core types of personas: a pair of personas for the young club-going / dating crowd who would mostly use the mobile app, and another pair of personas for the business customers using a desktop dashboard to monitor foot traffic in their venues.

User personas

User Scenarios and User Stories

Next, I needed to define the user scenarios which are about the situation users are in, and describe what their goals and needs are. User scenarios are a great way to get a sense of the intended user experience. User stories are more specific and describe a person's needs moment-to-moment. Both informed me about how the product should be designed in order to create the best UX.

User scenarios and user stories

Wireframes–Business Side

During the early design process I created a rudimentary wireframe of the business dashboard based on a brief from the product team. The dashboard was designed to be a simple, easy-to-use, comprehensive data analytics tool.

User scenarios and user stories

Customer Side iOS App Mockups

I created mockups for the iOS app. The first one displays the map with a quick indication of occupancy rates and the gender mix at various venues. At the top, users can navigate to a "hotlist" of saved dating prospects as well as friends who can share their locations. Once pinch-zoomed in (second screen) more details appear with gender mix percentages.

Apple Watch Mockups

The company also wanted an Apple Watch app, so people could check occupancy rates for a variety of establishments at a glance. The design needed to be minimalistic and clean so people could read it quickly.

Desktop Product Mockup

The company's vision was to have the product scalable, and accessible on all devices. This meant a desktop website, iPhone and iPad apps, Apple Watch and Android apps.

Product Widget Explorations

The product vision called for various "occupancy indicators," widget designs intended for third-party product integrations, such as establishment websites, apps, and maps. The following are design explorations for different use cases in a variety of contexts.

Widget Integration Mockups

We needed to see and sell how occupancy indicator widgets would appear on third-party product integrations. The first one is a Map app integration, and the second is a Foursquare iPad app integration.

App Icon Design Explorations

Logo Design

What I Learned and Key Takeaways

What I learned from this project is that more than ever, employing proper user research is crucial when embarking on a brand new product design project. It was also fascinating, and interesting to learn how to design widgets that would integrate well into various use cases and screens sizes.

Being able to design the brand with app icons, widget designs and the company logo was also illuminating and very satisfying. I performed extensive user research, wireframing, interaction design, prototyping, user-testing, UX and visual design on this project.

More Projects