Panasonic Smart Cities Pitch Work

I led User Experience in pitching for a Smart Cities initiative in Denver. Given only 3 weeks, we wowed the client, proved out the merits of our concept, and ultimately won the work.

Challenge

The challenge was to create a detailed and plausible walkthrough with data visualizations for a web app used to administer a variety of city services, such as lighting and parking.

Conceived for Motion

This design was conceived to use motion to enhance its display of information. 

Here is a sample motion study, showing first the home-to-detail transition, then adjusting of an individual light unit.

Data Visualization Mood Boards

The team and I compiled moodboards with a variety of data visualizations, considering how to create numerically accurate yet stylistically appropriate data visualizations for Denver. 

Mood Boards 2 - 3D Cities

We also decided that if possible, we wanted some aspects of the interface to have a sense of viewing the real city in real time. We found that 3D representations helped build this impression.

Initial Sketches

I sketched detailed visualizations based on carefully researched and realistic sample data, to ensure the design was plausible and could work in the real world.

Wireframes

I then rendered wireframes into digital form, further structuring the screens and providing a guide for numbers so the other designer could concentrate primarily on visuals. 

Rendered Home Screen

I worked closely with the visual designer to skin the wireframes and quickly build a prototype. 

Lighting Main Overview Screen

The client could flow through the interface and see our vision for how a futuristic smart city management system might look.

Here a lighting system is visualized in terms of overall power draw. 

Lighting, Multiple Overlays

Users could overlay multiple layers of information to gain insights on how to improve efficiency or save money.

Lighting - Area Detail

Users could also zoom in to see details of lights in use, by individual lighting unit. Light symbols were designed to indicate their on/off status. Lights needing attention were made prominent so worker attention could be applied to the right places. 

Night Version

Because the day/night cycle was such a critical part of managing lighting, and in order to render city information under realistic conditions, we created a nighttime version of the interface as well. 

This version uses the same colors, but on a dark toned background. 

Lighting - Area Detail, Nighttime Version

For the Nighttime version, note that most lights are now turned on. 

Results

The client loved how easy we made it.

  • Visualizations were very powerful (noted by all three client stakeholders).
  • The client was impressed by so much information incorporated into easily digestible graphics.
  • They were impressed by how we "nailed it" given so little background information and time.
  • The main client stakeholder loved the idea of 'suggested actions', and saw many ways the tech could make that happen.
  • The client loved the modular look and saw it easily scaling to other “pillars” in a smart city.

We initially lost the project to a studio already embedded with the client. 

Soon afterwards, the client returned to us and offered us far more work.

The relationship is ongoing.