PROJECT SUMMARY

Goal :Web app redesign to improve the usability and friendliness of the app’s UI and navigation flows to enable Production Engineers to monitor service level dependencies and diagnose issues affecting the health of the infrastructure.

Company: Social Networking, Infrastructure

Deliverables: Discovery, Gap Analysis, User Research, Technical Research, UI Redesign, Interaction Design, Interactive Prototypes, Software Development

CHALLENGES

  • Production Engineers couldn’t use the app to diagnose issues affecting the health of infrastructure because navigation and actions were hot keys based
  • They described the app as ambiguous, unfriendly, and non-intuitive, which made the app unusable

SOLUTIONS

  • Improve the usability and friendliness of the User Interface so that Production Engineers can use the app to diagnose production issues
  • Add new navigation elements and interaction features to enable users to use the application

PROJECT DETAILS

About the app

This app is a comprehensive set of graphs displaying service level dependencies that help Production Engineers with diagnosing issues affecting the health of services across the infrastructure stack.

The graphs are a visual representation of live data that indicates where the problems are and what is the error rate for each service. It directs users’ attention to the interesting parts and the data that needs to be analyzed.

Users can define their own maps for services they want to inspect, and the app displays a visual graph of the health of that service and its dependencies, which can be further inspected with supporting graphs and error rate information.

Challenges

These were some of the issues discovered during evaluation:

  • Landing page (after selecting a map) had no indication what users can do on the page – no links, no input fields, no buttons, no clickable areas when moving the mouse around
  • Navigation between the different modes (View, Edit, Add, Delete) was obscured. There were no buttons or links and there was no indication of which mode the user is in after a particular operation
  • Navigation and operation were hot keys-based (keyboard shortcuts) and required users to know which keys to press (‘e’ for editing, esc to go back to viewing, click-n-drag for adding a node, etc.)
  • Other issues with interpreting error rate, map’s privacy status, and application flows

Solutions

To improve the usability and friendliness of the app’s UI and navigation flows, I made the following changes:

  • Add a navigation button group to each page indicating which mode the user is currently in, and which other modes are available
  • Add other UI cues such as radio buttons and other operation buttons throughout the app
  • Improve the flow for creating maps, adding nodes, and deleting maps
  • Add a D3 color scale legend to indicate error rate of colors displayed by the app

My Role and Design Process

  • Sole designer in a team of two Data Engineers and a Technical Program Manager
  • Ownership of the User Interface redesign
  • Perform user interviews, heuristic evaluation, and gap analysis to understand usability issues and identify pain-points, scenarios, and workflows.
  • Collaborate with Program Manager and Data Engineers to clarify requirements
  • Create requirements for new enhancements
  • Design improvements to the UI, navigation flows, features, and interactions
  • Create interactive prototype to communicate designs
  • Discuss new designs with the team and iterate based on feedback received
  • Implement new designs using HTML5, CSS3, Javascript ES6, React.js

BEFORE & AFTER

Before

After

TESTIMONIALS

OTHER PROJECTS

Synchronizing Accounts

Wildcard Disappearing Act

The Perfect Query