Redesigning Value Streams for Business Architects:

SaaS B2B Platform | Enterprise UX | 2025

Role: Senior UX Designer
Timeframe: 2 Sprints
Collaborators: Product Manager, Dev Lead, Customer Enablement Team, QA, Frontend Developers, External Customers
Tools: Figma, Miro, Teams

Summary

Problem: The Value Stream feature was launched with a poor visual hierarchy and missing metamodel context, which confused business architects trying to map capability lifecycles.

My Role: Sole UX designer working cross-functionally with product, engineering, and stakeholders post-acquisition.

Outcome: Aligned internal and external users on a revised UX approach. Validated the redesign with stakeholders and external users. Redesign is now in development with the dev team's buy-in.

Overview

Capsifi was acquired by Orbus, and priorities shifted to uplifting the Value Stream feature, which had been built quickly without UX input. The new PM flagged critical usability gaps and stakeholder dissatisfaction. Business architects struggled to interpret value stream relationships across capability instances, especially when time and regional dimensions were involved.

As the sole UX designer at Capsifi, I led the end-to-end redesign of the Value Stream feature—an essential tool used by business architects to visualise how customer value flows across capability instances, processes, and business units.

Capsifi 1.5 (Legacy Version):
The interface was view-only, with no editing functionality. It also displayed a lot of irrelevant or excessive information, making it harder for users to focus on what mattered.

Problem:

  1. Users couldn’t understand the relationships between value streams, capability instances, and metamodel elements.

  2. Time dimension overlays were missing or unclear.

  3. The interface lacked affordances for multi-select, filtering, or drilling down into relationships.

  4. There is no way to toggle or compare heatmaps across different time dimensions.

“At first glance, it’s overwhelming and hard to navigate to the real issue. As architects, we need a broad view of the map—and then the ability to drill into details to understand what’s going wrong.”
— Senior Business Architect, American Express.

Discovery

  • Users couldn’t tell how value stages connected to real business activities—it looked complex, but wasn’t actionable.

  • The screen felt too overwhelming. There was too much information displayed at once, and no clear way to start navigating.

  • Users needed both a high-level overview and the ability to zoom into details, but the tool didn’t support that flow.

  • Filters were too limited, making it hard to explore by region, product, or time.

  • Important insights weren’t visually clear on the heatmap.

Design Approach

1. Mapping Value Stream User Journeys

To redesign the experience, I first mapped out how users (typically business architects) interact with value streams during their day-to-day work. This helped me identify what actions they needed to take and what problems they were trying to solve.

I found three key scenarios that the new design needed to support:

  • Spotting areas for improvement
    Users wanted to quickly identify which stages in the value stream were underperforming so they could focus on improving them.

  • Comparing performance across teams or regions
    Architects needed to compare how different business units (like Product A vs Product B, or Region X vs Region Y) were performing in the same value stream.

  • Tracking changes over time
    Users wanted to see how a capability or stage had improved or declined over time—like viewing before/after snapshots to show business impact.

2. Design & Iteration

Given tight development timelines and the need to avoid major rework, we focused on high-impact improvements that could be implemented quickly and still enhance usability:

  • Simplified Edit Mode with Flyouts
    We redesigned the Value Stream view to function as an edit mode using a streamlined flyout panel. This allowed users to inspect and update data in context—without navigating away—while minimising changes to the core layout.

  • Improved Heatmap Visuals
    We refined icons, colour usage, and contrast to make performance signals (e.g., strengths, gaps) stand out more clearly in the heatmap, supporting faster scanning and decision-making.

  • Added Deep Mode to Overlay Panel
    A new “deep mode” within the overlay panel lets users explore related details—such as assessments, ideas, or project links—without overwhelming the main canvas. This added focus without cluttering the primary view.

  • Enhanced Comparison Mode
    We enhanced the comparison experience by enabling users to more clearly distinguish performance across regions or portfolios. Layout refinements and clearer labels helped users see patterns more easily.

3. User Testing & Design Iteration

I tested the initial wireframes with a mix of internal stakeholders (including business architects and SMEs) and five external users to validate usability and expectations.

The first draft represented the “ideal” user experience, featuring the most desired user features, including inline editing, flexible overlays, and detailed drill-down views.

After gathering feedback, I returned the wireframes to the development team for their assessment of feasibility. Some elements would have required major rework or introduced performance issues.

Through close collaboration, we developed a solution that balanced user needs with delivery constraints, retaining key improvements such as multi-select, comparison views, deep-mode flyouts, and visual enhancements, while simplifying the technical implementation.

First Draft of Wireframes

The original proposal was to allow users to add and edit business capability instances directly on the map, enabling a more interactive, drag-and-drop-style experience.

However, after reviewing with the dev team, we found this approach would require a complete architectural rework, which wasn't feasible within the delivery timeline.

As a result, we pivoted to a lighter solution using flyouts for editing, allowing users to interact with capability data contextually, without disrupting the existing infrastructure.

User can select capability instance through dropdown

User able to picking and choose which capability to selest

Design Trade-offs version

1. In the final design, when users hover over a connection (arrow) on the value stream map, an edit icon appears. Clicking the icon opens a flyout panel, allowing users to view and update capability instance details without leaving the map view.

2. An fly-out opens, user able to edit it through fly-out

3. Users can now select multiple items at once, rather than editing them one by one. This bulk selection capability streamlines the workflow and significantly reduces the time required to update related capability instances.

User’s preferred version of comparison

Users preferred having separate tables for each time dimension, making it easier to focus on individual time-based data. The final tab allows comparison across different time periods, helping users analyze change over time.

To give users more control, we added toggle switches to turn the heatmap on or off for each view—allowing them to focus on either raw data or visual insights as needed.

Additionally, we introduced first- and second-level relationship views, enabling users to drill down into connected data and explore deeper layers of the value stream in “deep mode.”

Design Trade-offs version

The easiest solution for comparison is to compare the data within the table. This was the trade-off in the first release from the development team. Although it’s not the final outcome we wanted, users can still compare the data within the table.

user able to use the side panel to do filtering

Old Vs New design

2.0 version fly-out for user to edit Business capability

2.1 version fly-out

Key Challenges

  1. Aligning metamodel logic from both Capsifi and Orbus post-acquisition

  2. Designing around a rigid front-end architecture

  3. Bridging expectations between ideal UX and what was technically feasible in the short term

My Role

  • Set up and ran one-on-one user testing with real customers

  • Built relationships with the Enablement team to access feedback channels

  • Facilitated design workshops with the dev lead and product manager

  • Proposed and iterated on design changes to improve clarity

  • Helped align teams on what users needed and what was feasible to deliver

Outcomes

  • More intuitive editing without rebuilding the feature from scratch

  • Better alignment between product, development, and enablement

  • Clearer editing interaction that worked within technical limits

  • Reduced time to interpret value stream data

  • Improved clarity and control through multi-select and deep mode

  • Positive feedback from stakeholders and external testers

  • Currently in development. Early feedback indicates much better comprehension and navigation across time-based capability data.

What I learned

  1. How to guide stakeholders from ideal-state thinking to MVP reality.

  2. The importance of deeply understanding complex data relationships in enterprise tools.

  3. How to influence and align cross-organisational teams under pressure and change.