IBM Smarter Cities

IBM Smarter Cities



A map-based interface for mobile monitoring and troubleshooting of events across multiple city utilities or services.


The design process

Review user and market research

My background as a data and information systems analyst in the public sector gave me special insight into the problem space. Our team worked closely with project stakeholders to understand the user needs and system/resource constraints.

Ideation and sketching

Our team brainstormed ways to use incoming IOT data to intuitively monitor events and information across an entire city and its various departments, utilities, and services. We sketched and whiteboarded data visualizations and interactions.

Working closely with our stakeholders and experts, we narrowed our scope to a set of visualizations and interactions that would comprise the new interface. The primary features are:

  1. Touch-based map interface
  2. Lens metaphor to expose more detail on areas of the map
    • Different lenses reveal different data
    • Lens interactions alter lens contents
    • Lenses are draggable, resizable, and can be fully or partially layered
  3. Docked toolbar on screen edge from which to drag lenses and access records or dashboards


Wires and mocks

Patent drawings

lens hovering over map

Lens overlaid on map shows contextual data


Two non-overlapping lenses hover over map

Two lenses overlaid on map show contextual data


Two overlapping lenses hover over map

Two overlapping lenses overlaid on map show contextual data


fingers are touching display with various size ripples around the touch points

Pressure sensitive feedback indicates current touch pressure.


Fingers on touch screens. The more pressure exerted, the more information is shown.

Pressure can be used to navigate deeper, or expose more data.



figure of lenses with tabs on the edge, and icons on each tab.

Each lens can have tabs, each tab can have icons that control the content of the lens.


Several layered lenses are shown with their tabs arranged in a concentric circuluar pattern so that no tab obscured another.

Lenses can be layered so that tabs are situated in a concentric circle “daisy pattern”, ensuring scalability for complex applications.


Please note the designs below are visual adaptations of my original designs. Some features are not publicly accessible yet, and so I am only showing what IBM has publicly shared. More designs may be released as IBM makes them public.

  1. Interactive lenses expose information about focused areas on a map.

    Adaptation of my designs for Smarter Cities IOC

    copyright IBM


  3. More detail can be accessed via the docked toolbar (e.g., dashboards, records, or related data.)

    Screen with map and a dashboard

    Adaptation of my designs for IBM Smarter Cities. Copyright IBM


    Adaption of my designs for IBM Smarter Cities

    Adaptation of my designs for IBM Smarter Cities. Copyright IBM