Project

Plotlines is a ubiquitous Mobile and Web Application - allowing anyone in the organization - from Product Managers, Product Developers, Analysts to Managers to find and visualize - then organize and share - any combination of time series data (events, metrics, meters and alarms).

My role

I worked with three developers and PMs to define the project scope, experience map, key flows, and interaction patterns. I’ve gone through tons of iterations on refining the flows, navigation, interactions, and visuals based on team’s feedback and research suggestions.

Tools and technologies

Design - Photoshop, Illustrator 

Web Client- HTML, CSS, Javascript,AngularJS, Highcharts,RESTful API

Mobile - Ionic Framework

Storyboard Video - Illustrator, Keynote 

What is Plotlines?

main item
main item
main item
main item

How do I get started?

I started this project using a mind map to identify new features. I’ve found the structure really useful to be able to think each step through thoroughly.

main item

Storyboard

A storyboard for future vision of analytics ecosystem.

Plotlines is part of this ecosystem of analytics, as time series data is one the main pillars of analytics data.

Early stage Explorations

Then I worked on wireframes. One of the biggest challenges of this project was figuring out what features should and shouldn't be included.


Wireframes - Web

main item


Wireframes - Mobile

main item

Iterative Design

I built out dozens of visual design options and Javascript prototypes, from big and bold to simple and elegant. Below are some examples.


Homepage & Search Results page

main item

Search results option 1

main item

Search results option 2

main item

Create page mockup

main item

Final Prototype - Mobile First

Plotlines Mobile is optimized to handle brief and focused interaction with time series data to quickly find and monitor metrics, create and share graphs or receive timely alarms or events.

Plotlines Mobile can vastly improve time to detect and recover from issues by leveraging the accessibility and proximity of a smartphone to person who can use the time series data. 

main item

main item

main item

Also Built for web

While Plotlines mobile is optimized for brief and focused interactions, Plotlines Web leverages the larger form factor to provide additional breath, depth and organization - things which are difficult to do on a smartphone.

Plotlines Web provides users the flexibility to organize the time series data graphs they create - called Plotlines - into their own personal dashboards. It provides richer visual experiences for searching, creating, editing and viewing..


Homepage

main item


Create Plotlines

main item


Metrics Calculation

main item

Cross-platform

main item

A Responsive Landing Page

I designed and developed a responsive landing page so that people can learn about, visit the web client and download the app easily.

Usabiltiy Test

Two rounds of user testings were conducted. Ten users from our target group participated in the tests. Each individual was required to finish 8 pre-determined tasks, like “Search for a specific plotline and share it via email”, “Create a new plotline”, “Add a specific plotline to a dashboard”, “Find an alarm and solve the problem” etc.

In general, the result came out pretty well: most of the designs had a 100% successful rate in the usability testing. Yet I was able to identify some usability issues and worked on resolving them.