Integration Platform Workspace Refresh

• Company: Boomi
• Duration: April 2023 - January 2025
• Role: Principal Product Designer
• Team: Principal Designer, Lead UX Researcher, Product Manager, Product Owner, Senior Analyst, Software Principal Engineer, Senior Software Engineer

Project Summary

Our mission was to transform the integration workspace into a faster, more intuitive, and industry-leading experience. By closely engaging with users and tackling critical feature gaps, we set out to redefine standards and deliver a solution that not only meets expectations but sets a new benchmark for excellence in the field.

The Challenge

To modernize, simplify, and enhance the workspace capabilities build experience to make it faster and convenient for our experts, ad-hoc, and new developers alike without compromising performance and/or usability.

The Goals

• Enhance user control and freedom
• Surface most significant content and capabilities
• Streamline workflows
• Compliance with visual design language, Exosphere
• Support future scalability and feature growth
• Increase efficiency by reducing cognitive load

The Solution

A refreshed and modernized platform with enhanced capabilities to improve developer build experience.

For quite some time, the Boomi Integration Core experience and visual design language had remained relatively unchanged. The aesthetic remained very Windows 97-ish and although there was a design system refresh and some minor updates the core product barely evolved.

While customers weren’t exactly demanding a visual refresh, it was clear that the look and feel of our application was becoming increasingly outdated. Through user research and project involvement, I consistently heard recurring frustrations from customers about:

• Cluttered workspaces
• Disjointed user experiences
• Duplicative efforts
• Manual workflows

These issues highlighted a deeper challenge—our Integration and Automation product is more than just a single tool; it’s a critical component of a suite designed to transform and optimize entire businesses. To deliver on that promise, Boomi needed a cohesive, modern design that aligned with its role as an industry-leading platform.

The Starting Point

Observing first hand those customer frustrations, I decided to take matters into my own hands and said to myself “If I could redesign Boomi, what would I do?”

There was no brief, no real direction, but a strong curiosity and determination to fix some problems and started on a mission to positively impact our visual design system, Exosphere. What does that even mean? I’ll tell you! To begin, I wanted to establish some principles:

• Organize and display information, logically
• Highly functional and designed with intention
• Don’t reinvent the wheel

Ultimately, I had to start analyzing our interface and determine where I could optimize to make the product feel more effective. I also started experimenting with design that I thought was aesthetically pleasing while trying to create a feeling of joy and happiness.

Exploring

Deeply embedded in the fun ideation and exploration phase, I started sharing my ideas in critique sessions and showing unfinished ideas with various stakeholders almost as soon as I thought of them. These discussions initiated excitement but also highlighted the need to apply a few rules and constraints:

• Design the moon! Ideal and future state but we can always fall back
• Maintain functionality! Focus on behavior and design evolution, not a full rework
• High fidelity and high level! We can define the details later
• Mimic the real world! Confidently understand the extent of changes
• Don’t fall in love… with that idea

From there, I had an outlet to explore a broader range of ideas and go full blown experimentation mode while also defining new style guide specifications to support my next steps.

Modern but functional

Striking the right balance in design is always a challenge—push too far, and it risks becoming distracting; hold back, and it may fail to deliver meaningful impact. As these concepts circulated, feedback ranged widely, highlighting the need to carefully calibrate the enhancements.

The goal was clear: improve the product without compromising productivity. Through iteration, it became evident which interface elements required a complete overhaul versus those that simply needed a refresh.

Starting with a bold, aggressive concept while preserving existing functionality, the visual language refresh emerged as the perfect opportunity to introduce delight and elevate the user experience.

A canvas that just feels right

The integration canvas is one of Boomi's most critical and highly trafficked workspaces. Which meant it was subject to intense scrutiny and extensive feedback as we worked to refine it. Getting it right required numerous iterations and a meticulous design process.

Modernizing the look and feel was essential, but so was reducing clutter and thoughtfully reorganizing related actions. Leveraging core design principles to create unity, harmony and hierarchy ensured the canvas could support scalability, allowing this interface to grow organically into the future.

The right elements

Interface elements play a crucial role in providing customers with the proper tooling while building integrations. I had a chance to reimagine how these elements behave, ensuring they command attention when necessary while minimizing their presence to avoid unnecessary competition for focus.

The challenge is scaling these elements effectively across the platform and anticipating their performance within the redesigned workflow. Each change needed to align seamlessly with customer expectations, ensuring actions were clear, intuitive, and effective.

