Blueair Subscription Management
Overview
A DTC air purification brand
Blueair is an award-winning direct-to-consumer air purification brand, offering a range of products and services including air purifiers to filter subscriptions.
Lack of customer engagement as a DTC brand
During COVID, sales of air purifiers increased greatly. While Blueair is experiencing high sales demand, the brand has not previously planned for a holistic, end-to-end customer experience for a DTC model, resulting in missed opportunities and gaps in customer experience.
Improve customer experience and extend DTC sales
To better serve the needs of customers and drive sales, Engine Digital is brought on board to lead CX planning and define an actionable roadmap of services, user experiences, and designs, and launch features to improve the end-to-end digital experience.
To properly understand the current customer experience and limitations, we conducted research through a mix of qualitative and quantitative methods:
Current state audit
Competitive and comparative analysis
Interview with Blueair users and competitor users (n=6)
Stakeholder interviews
Customer archetype workshop
Quantitative data from heat maps and Google Analytics
Customer archetype workshop findings
For each archetype, findings and pain points are summarized in a user journey map which contains the different phases of purchase journey:
.png)
At a high-level, we identified the following challenges in the customer experience:
A lack of trust
Because air purification effectiveness is difficult to measure, consumers often mistrust the benefits and technology. Meanwhile, established appliance brands like Dyson have stronger credibility, leaving Blueair with the challenge of building trust in the category.
Overwhelmed with choice
The air purifier market is crowded, and the wide range of models and features makes buying stressful, forcing customers to navigate complex filter technologies and product differences.
Few incentives to stay and return
To compete with other brands and retailers like Amazon, Blueair must create stronger incentives for customers to buy directly from them. Currently, beyond its filter subscription there is little to no advantage for customers to shop directly from Blueair.com.
Subscription services are afterthoughts
Filter subscriptions offer strong recurring revenue potential, but they’re introduced only post-purchase and are difficult for customers to manage and use.
A balance of immediate and future recommendations
After detailed auditing and competitive and comparative analysis, a number of baseline recommendations were created to ensure success in the site's functionality and usability (e.g., restructure homepage and PLP cards). The team collaborated on a brainstorming session prompted by a number of HMW questions. Select recommendations are developed further into briefs, outlining the pain points addressed, levels of effort, and high-level approach to solutions.
Process of concepting and ideating
Example of an opportunity brief that will be used in the prioritization process
Prioritization based on effort and impact
In collaboration with the Blueair team, each brief is evaluated by thinking about its impact, or how many people this solution can reach and the amount of time and resources it would take to make it happen. Recommendations were ranked in three level of priorities - with the top level being most urgent.
We set up a cadence of roadmap so that visual design and UX collaborated on a set of opportunity each week and presented our work to Blueair for feedback and to carry forward by Blueair’s development team.
Note: Instead of covering the entire e-commerce experience in this case study, I will focus specifically on our process for 3 design sprints. Please feel free to navigate to a part that's most interesting to you.
sprints
focus
links
Homepage revamp
content strategy
view sectionAdd subscription functionality to cart
UX, UI, design QA
view sectionAdd subscription functionality to user account
UX, UI, email designs
coming soonSprint 1: Homepage revamp
Current problems
Lack of trust and credibility in the brand.
Customers are overwhelmed by choice and struggle to differentiate products.
Purification technology is difficult to understand. Heat map data shows the technology-focused section of homepage receive few to no clicks even though it sits in a prime location below the hero.
Homepage heatmap
What we did
Defined a content strategy and page hierarchy to address the users immediate needs.
Used technology messaging in support of new benefits-driven messaging.
Prioritized establishing credibility and trust.
Introduced new components to help the user differentiate Blueair products and choose the right purifier for their needs.
Surfaced specific Blueair social initiatives to amplify the brand’s values.
Rethinking homepage content hierarchy
Outcome highlights
Pain point: Users are overwhelmed with product choices.
Solution: Introduced two new components dedicated to differentiating products through price, room size, best use cases, etc. and help users choose the right purifier for their needs.
Pain point: Lack of familiarity and credibility in the brand.
Solution: Introduced components that utilize customer testimonials and Consumer Reports recommendations to establish trust with users.
Visual design with improved spacing and text/image split to ensure accessibility and clarity. More space is dedicated to product imagery rather than long-form text.
Challenges & constraints
Blueair's high-performing products have won numerous certifications over the years. It was difficult to convince the clients that rather than showing all performance certifications up-front, it's more beneficial to lead with how the product can improve the customer's lives. Showing them data from Google Analytics that technical information has a high drop-off rate and isn't been clicked on in the homepage helped with our justification.
Sprint 2: Cart Subscription
Filter subscription service has not been fully incorporated into the purchase flow. Currently, if a user wants to purchase a filter subscription in the check out stage, they are taken out of the cart to go through a stepped process - disrupting the checkout flow and increasing the number of drop-offs.
1. Create a scalable and reversible user flow
A solution was needed to incorporate subscription information directly in the cart, without taking users to a different page. Two solutions were wireframed for feedback. I looked for a pattern that would allow users to easily select, deselect, and make edits to their selected subscription without backtracking. We landed on Solution 2 to allow for most flexibility and reversibility.
.png)
2. Accommodate different scenarios and products
Then, I created additional wireframes to understand how Solution 2 applies to purifier units with different functions and requirements and how items would stack on mobile.
3. Visual design and fine-tuning UI
In the interest of shipping this functionality quickly, we leveraged existing components and closely followed Blueair's brand guidelines. We focused our efforts on ensuring accessibility and clarity through establishing user patterns, spacing rules, colors and contrast. This stage is mostly led by our visual designer with input from the rest of the team.
Detailed documentation to minimize errors
One of the main challenges in shipping this function is the lack of direct communications with the external development team. To minimize errors due to not understanding the functionality and behaviours fully, we created detailed documentations and interactive prototypes in Figma. However after this feature was shipped, there were still many issues in both visual design and behaviours. If I had the chance, I would do a bug bash with the UX and visual design team to file bugs on visual design and functionality-related issues.
Learning from customer service team
Having had daily interactions with users, the Customer Service team had invaluable data and insights in understanding the challenges users face. Not only did they give useful feedback in user experiences, they also helped us prioritize issues that are urgent versus more long-term.
Anticipating scalability
When working through complex functionalities, it's easy to fail to consider how the functionality will work when it scales. What happens when multiple items need subscriptions? What happens when each subscription needs to be different? It was important to create a consistent UX pattern no matter the scale.
Overview
Filter subscription is a crucial part of Blueair's business for generating recurring revenue. This case study shows a design sprint that was conducted within one week to identify gaps and improve subscription management.
Filter subscribers can't easily manage their subscriptions
Since COVID, high number of air purifiers users led to soaring demands on filter subscriptions. Blueair's filter subscription service wasn't initially set up for a high volume of users, leading to the customers service team overwhelmed with simple but transactional user requests.
New subscription management functionalities within user accounts
cancellation
pause & reactivate
A closer look at how we got here
We conducted interviews with current subscribers and Blueair's customer service team. At a high level, our research identified the following challenges:
20% of cancellations result from shipments being too frequent
Currently delivery cadence is set to be every 6 months. However, depending on how frequently the purifier is being used, that cadence varies for each user.
If there is more than one subscription in the account, there is no way to tell them apart
Over half of subscribers have more than one subscription. In fact, our interview with the CS team revealed that subscribers have anywhere from 2 to 15 filter subscriptions. But in the current user account there's no way to tell the subscriptions apart.
CS team is overwhelmed with transactional requests that should be handled by the UI
Because of all the challenges presented by the UI, the customer service team is overwhelmed with transactional requests such as "I want to move this delivery back 3 weeks", "I want to stop this subscription while I'm moving".
The current subscription tab in the user account has very minimal features and is difficult to navigate. There's currently no way to differentiate between purifier units (and their subscriptions) and the cancellation flow is difficult to find.
Enabling subscribers to customize each subscription
Using the research findings as a starting point, we prioritized functionalities that give users more flexibility in changing and managing each existing subscriptions. This included the ability to: pause and resume, cancel and resubscribe, adjust delivery cadence and shipping address.
Incorporating new functionalities in existing user accounts
.png)
Leveraging existing design system
Since Blueair has an established style guide and design system, we leveraged existing components and created new modules wherever needed. This stage is mostly led by our visual designer with input and feedback from the rest of the team.
.png)
Creating transactional emails for new functionalities
In order to communicate the changes to their user account and the new functionalities, we mapped out where new functionalities exists in the user flow and designed a series of new emails to be sent to users when they make changes to their subscriptions.
.png)
The newly designed features are currently in the pipeline for deployment. If we had time I would conduct usability testing sessions to receive feedback on the new functionalities. At a high level, I would approach the study with the follow steps:
Identify users with filter subscriptions
Describe a scenario where the user need to make changes to their subscriptions
Ask the user to walk through the change
Ask for feedback about what went well or what is missing.
Respond to increasing demand and provide valued services
Southern New Hampshire University (SNHU) serves just over 3,000 on-campus students and nearly 300,000 online learners. The Wolak Library Learning Commons is a flagship campus space offering study and meeting areas, library collections, a café, and an Innovation Lab & Makerspace. It brings together five core service units - Shapiro Library, the Wolak Learning Center, IT Help Desk, Instructional Support, and the Center for Teaching and Learning - that support students, faculty, and staff both in person and remotely.
As enrollment grows and student needs evolve, limited staffing presents a shared challenge. To meet rising demand, the five teams will need to collaborate more closely to address space constraints and deliver high value, coordinated services.
Key opportunities and service blueprint
User insights and key opportunities uncovered during our engagement process were used to develop a series of services at Wolak LLC. Our efforts helped to foster a user-centred approach to service strategy and paved the way for service providers at Wolak to continue to adapt and refine their services going forward. Included in our service strategy report are:
User research findings and insights
Future service philosophies and guiding principles
Key opportunities for service improvement
Service blueprints co-created with library service providers
Staffing strategies including key roles that are critical to the success of future service delivery
From an in-depth research and engagement process, our team learned about the dynamic and changing SNHU context, the successes and challenges experienced by the five service providers at Wolak Library, and the perspectives and needs of the on-campus student community. Our range of engagements with stakeholders included:
Interviews with university and service leaders;
Interviews with on-campus SNHU students;
Facilitated workshop with student users and student library staff;
Needs and visioning workshop with library staff to develop service philosophy;
Service strategy development workshop with library staff to refine service delivery.
Services are available but students aren’t using them
Through a one-day immersive engagement, we sought input from just over 70 SNHU students on campus. Through intercepts and an open-invitation feedback session, we learned about what brought students to Wolak, what they valued, and what improvements could be made. Our high-level findings are listed below:
Partnering to empower learners
A key component of achieving improved coordination and effectiveness of multiple service providers at Wolak is to create a shared philosophy that will guide service delivery.
Working alongside 20 Wolak service providers, we collectively generated “partnering to empower learners” to be the shared philosophy. This can be accomplished by:
Meeting learner where they are;
Partnering with students, faculty, and staff;
Educating and empowering;
Encouraging discovery, curiosity, and lifelong learning;
We achieve success because we are interdependent.
Collaboration is at the center of all opportunities
Building on the research conducted with students and insights from leadership interviews, three areas of focus identify opportunities to make significant improvements at Wolak. These areas overlap and reinforce each other with a central concept—collaboration—essential to the success of all other areas.
Guidance on how services opportunities can be delivered
The opportunity areas are supplemented by service blueprints that provides guidance on how a service will be delivered by specifying what’s needed to deliver the service: the channels, front-line staff actions, behind-the-scenes staff actions, and support systems and infrastructure.
During the service strategy development workshop, staff participants split into break-out groups to map out blueprints for service ideas that they were interested in developing further. Shown below are selected blueprints created for four of the strategies that addressed important needs of the groups and users.
Identify key roles to ensure success
Building on the service blueprint strategies, the following key roles have been identified as opportunities for Wolak groups to increase collaboration—through a new role that an existing or new staff member fulfills or a team of cross-department staff fill. While this list is not comprehensive, the roles listed reflect needs from each opportunity: awareness, navigation and access, and collaboration.
From a rough experiment in one of my teammate’s room, we landed on a system what represents each post with a block that forms a part of the underlying structure of the room:
Overview
Fragmented meeting experiences in Teams
Complexity: Scheduling, joining, and finding meetings are spread across email, Teams calendar, and chat, making it hard to get things done quickly
Loss of information: Important meeting info (agenda, notes, files, decisions) don't have a centralized home, so people show up unprepared or can’t catch up later
Scalability: New meeting features in Teams don’t have a natural home in Teams’ information architecture
Discoverability: On first run, it’s unclear that Teams supports meetings
Lack of surface for meeting information before and after meeting
A dedicated surface for meetings
Meet is a new area in Microsoft Teams where you can manage your meetings. Prepare for what's coming up, catch up on meetings you missed, and find recordings, chats, and meeting recaps - all in one place.
.gif)
Led design of the Meet app from ground-up, including overall framework for layout, card component design, and navigation behaviors
Defined the information architecture and interaction model connecting meetings, tools, and collaboration content
Partnered closely with engineers to prototype and refine workflows, ensuring feasibility and scalability across surfaces
Validated concepts through user testing and internal dogfooding to iterate on key meeting scenarios
How we got there
Identify pre and post meeting jobs and pain points
Goal: gather foundational learning of meeting scenarios and understand expectations and mental model for a "Meet" app
Confirm user expectations and jobs for a "Meet" App
Learnings from the first study were compiled into themes of key jobs and presented back to participants. While Start, Prepare, Catch-up resonated with participants, Discover was not well understood and prioritized.
Overall app layout follows key user jobs at each stage of the meeting lifecycle
I explored three different app layouts, each based on a distinct approach to how users engage with meetings. Model 1 is the most visually straightforward and best aligns with users’ mental model of using the Meet app to start their day, prepare for upcoming meetings, and review past meetings.
Horizonal card layout for pre-meeting helps with browsing for signals, whereas a vertical list view helps with searching for specific meeting content post-meeting.
Ensure the continuity of meeting files before, during, and after the meeting
We believe meeting files and signals are crucial to the success of a meeting. The Meet app acts as a central place users can return to for everything related to a meeting and must ensure meeting files and signals are never lost across the meeting lifecycle.
The meeting card UI is designed for quick, easy access, organizing information into cards that reflect different stages of the meeting. Each meeting card dynamically adapts its state to surface the most relevant information and actions at that moment in time.
Up next cards: for joining, preparing, and managing upcoming meetings
The primary goal of the “Up Next” section is to help users feel prepared for more productive meetings. Key jobs to be done include:
Choose which meetings to attend
Easily launch upcoming Teams meetings
Understand goals and agenda
Identify and take action to resolve issues (e.g., attendee list, conflicts, cancellations)
Access meeting documents
Upcoming meetings are shown in a carousel of meeting cards that emphasize meeting information in a dynamic but predictable way organized in the following framework:
Recent list: for reviewing past meeting recordings and content
The Recent section uses a list view to enable fast retrieval of past meetings. Unlike calendar layouts, which rely on remembering when something occurred, a list allows users to scan and filter across all records, making it easier to find meetings quickly.
Filter pills enable specific retrieval need: shared content, missed sessions, recordings, and mentions, so users can quickly narrow the search space and access the right information without navigating across multiple surfaces.
A lesson in finding the right product market fit
Meet app launched in September 2023 and reached 1.2M monthly active users (MAU) by September 2024.
It performed well with Teams Premium users, who held more meetings and used AI features, but struggled to achieve broad product-market fit among non-premium users with its MVP scope. While it attracted low-meeting users, it failed to activate and retain them. Many of their sessions showed an empty or half-empty app, reflecting a lack of meeting content. These users explored but didn’t find differentiated value.
Key takeaways from this project are:
Usage density matters more than user count
Don’t confuse growth in MAU with true PMF. PMF requires sustained activation and retention, not just installs or sessions
An MVP should be optimized for a specific high-potential segment, not generalized across segments with very different usage patterns. Ensure the product delivers value even at low input levels, or deliberately target users who naturally provide sufficient input
Overview
Meeting features in Teams are overcrowded, disorganized, and causing misclicks
Meetings are one of the most critical surfaces in Teams, but the meeting stage had become overloaded with too many controls. This led to a cluttered UI, making controls hard to find in live meetings, and accidental clicks. The underlying information architecture also limited scalability.
Simplified, principle driven information architecture
The new experience simplifies 15+ high-stakes, role-based scenarios and edge cases into an intuitive, scalable framework driven by first principles, reducing misclicks by 64% across 180M+ users and achieved 92% week-over-week roll-out retention rate.
The redesigned meeting experience introduces a more intentional information architecture, grouping controls by purpose and creating clear, predictable locations for key actions. New interactions such as drag and drop is introduced to allow users to tailor the toolbar to their needs while maintaining a consistent and scalable structure.
Led the end-to-end redesign from defining principles to finalizing layout, motion, and interactions
Introduced a decision framework that resolved competing opinions and drove alignment
Drove validation with research using data, experimentation, dogfooding, and longitudinal studies
Partnered closely with engineering to implement and refine the new architecture and interactions
How we got there
Before exploring solutions, we aligned cross-functionally on what success meant
Clear: Users should be able to quickly scan controls and understand where to go
Predictable: Related actions should live together, and the organization should feel consistent across meeting types and roles
Scalable: Supports new features without continuously bloating the top level
Reduce misclick: Reduce usability issues like accidental misclicks and confusion around what actions do
Overcrowded, disorganized, and frequently causing misclicks
Multiple entry points for the same actions created confusion, and the lack of a clear structure made it hard for users to know where controls lived. High-impact misclicks, like accidentally hitting “Leave”, further compounded the problem. Without a coherent organization system, the UI slowed users down and reduced confidence during live meetings, while also making it difficult to scale as new features were added.
Not all controls are used the same
To understand what users actually use in meetings, we analyzed 28-day usage heatmaps and surveyed 130 users to identify must-have controls. This revealed that many tools on the toolbar are rarely used and not seen as essential.
Creating a framework for hierarchy for controls
With insights from user data and research, I developed a framework that organizes meeting controls into three layers with distinct levels of visibility. This framework established a clear structure for the toolbar and became the foundation for its layout, interaction patterns, and long-term scalability.
Identify the best layout through data and usability scoring
There were too many possible layout directions, and choosing between them quickly became subjective. To stay objective, I led a exploratory phase where I generated multiple variants and introduced a weighted scoring framework to evaluate them. Each option was assessed against clear criteria: interaction cost (travel distance), scalability (support for hoisting and pinning), misclick prevention, and widescreen behavior. This made tradeoffs explicit and surfaced the strongest performers.
Scoring framework and outcome
The 3 design options that scored the highest were tested in a 8-week diary study where 80 participants were split into 3 groups and only used one design throughout the 8 weeks. Participants were asked about whether they had difficulty locating actions they needed and how satisfied, confident, and easy to navigate the design were.
The all-centered design was quickly seen as a clear improvement over the existing experience for the following reasons:
Reduced cursor travel distance between high-frequency actions
Supports scalability through features like hoisting and pinning
Scales for widescreen layouts and other meeting types
Reduced misclick risk for the Leave button
The new experience
A unified and scalable framework
The new design introduces a unified control layout that reduces cursor travel and clearly separates core controls from secondary tools. Progressive disclosure moves less frequent actions into a structured overflow, lowering cognitive load without limiting access.
Built for scalability, the framework supports tools, apps, and agents without adding top-level complexity. The framework also extends consistently across meeting types like live events and calls, providing a consistent Teams product experience.
Enable power users to do more with personalization
A key learning was that users, especially power users, use different controls and workflows. We made personalization central to our scalability strategy: keep the default simple, but let users tailor their toolbar through drag and drop.
Quickly switch between tools with auto-hoisting behaviour
We also introduced interaction behaviors like hoisting, which allows users to switch between tools without repeatedly opening the More menu.
Making control states visible at a glance
Button states were introduced to clearly communicate whether a control is active or inactive, reducing ambiguity during live meetings. This makes it easier for users to quickly understand the status of key controls at a glance.
User impact: Faster access to high-frequency actions, reduced misclicks of "Raise hand" by 65%, improved confidence and clarity during live meetings
Product impact: Established a scalable IA for future meeting features, reduced toolbar bloat as the product evolves, enabled all other meeting types to build on top of this system
The new IA is actively rolling out to customers with a 92% WoW retention
Roll out decisions are being gated on WoW retention, adoption, and top task usage guardrail metrics rather than fixed dates to ensure quality
Measure perception over time
Since this change affects users' muscle memory, we ran an 8-week diary study to understand the transition period, how users adapted and how perception evolved after initial friction instead of relying on immediate reactions.Lead with visible user value
Users don’t care about product scalability. When introducing the update to users, the first-run experience needed to highlight immediate benefits so users understand why the change is worth adapting to.Ship changes in coherent packages
Frequent changes to a high-use UI can erode trust. We bundled updates so users experienced them as a single mental-model upgrade, rather than incremental improvements that change their workflow.
Overview
Building trustworthy AI agents for high-stakes collaboration
As Teams introduced more AI-powered features, users expect agents to "just do it" through natural language. But meeting actions are high-risk and socially sensitive, and existing UX patterns aren't designed for agents operating across private, shared, and system contexts. This created a gap: enabling agents to act on user intent while maintaining clarity, safety, and trust in collaborative environments.
A framework for agent actions in meetings
Rather than designing isolated scenarios, the team created a foundational platform and UX framework for AI agents in Microsoft Teams, launching with Facilitator agent. It enables agents to understand natural language intent and take actions, such as modifying meeting settings or managing breakout rooms, while maintaining transparency, user control, and trust.
The work focused on creating a scalable design infrastructure, including:
Principles for agent behavior in meetings
Reusable interaction patterns for agent actions
Built-in mechanisms for trust, visibility, and control (e.g., human‑in‑the‑loop)
Facilitator launches a poll on behalf of a user
Facilitator handles a high risk action with HITL
Facilitator handles failed commands with transparency
Led UX for the Agentic Commanding framework, defining interaction patterns for AI agents acting on behalf of users in Teams meetings
Designed trust, visibility, confirmation, and failure-handling models to safely translate natural language intent into real actions
Prototyped agent behaviors and tested interactions in live meeting scenarios
Established reusable agent interaction patterns adopted across multiple Teams scenarios
How we got there
Using vibe-coded prototypes to define and validate agent behavior
Traditional design to engineering handoffs didn’t work for agent interactions. Since timing, visibility, and social dynamics only emerge in live-meeting context, design and engineering collaborated closely, prototyping and testing ideas directly in code.
Instead of static specs, I:
Used Claude to vibe-code agent behaviors in prototypes
Iterated with the team based on real behavior and edge cases
Engineers built the aligned flows in product
Tested and refined interactions in live meeting scenarios
1. Define interaction flow
Not every action follows the same steps, but the Facilitator agent should feel consistent, natural, and predictable. To achieve this, I analyzed all the actions it can take on a user’s behalf and grouped them into categories based on shared interaction patterns. I partnered closely with engineers to account for cases where technical limitations might require different behaviors. From there, I defined a clear, unified interaction flow to ensure a cohesive experience across all actions.
The flowchart is an alignment tool across design, PM, and engineering, and is later translated into a markdown file for our coding agent.
2. Vibe-code real-time agent behavior to drive alignment
To demonstrate real-time agent behavior in meetings, I built dynamic, vibe-coded prototypes using Claude Code. I created key scenarios to simulate agent interactions, helping the team align, iterate, and converge on clear baseline flows for engineering to implement. These prototypes were built in Beat Manager, another vibe-coded tool that enabled me to script and play back agent behaviors in context, making complex interactions easier to communicate and validate with stakeholders.
3. From prototype to code: build and refine in product
We translated vibe-coded prototypes into production by partnering closely with engineering to implement aligned interaction flows. Instead of stopping at prototypes, we brought these behaviors into the live product, where we could test them in real meeting scenarios, uncover edge cases, and continuously refine the experience based on real usage.
The initial flowchart was translated into a markdown file that our coding agent uses to implement the correct behaviors.
Key interaction patterns
1. Auto‑execution vs. Human‑in‑the‑loop (HITL)
Debate: In an agentic system, doing nothing can be as harmful as doing too much. Meetings include actions with very different risk profiles, turning on captions vs. starting a recording vs. opening breakout rooms. HITL increases trust, safety, and auditability for high‑risk actions but adds friction and breaks the “magic” of agentic flow if overused.
Decision: Not all commands should behave the same; some must require explicit confirmation. The team defined a framework which balances risk (is it destructive to the meeting or just disruptive?) and confidence as deciding factors for HITL.
HITL framework
2. Transparency vs. Cognitive load
Debate: AI systems often over explain to build trust, but too much narration feels noisy. Minimal acknowledgment keeps meetings moving, yet too little visibility leaves users wondering "did it actually do anything?"
Decision: Users don’t need to see every internal step. The team defined a clarity model: show that the agent is working and clearly communicate the outcome, while hiding step-by-step reasoning unless something fails or requires intervention.
Modalities for agent to communicate outcome
3. Chat‑first interaction vs. UI fallbacks
Debate: Natural language is ideal for expressing intent, but poor for precision edits. Chat is fast and flexible but is cumbersome for complex configuration or revision.
Decision: Commanding starts in chat or voice, but hands off to UI when needed. Chat is used to initiate and confirm actions. UI supports inspection, editing, and fine-tuning.
Example of providing an off-ramp to UI instead of continuing the chat loop
4. Translating user intent to compound commands
Debate: Users think in outcomes (e.g., “secure this meeting”), not individual steps. Supporting outcome-based commands makes agents feel powerful and natural, but a single intent can trigger multiple actions, increasing system complexity and the potential for errors.
Decision: A single user intent may map to multiple actions. The system supports compound commands, but surfaces what will happen before execution when risk is high and keeps failures explicit and recoverable to maintain user control.
Example of user commanding with outcome instead of single intent
Designing agents requires prototyping behaviors, not just UI
Agent interactions depend on timing, context, and system logic that static mocks can’t capture. Building and testing prototypes in real scenarios was essential to shaping the right interaction patterns.Trust is the foundation of agentic UX
Agents that act on behalf of users must make their actions predictable and visible. Trust comes from clear outcomes, appropriate confirmations, and a consistent mental model of how the agent behaves.Intent-based interaction requires systems thinking
Users express goals, not commands. Supporting natural language intent meant designing a framework that translates a single request into coordinated actions while maintaining user control.
For teams working on AI meeting scenarios, static design mocks are no longer telling the full story
Static representation: Figma flows can't model live, authentic meeting interactions that are often non-linear
No behavioral simulation: Real-time user and Facilitator responses aren't depicted
High iteration overhead: Building and modifying full static meeting contexts in Figma is manual and time-consuming
Vibe coding with Claude Code and Github Copilot to brainstorm and build
The team outlined the problem and shared our goals with Claude to brainstorm solutions and shape a framework. We quickly vibe-coded a functional proof of concept, then split the work to execute on the two main components once the concept was validated.
Beat Manager: the surface where scenarios steps are stitched
Meeting Stage: the UI layer that plays the scenario back in real time
By iterating directly in code, we were able to test and validate ideas much faster than relying on static design artifacts.
Beat Generator for prototyping meetings end-to-end
Beat Manager helps teams generate complex user flows of AI in meetings with ease.
It enables feature teams to string together multiple steps or "beats" with clear control over the sequence of actions and dialogue to generate realistic meeting scenarios. It is designed to mirror real meeting dynamics, making it easier to present, iterate, and customize scenarios for diffrent discusssions
Step 1: Create the scenario
Start a new scenario in Beat Manager and add any necessary context for your scenario.
Step 2: Add "beats" to scenario
Add a "beat" for each step you want in your demo, including generative dialogue, agent responses cards, launching a poll, etc. Easily reorder beats, adjust their content, or change their types as your demo evolves.
Step 3: Play the demo
Hit "play" to start showcasing the demo using the meeting stage. You can pause, skip, or jump between beats as needed for flexible live demos.
Letting teams design at the speed of conversation
Beat Manager boosts collaboration by enabling teams move faster through dynamic iteraltion, and testing AI interaction models in Teams meetings.
Since the creation of the tool, 3 feature teams have leveraged it as part of their storytelling toolset, saving hours of time spent on updating mocks and focusing their time on building better experiences.
