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).
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
Mobile - Ionic Framework
Storyboard Video - Illustrator, Keynote
What is Plotlines?
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.
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
Wireframes - Mobile
Homepage & Search Results page
Search results option 1
Search results option 2
Create page mockup
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.
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..
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.
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.