DoubleLoop
Software enabling teams to track outcomes, gain insights, and align on long-term goals, supporting continuous improvement and strategic focus.
Productivity
B2B
SaaS
AI Interface Design
Info Architecture
Prototypes
Interaction Design
Visual Design
Design System
Overview.
DoubleLoop is a visual strategy mapping platform that connects work and metrics to provide a real-time dashboard of strategy performance. It enables users to send automated reports and analyze how their strategy can be optimized. Companies such as Amplitude and SpotHero have used DoubleLoop to identify harmful metrics, uncover work initiatives misaligned with company objectives, and resolve conflicts where teams were working at cross purposes. By fostering better autonomous decision-making, DoubleLoop has also helped boost company-wide morale and alignment across teams.
Diagramming Tool UI.
Developing a strategy map in DoubleLoop aligns stakeholders and teams around impactful initiatives while integrating seamlessly with tools for analyzing and reporting performance. Users can import work from platforms like Jira, Asana, and Linear, and pull metrics from sources such as Snowflake, Amplitude, and Mixpanel, providing a real-time, comprehensive view of their strategy. By syncing with tools like Jira, business context remains central to day-to-day operations, bridging strategy with execution.
Regular progress and impact reports can be sent via Slack or email, ensuring everyone stays informed. Additionally, by analyzing correlations between work and metrics, users gain deeper insights into business drivers, allowing for continuous strategy refinement.
.jpg)
Designing Data Display for Strategy Maps. In DoubleLoop, customers can connect to the apps they already use to get a real-time view of their strategy. Work integrations, such as Jira, provide an up-to-date view of projects, while metric integrations, like Google Analytics, offer insights into the impact of that work. I collaborated closely with the team to identify which data to pull from each source's API, determine its relevance to the strategy map, and design how it would be displayed on the map cards.
DoubleLoop is a visual strategy mapping platform.
tool bar...
Designing Card and Connector Styles for Strategy Insights. Customers can test various levers to achieve their goals by connecting metrics to reveal correlations. In this example, the customer aims to grow repeat parkers. DoubleLoop identifies a negative correlation between parks per month and repeat parkers, while highlighting that high-frequency parkers are a better leverage point. This insight helps the product team focus on the bet that powerbooking features will drive more high-frequency parkers, ultimately achieving their goal. I designed the style for the cards and connectors to ensure clarity and consistency, making it easier for users to interpret and act on these insights.
UI Design for AI Chat.
Easy-to-understand prompts and selections, making it approachable for all experience levels. ->
AI Assistants.
Recently, DoubleLoop decided to integrate AI into its platform to assist customers in creating strategy maps. While AI represents a paradigm shift, with the potential to transform industries by redefining how businesses operate, innovate, and deliver value, it also presents unique challenges for UI designers. In this case, the challenge lies in designing an interface for interacting with an AI agent, where the content generated is not fully under our control. However, we do have influence over the flow, structure, and visual presentation of the conversation. When designing the AI features, I focused on creating an evolution of the UI, not a revolution. ensuring a seamless experience for current users without forcing them to relearn established pattern
AI Assistants.
DoubleLoop is enhancing its onboarding experience with AI by adopting a multi-agent approach. Unlike traditional single-chat AI solutions, each AI agent is dedicated to a specific aspect of the strategy map: Research, KPI Metrics, Input Metrics, Bets, and the North Star Metric. This specialization offers users tailored guidance for each area of their strategy.
To ensure an intuitive experience, we designed a guided flow with clear, easy-to-understand prompts and selections, making it approachable for all experience levels. At the same time, the conversational design remains flexible, allowing users to direct the interaction as needed. This balance between structure and freedom ensures a more personalized, impactful onboarding journey.
Designing a Balanced AI Assistant Interface. When designing the AI features for the UI, I aimed for an evolution, not a revolution. I used a balanced 50/50 layout for the AI Assistant: the left half of the page is dedicated to the chat dialogue, providing ample space for comprehensive suggestions and feedback from the AI. The right half features a real-time preview of the strategy map, which updates as customers approve cards. Customers can also expand the map to make manual edits, ensuring flexibility and control.
.jpg)
AI Assistant Illustrations. DoubleLoop uses multiple AI agents, called assistants, each dedicated to a specific aspect of the strategy map. To bring these assistants to life, I created illustrations for each one, using bright gradients and clean lines that align with DoubleLoop's brand. Adding a playful twist, each assistant is represented by an alpaca—a fun nod to llamas, which have become a symbol of AI.
Integrating Design Patterns with AI Chat.
When the assistant reccommends cards to add, the cards are rendered similar to how they will appear on the map. ->
Component Design.
While working with DoubleLoop, I developed a custom component library for their diagramming tool, which stands apart from similar platforms like Miro, Lucidchart, and Whimsical due to its unique complexity. At the time, no relevant Figma library existed, so I created a bespoke solution aligned with React Flow, the technology used by the development team.
The diagramming tool featured a set of card types for metrics, work, and bets. These were designed in Figma as variants with customizable properties, allowing us to create instances of any card type with varying levels of data. I also incorporated essential features like connectors, groupings, and comments. This component library streamlined the design process, enabling both current and future designers to efficiently mock up prototypes, examples, and user flows with consistency and ease.
Message Input Design.
Users have the option to direct their question to one of the agents. ->
.jpg)
Custom Component Library. A custom library of components was designed in Figma to streamline the creation of strategy maps. The "card" component was built using variants, text properties, and Boolean features, allowing for flexible customization and efficient prototyping.
Designed for Consistency and Flexibility. By adjusting the properties of each instance, designers can quickly create any type of card within a prototype, ensuring consistency while accommodating varying content and visibility needs.