From Zero to Hero

Screenshots of cisco glance

From Zero to Hero

The journey to make a simple idea to live

GLANCE is a cross platform web application to display device locations and movements on indoor maps in real time by using Cisco CMX or Meraki technology. The app was a great success in terms of product design and efficient development method. I was the lead designer of this product and responsible for all design efforts from product planning to interaction and visual design. As a compact and dynamic team with an experience driven development mode, we pushed the boundary and delivered a functional product from a simple idea. Here is brief overlook into the product design process.

cisco live meet the expert site

The Call for Help

Meet The Expert was an event in every year’s Cisco Live conference. The program is to connect costumers to Experts of Cisco’s technology by arranging on-site 1:1 meetings. Due to the large numbers of experts (up to hundreds) on-site during the conference, the event team has a problem locating experts’ identities and location in the fast-paced environment, so they want some help for a solution to help them locate experts.

The Kick-Start

Every project that I have worked on always starts with an idea brainstorm section. In this section, the project team just simply talk with the client or partners. As the product designer, I always ask a lot of questions to understand their pain points, working flows, functioning styles etc. It is important to care about client’s desire as well as the end users.

I will begin to quickly generates broad ideas, and collect instant feedbacks from both the product team and client team. Once there are enough info, I started to work out a few user scenarios. At this stage, it was vital to communicate closely with the team to understand technical constraints, in doing this, I would know what kinds of solutions were feasible in the product scope and timeframe.

a sketch of user scenario

Define User Scenario

Worked with the team to define how the app is going to be used in a real-life environment. Define different user roles (Expert, Event staff, Visitor), and work out what were their user flow with the app.

Define Product Scope

According to the user scenario, worked with the team to decide what screens or devices are needed for this app. For Meet The Expert event, the product was decided to be used on mobile phone (for expert registration), iPad (for staff to locate experts on-site) and big screen ( for visitor & Staff to view floor plan and experts’ position).

search flow of GLANCE
An example of the search flow with visual treatment

Define Action Flows

Break user scenario into action flows, Such as Expert registration on mobile phone flow, Staff locate expert in the big screen, Staff locate expert in iPad, Visitor finds expert in the big screen etc.

Interaction design approaches
An example of interaction design approaches of showing experts on the map

Interaction Design

Design for each action flow. Use sketches, wireframes and low-fi prototype to communicate the designs with product teams and clients. Collect feedbacks and iterate designs.

Visual design process
An example of visual design progress of main interface

Visual Design

Design for each action flow. Use sketches, wireframes and low-fi prototype to communicate the designs with product teams and clients. Collect feedbacks and iterate designs.

User testing
Designs were regularly went under user-testing

User Testing

Perform user tests for iteration of the functional product, collected user feedbacks and analysed the result. The challenge here was to managed the test version as closed to the final product as possible, that way the test result would be more valuable.

Review Meetings

During the design process, I encountered many challenges. Typically, I will try a few different approaches to solve the problem. I would host design review meetings and present my designs to the product team in a low fatality mock-ups or prototypes to share my solution and collect feedbacks specially technical feedbacks. After that, I will repeat this process with refined designs until a mature solution has been reached.

The product design cycle was an on-going loop, the agile development method allowed changes and updates to be implemented right to the night before the release.

image of glance at cisco gsx
GLANCE was promoted by Head of Cisco Engineering in 2015 Cisco GSX

The Result

From a simple idea to a fully functional app, Glance was released on the 2015 Cisco Live-Santiago Meet The Expert zone. It worked well and received many positive feedbacks, more surprisingly, the design and experience of Glance had made visitors who without technical background to understand Cisco’s technology better. That response had prompted the senior management to expand the product scope from an one-time only event solution to stand alone cloud-based application.

More functions were added to the app. Things such as multi-floor display, 3D map display, location-based notification etc, these features (some of them have been patented) enable GLANCE to become a cloud-based platform for people and assets management in a indoor environment.

→ Explore Design of GLANCE