Plutora, Core - 2018
Intro
My Role
Research, Information Architecture, Wire-framing, Rapid-Prototyping, Interaction Design and Visual Design
Teammate
Petr S, John P, Eugene R
Timeline
3 months
Overview
With new market expansion, Plutora created a new product category - Continuous Delivery & Value Stream Management to help enterprise reduce waste and increase productivity during software development process.
I led the end-to-end design direction of multiple components of Value Stream Management module including dashboard, CICD pipeline, release KPI metrics, integrations as well as reviewing impacted systems and suggest recommendation for redesign or enhancement.
Company website
This case study doesn't showcase the full design process, rather, highlighting important aspects of the project. The final design may look different due to the company's product and marketing strategies.
THE COMPANY
Top 10
fastest growing private companies in Silicon Valley (2018)
165%
Year on year growth (2018)
Highlights
HIGHLIGHTS
Value stream management explainer video
Snapshot of app and integration page
DORA metrics on main dashboard
Sample UI components
Continuous delivery pipeline view
Context
Delivering enterprise software is hard
Data visualisation demand skyrocketed
I was tasked to create more than 40 custom dashboard for big corporate customers to track their release performance and various metris.
These dashboard was developed as a custom built solution which required lots of javascript ( I know what you all thinking, custom Javascript, yuk)
The work was intense but it was one of most favourite projects. I got me thinking really really hard on the complexity of enterprise software delivery process.
Some custom dashboard that I designed
Bird eye view of entire process
Managing enterprise-grade software delivery is a kind of monster task, due to several release routes, various groups utilizing mixed frameworks, and their interdependencies.
These elements heighten the possibility of interruption in production services or non-compliance with stringent regulations. The software delivery process is a complete black box for executives and directors
Enterprise software delivery process in one page- SOURCE
My observations on the problem
Despite lacking of real life experience as a enterprise DevOps executive, I did notice key problems since I worked on so many customer dashboards, talked to many customer success managers as well as my CTO.
Lack of Visibility
When we can’t see the full software delivery process, it leads to confusion, misalignment, and makes it hard to spot problems.
Increased Waste
Manual steps, redundant tasks, and unclear workflows slow us down, waste resources, and increase costs.
Limited Continuous Improvement
Tech, design and process debt keep snowballing. These are hard to remedy and improve without holistic approach for continuous improment.
PROBLE STATEMENT
THE PROJECT
Product vision
I worked with key stakeholders to establish product vision. It provide a clear, long-term direction and purpose for the product, aligning the team and stakeholders around a shared understanding of the desired impact and value the new VSM solution will deliver to users and the market.
Value stream management platform product vision diagram
The timeline
The goal was to deliver a proof of concept (POC) within 3 months. The POC would piloted with selected customers to validate its value before commit to build out more advanced features.
Key project milestones
Design process
Lean design process
Discovery
Desktop research
I spent couple day to learn the fundamentals of process flow, value stream mapping, lean principles, metrics... which was mind-blown.
Industrial process flow diagram
FACT
A company with annual revenue of $1 billion could potentially lose $50 million to $300 million annually due to inefficiencies, wasted resources, and missed opportunities related to poor VSM.
User research
Competitive analysis
I documented my findings from quick competitor analysis to help identify market gaps, refine your value proposition, and enhance product design by evaluating competitors' strengths, weaknesses, and market positioning.
As you can see from the analysis, it is super difficult to compete in CI/CD, data integration and IT operation categories. Where I see Plutora can shine are end-to-end visibility, simplicity and real time data.
Competitive analysis table
Key findings
Key findings
We then interview customers to fully empathise their pain points and validate our assumptions.
Long time to value
In the sales cycle, it was difficult to demonstrate the platform’s value. It took a huge amount of work to create a custom dashboard, delaying the closing of new deals.
Disconnected dashboards
Many customers had custom dashboards with similar reporting capabilities using our Tableau integration.
Lack of view on what’s next
The majority of our reports were for the end stage of the software delivery cycle. We didn’t have a real view of the ongoing process.
Status and dependencies nightmare
Release managers or product managers must handle multiple dependencies of systems every time they release a new piece of software
Customers generated their reports
It required intensive manual work, which was extremely valuable for them. We found some interesting insights here.
Simplifying it
To keep thing easy for communication, I make a simplified version of value stream mapping that relatable to software delivery.
Software delivery value stream mapping
REFRAME THE problem
We are trying to answers lots of questions
How can we provide end-to-end visibility across all phases of software delivery
How can we make bottleneck detection proactive instead of reactive?
How can we ensure teams have access to real-time, actionable insights without needing complex tool integrations?
How can we know each portfolio or team performing?
How can we know much work do we have pending and tracking effectively?
BUSINESS GOAL
Ultimately, how do we know we develop something that add value?
Ideation
Keep in lean with lo-fi wireframe
Wireframe
I created low-fidelity wireframes to explore different layout and navigation options.
These prototypes were tested with a select group of enterprise users to gather feedback on usability and functionality.
Initial dashboard wireframe
Initial environment pipeline wireframe
Initial dashboard/widget customisation page wireframe
DESIGN
Begin at base
Team performance widget
I started with key components. My idea was to help team easily see their overall performance, similar to how they would look at their car's dashboard.
These would include overall team and individual criteria performance such as deployment, lead time, failure rate…
Team performance gauge component
Enterprise release KPIs
Using existing Tableau's report assets and usage statistic, I created couple metric widgets
Release KPIs widgets
DORA metrics states
On how users would interact with the widget, I created different variants of the common DORA widgets.
DORA metric widget states
Environment pipeline components
Each environment should at least has a deployment status snapshot and list of systems with current versions.
Environment UI
Put these in to play
DORA metrics dashboard
The intention was to grab users' attention from very start of the page. So the team performance was prioritised at the most prominent section of the page.
VSM Dashboard UI
Enterprise release KPIs
I separate all these release KPIs into another tab because I assumed these metrics would be usually consumed by another team and they would be displayed on a big screen at all the time.
Enterprise release KPIs view
Continuous delivery pipeline
This page was very interesting. The biggest challenge was how to fit a lot of environment in one page. Some team management hundreds of environment. So I decided to use horizontal scroll and filter to solve the design challenge.
Environment pipeline view
Navigation
Our current application had a very complex navigation structure. We did not have much time to work on the information architecture analysis, I proposed to put the new pages in the extended areas so that we can move quick and revisit this later.
Initial navigation proposal
Test
Prototype Usability Testing
Pilot feedback
I spent the next few day to convert the design into prototype using AxureRP.
We asked for feedback from multiple internal stakeholders and customers to reinforce our hypothesis with this prototype.
Prototype used for testing
Feedback
In general, we were able to obtain excellent feedback and ideas on how to improve.
Team performance indicator is great but what are those metrics mean and how to take actions to improve certain criteria.
DORA widget were overwhelming. Too hard to read important information at glance
Multiple tabs felt disconnected. User need one big page that they can show in big monitor in the command centre.
The navigation was strange. Too hard to find modify and update settings.
REfine
Implement feedback
Team performance definition
Based the feedback, I added the modal to explain what these metrics mean and how to achieve better performance.
DORA metrics information popup
Simplified DORA widgets
Many test participants expressed how hard to read the widget due to many different information squeezed inside it. The did clean up and remove those not important on the first level and allow them to look at more details by clicking on the widgets.
Simplification of DORA metric widget
One page view
Many participants shared that a combined dashboard would be beneficial so they don't have to switch between them and lose sight on another. While this approach would cause bad UX due to possibly longer loading time. This was flagged by engineering team and to be decided on final approach for MVP.
Combined view of VSM and Release KPIs
Navigation update
This was known issue and we took time to make navigation better by relocating all new pages into a share area on the main navigation.
Recommended navigation
Impact
Landed new customers with new integrated VSM module
With the cutting edge POCs, we was able to close some big new clients such as Merck, Verizon, Barclays, nab and Foxtel. Ending FY18 with strong numbers.
Customer logos
Put Plutora on the map
Not long after we updated the website with new product offering, one of our competitors updated their guidance on market readiness.
Link: https://about.gitlab.com/direction/plan/value_stream_management/
Gitlab vs Plutora VSM solution comparison table
Recognised as fast moving innovator and Named Leader by Forrester
We ended the year on strong note by celebrating Forrester award for market leader in Value Stream Management category, opening a whole new business outlook.
Forrester award and recognitions
NEXT STEPS
Continue to refine and deliver 2nd phase
Personalised workspace UI
DORA widget modification panel
Workspace access control UI
VSM custom code UI
LEArnings
Speed breeds breakthrough learning.
During two months, I deeply believed it the fastest way to learn and innovate is by taking bold actions, embracing risks, and learning from mistakes along the way
Some key learnings from the project:
Understand user needs
Quickly grasping the specific requirements and pain points of users is crucial for designing a VSM software that effectively addresses their value stream management challenges.
Prioritise key metrics
Identifying and focusing on the most relevant metrics and data visualisations ensures the dashboard provides actionable insights and supports decision-making.
Iterate quickly
Emphasising iterative design and feedback loops allows for continuous improvement and refinement, ensuring the software evolves to meet user expectations and business needs.
