Viakoo: Simplifying Technical Complexity

Viakoo provides a Software-as-a-Service (SaaS) monitoring solution for the highly technical and specialized market space of IP video surveillance. Viakoo’s target customers typically work in mobile teams of security managers and technicians.

Viakoo first approached DesignMap with the goal of building a simple, efficient and well-designed mobile app. We teamed up with Viakoo’s development team, led by Chief Product Officer David Nelson-Gal, to research, design and prototype a mobile tool centered on these customers’ needs.

Our work not only included the mobile interface for its service, but also extended to upgrading Viakoo’s web UI to fit the concepts we developed for the smartphone app. Even though the mobile app development would take several months, DesignMap’s work on the web UI revisions and prototype app had the immediate impact of super-charging the company’s sales strategy.

Until the development of its mobile app prototype, Viakoo’s offering, though compelling from a technical standpoint had proven a hard sell. After seeing the product, potential customers walked away with the perception that using Viakoo would require significant training. Once the company’s sales force got the new web UI and mobile prototype in hand, however, they were able turn this perception around. The new web design gave the service a professional, clean look and feel that gave users confidence in the service. However it was the mobile app design that made users see that adopting Viakoo would be easy and convenient.

“When we demo the app that DesignMap created for us, it communicates our core value proposition in a way that really resonates with our target market,” explains Nelson-Gal. “Our sales team began introducing the service with the mobile app and customer hesitations just dissolved.”

Non-Technical Customers Grappling with Technical Complexity Need Great Product Design

Viakoo provides a solution to a very technical problem that isn’t always well understood by its target market, which includes security managers that often have non-technical backgrounds in law enforcement or military service. Before the advent of digital cameras and huge IP networks, video surveillance systems typically used analog cameras that dumped video to VCR tapes via cable. Today, that same video content now travels from high-definition (HD) digital cameras in IP packets over complex networks and is stored on disk farms.

The market for IP video surveillance networks is growing by almost 20 percent a year. Despite their wide use, these IP video networks have an inherent an Achilles heel that impacts their utility: network glitches, hardware failures, configuration mistakes and other technical issues can create gaps in video footage. According to Security Magazine, at any given time up to 30 percent of an IP network video network does not work properly. Viakoo’s solution is designed to operate in this mixed data environment, pinpointing underperforming or failing system components quickly so that security managers can maintain video surveillance recording according to business requirements.

But when potential customers were shown Viakoo’s product in action, they saw a complex and hard to learn system that didn’t match how they thought about their day-to-day work. To bridge the product with users’ real work behaviors, we started the Viakoo project with a deep dive into user needs and work processes. The Viakoo team presented us with six different user personas that we translated to four basic system roles that we then mapped to one another through their workflows.

We mapped user roles to understand how tasks flowed from one team member to another.

A Color System and Iconic Language Cues Users on Ticket States and Status

Our next step was to understand and track all potential states of a trouble ticket as it moved from one team member to another. The ticket is the central concept of Viakoo’s system. When a camera is down or performing under its expected level, for example, the system generates a ticket. Video network administrators (VNAs), such as “Craig” in diagram above, monitor the “Unassigned” ticket queue and “Assign” them to team members. To acknowledge receipt of a ticket, team members “Accept” an assigned ticket and then mark it “Done” when the work is finished. VNAs can then mark a ticket as “Closed” once they or the system validate that the work has been completed successfully.

We diagramed the progress states as a ticket moves through the Viakoo workflow, going from “Assigned” to “Accepted” to “Done” and then “Closed.”

For team members in the “field,” or those that responsible for resolving tickets, the mobile app allows them to keep a comprehensive “assigned ticket list” in their pocket, a concept that Nelson-Gal calls a “huge delighter” for customers. To provide strong visual cues on individual ticket status we designed and then expanded a color-based iconic “ticket status” model.

Viakoo originally includes a rarely used model of ticket priorities that ranged in values of 0 to 5, 5 being the most urgent ticket status. We decided that the model needed a more descriptive set of values that would help user immediately recognize the severity of the problem. Instead of numbers, the new model used words such as “Minor,” “Elevated” and “Critical.” A typical problem, such as a single hard disk failure, would be given the status of “Elevated,” meaning it was an important issue but not one that would need to addressing immediately. A ticket for the more urgent problem of an offline, high-priority camera located at a building entrance, for example, would be set to “Critical” status, requiring immediate attention. An even more urgent issue, such as a server failure, would be given a “Failed” ticket status indicating the maximum level of urgency. We also suggested adding a “Minor” ticket status for information or warnings such the need to upgrade a camera’s firmware. The color scheme used for the tickets was also important for usability. We assigned colors of gray, yellow, orange and red for each ticket status, starting with gray for “Minor” and ending with red for “Failed.”

In an iterative process, we worked with Viakoo to evolve its numeric status model to a descriptive four-state model.

Multi-Layered Architecture with Tickets as the Central Component

Understanding ticket workflow and statuses helped us structure the application’s architecture. We divided the application into component layers starting with the top-level navigation, which includes access to sites, tickets and preference settings. Site and ticket views change based on user access, so that managers see all sites and all tickets while team members responsible for handling tickets see only those sites and tickets for which they are responsible.

The next two layers of the application’s architecture illustrate the complexity of these video surveillance networks with their multiple servers, switches and cameras. The architecture maintains the ticket as a central organizing concept, ensuring that a ticket can be reached from any component level.

A multi-layered architecture maintains access to tickets from all components.

High Quality Product Design Fosters Customer Confidence

We moved on to wireframes and then visual design, which carried on the color language created for ticket status to cue users on the urgency of a situation wherever such indications were needed in the app. To communicate a site’s activity status, a metric that Viakoo calls Heart Beat Freshness (HBR), we created a “pulse” line. For example, a flat, red line represents a site, i.e. a camera or a switch, that has stopped responding.

Before and after: Screens of Viakoo’s web UI before our design revision and the web UI as we designed it.
A before screen for the mobile app as designed the Viakoo team and an after screen as designed by DesignMap. Color provides immediate visual cues on component status for a specific site, as well as overview of that site’s ticket counts and status.

As the before-and-after views show, color provides immediate visual cues for component status at a specific site as well as an overview of that site’s ticket counts and status. Problems are highlighted with yellow to red, with red indicating the most urgent issues. We used grey for components that are okay so that visually they drop into the background.

The end result for Viakoo is a visual design that manages to be both be both a useful application and a marketing tool. The behavior and look of the new design broadcasts quality and reliability. The smartphone app fosters customer confidence that Viakoo is easy and convenient and conveys Viakoo’s value and benefit quickly and clearly. As Nelson-Gal says, DesignMap helped Viakoo hit a huge home run. The new design jump-started sales and validated Nelson-Gal’s internal push to use a professional product design firm.

“My partners were not necessarily convinced about the importance of good design and putting resources into this project was a gamble for us,” he explains. “In the end, DesignMap made Viakoo and the benefits of professional design look extremely good.”