Jarvis is an ebay application for database monitoring. It provides a 360 degree near-real-time and historical view of all eBay’s database events. Database events are virtually anything which happens to a database, including metrics about the number of active sessions, cpu load, etc.
I teamed up with three developers.
I worked on develop scenarios and task flows to conceptualize designs and create user experience specifications. I translated product requirements into interaction models. In addition, I was responsible for low-fidelity wireframes, high-fidelity clickable mockup and some widgets coding.
Tools and technologies
Research: Competitive Analysis, Interview, Survey
Wireframe & high-res: Sketch
Development: AngularJS, Gulp, NodeJS, SVG, D3
Before I begin...
At the very beginning, I was not that interested in this project. The target users for this project are Database Admins & Engineers. I want to do more consumer-facing projects. But my manager told me, those technical employees are also consumers. There is no reason for them to suffer from those internal horrible apps and live a miserable life. We should try our best to foster better internal experience and then make their lives easier. They expect the same ease-of-use and simplicity in their work tools they have come to anticipate in the consumer Internet.
How Jarvis works?
Circle size represents the number of errors. The bigger the circle, the more errors that database contains. Emergency level are shown in color, red means it has problems.
Filter: sort by size. Green means databases are safe.
Take a closer look
Here are some screen captures from live code.
Collapsible Filter Menu
Config Metrics - a shopping cart-like checkout experience
Customize Time Range
Behind the Scene
We did 1 Competitive Analysis, 2 User studies, 20+ pages of low fidelity mockups, 40+ high resolution mocks, and 40+ rounds of code review.
Below are some examples of design mockups.
Top Menu VS Left Menu - There are a huge number of filters. How to organize them become a big challenge.
Besides the design
Besides the design, I also worked on some widgets development, like time-range customization, metrics configuration and timezone selection. The one that I feel most proud of is timezone selection widget, which allows users to select two timezones, and then calculate metrics/errors within that certain period of time. I built this one from scratch.