Every iteration underwent multiple design revision cycles to identify the optimal functionality, resulting in a refined, user-centered experience.

From teal to blue

The initial choice of teal as the primary color was to invoke a more inviting and joyful experience for our customers. However, as the Boomi brand evolved, teal was dropped completely from the color palette and instead replaced with a more vibrant blue. This new approachable blue paired nicely with the professional navy hue to drive an empowering yet relatable tone we were looking for.

Another intentional and calculated decision with our color palette was to infuse more of a neutral color palette to reduce prominence of non-critical elements in order to emphasise the most critical and important actions.

Getting buy-in

An overwhelming amount of support and excitement helped move this project all the way forward. From the onset, these concepts grew legs and encouraged collaboration across different departments and seniority levels.

Truthfully, being assertive and showing the value in our design direction lead to greater awareness and ultimately, alignment and buy-in. Giving us more credibility and increased trust.

Making it happen! Fast!

With the excitement and anticipation came the approvals and green light. I partnered with UX Research and UI-Tech Engineering team to kick off the rapid and effective execution of this transformation we dubbed “Project Canvas 2.0”

Within the first few weeks, the engineering team turned design ideas into a tangible working interface.

It wasn’t all daisies and sunshine, however. Releasing these changes also came as a surprise to many with a large operational feat, where I had to:

• Develop interactions and specs around concepts that weren’t fully thought through during the concept phase
• Coordinate with a dozen other teams of these changes, guiding and encouraging adoption of the new design features
• Become de facto owner of feedback and customer support, prioritizing and providing explanation on summary of changes
• Provide support to developers, product managers, and customers

This was a great realization that I, as well as our design process, needed to evolve. There needed to be more capacity to ensure designs were stable and sturdy to handoff to engineering. Meanwhile, we desperately needed not only a direct forum to collect feedback, but also an environment where we can publish and test changes to gather more evidence of usability.

From this, we developed an internal opt-in, beta development environment so users could.

So… What shipped?

I’d say that this was the most significant and impactful change that Boomi’s seen in ~18 years. More than just a visual update, this enables builders to more efficiently reach their goals, provides quality of life usability enhancements, and ensures our customers have a voice seeing that their concerns and suggestions are actively being acted upon. Therefore, increasing our perceived value and trustworthiness.

Component Explorer

Quite a bit of a developer's job is done in the Component Explorer and so there was a desire to bring much needed satisfaction to this feature by improving this a few different ways.

To accommodate the fresh new design, we improved the filter control behavior making it much easier to interact with, when needed. Added much requested capabilities like right click functionality and the ability to manage the component directory directly within the component explorer.

Canvas Workspace

We knew that what we were doing was going to be well received, and while we needed to flush out and validate that our ideas were lining up to our customers expectations, what we landed on was a refined, cleaner, and easier workspace that’s fun to use.

The steps palette and the floating action island really open up the workspace to provide more breathing room to work in.

This paired nicely with relative and related actions being organized in a thoughtful manner, as well as, the improved information navigation and hierarchy.

Unified Component Action Bar

We designed a toolbar that streamlines editing component information, organizes process actions into a dedicated region, and features a responsive design for seamless, satisfying development across all screen sizes.

Tabs

We enhanced the tabs to improve workflow efficiency, introducing scrollable tabs to ensure users always know which process they’re working on while easily browsing other open components. Developers can now rearrange tabs, pin important ones, and see component-type icons for better at-a-glance visibility, creating a more seamless and enjoyable experience.

More to come

So there you have it! I hope you’ve enjoyed this behind the scenes look at this weirdly chaotic process to see how much went into evolving, building, improving and delivering such a substantial product enhancement.

So many people contributed to this effort and I gleaned something new from each and every single one of them and I would like to take a moment to acknowledge everyone involved:

Ranjit A., Owen F., Adam A., Joel F., Elizabeth C., Deepak C., Dhavalkumar K., Frank W., Max S., Nancy Pretty S., Raghavendra K., Subramanian H., Varun S. and so many others who took time to stress test, look at concepts, and provided incredible feedback to truly make this a success. Thank you!

And I’m far from finished!

My goal is to continuously elevate and make Boomi the best place to automate your businesses and we’ll keep evolving our design language to be the best, most professional tool developers can rely on.

Stay tuned!