My Role
Lead Designer
Owned end-to-end design, from flows and, UI testing and instrumetation
The Team
1 Lead Product Manager
3 Senior Software Engineers
1 Intermediate Software Engineer
Design Reviewers from adjacent teams
The Punchline
This project, focused on resolving the pre-join media error friction in Coconut Connect, yielded significant positive results across business metrics, user experience, and team leadership, as outlined below
Business Impact: Slashed the primary metric - 'unrecovered media errors' - by 40% in the first 8 weeks post-launch. This directly reduced the rate of missed client appointments, a primary driver of lost revenue and rescheduling costs for Coconut's financial institution customers.
Product/User Impact: Established a new, intuitive standard for device selection and media error recovery. This new flow was designed to guide first-time bank customers (often with low tech-confidence) to successfully join their call, even if they accidentally denied a browser permission.
Leadership Impact: Led a cross-functional diagnosis with Product and Engineering to pinpoint the true underlying cause of the errors. By shifting the team from a vague redesign to a hypothesis-driven solution, we delivered this high-impact fix in a single engineering sprint.
The Challenge
The Business Stakes: A "No-Show" Epidemic
The project was triggered by a rising and contradictory stream of CSAT complaints. Financial advisors reported that clients were "no-showing" to high-value appointments. Simultaneously, bank customers complained that advisors "never showed up" for the call.
Our Pendo data showed a high rate of 'unrecovered media errors' in the pre-join flow. A deep dive into DataDog logs confirmed our hypothesis:
First-time bank customers, confused by browser permission prompts, were accidentally denying access.
The error messages were "hard to find or interpret", trapping them on the pre-join screen.
By the time they recovered, the advisor, believing they were a "no-show", had already left the call.
Each missed appointment was a lost revenue opportunity, a rescheduling cost, and a major blow to the trust our clients (the banks) were building with their customers.
The User & Team Pain
The problem created a high-friction, no-win situation for both users:
The Bank Customer (First-Time User): "I'm on time for my loan appointment, but the 'allow' button was confusing. Now I'm stuck, I can't get in, and I look unreliable."
The Financial Advisor (Power User): "My client is 5 minutes late. They are clearly a no-show. I'm leaving to start my next meeting."
The Approach: Facilitation Over Isolation
Your Core Challenge
The core challenge was twofold: we had a high-stakes, revenue-impacting problem, but an immovable 1-sprint engineering constraint. We couldn't afford a single wasted day of design or development. Designing a "perfect" solution in isolation, only to find it was technically unfeasible, would have guaranteed failure.
My first step was not to design, but to facilitate. I organized a mini design sprint and brought the two software engineers to the brainstorming session from day one.
Here's a screenshot of ideas that were generated in the team brainstorming session.
Assembling the Team
This collaborative kick-off was a deliberate strategic move. Bringing engineers in before I had firmed up designs was essential:
To De-Risk the Timeline: It allowed us to immediately identify technical constraints and high-scope risks. This ensured our constraints were "baked in" from the first draft, preventing a major "back-and-forth" later.
To Build a Better Solution: I’ve learned that developers, with their diverse skills (like video game design or fine art), bring unique perspectives and mental models. This collaborative problem-solving builds a stronger solution and a shared sense of ownership that lifts the entire team's engagement.
Navigating the Key Debate & Trade-off
This early alignment was critical when we faced our biggest debate: where should the solution live?
Option A: The "Notify Staff" Feature. One idea was to build a new feature that would alert the in-call advisor that a client was stuck in the lobby.
Option B: The "Fix the Root Cause" Hypothesis. My hypothesis was to focus 100% on the pre-join screen, empowering the user to solve their own media errors and join the call successfully.
As the design lead, I advocated strongly for Option B.
I argued that Option A was complex, would have broken our 1-sprint budget, and, most importantly, it didn't solve the user's actual problem. An advisor who is notified "your client is waiting" is great, but the client is still trapped by a confusing UI and a media error.
We made the pragmatic trade-off to shelve the in-call notification. This decision focused our entire team's effort on the true point of failure: the pre-join screen.
The Work: From Strategy to Pixels
Following our "fix the root cause" hypothesis, I moved into a rapid design and validation phase.
Initial Concepts & Competitive Analysis
My first step was a deep dive into existing solutions, analyzing how tools like Google Meet and Zoom handled this exact problem. This analysis revealed two key patterns:
Prevent or Pounce: The best-in-class tools either prevented permission errors with focused, single-task screens, or they pounced on them with "loud," unmissable error states that guided recovery.
Visible Selectors: Device selection was never hidden. It was a highly visible, first-class control in the pre-join screen, allowing users to see and test their devices.
Competitive analysis screenshots of Google Meet and Zoom's pre-join flows
This analysis also led to my first pragmatic trade-off. While some tools had elaborate, multi-step testing features, I rejected that complexity. For our 1-sprint scope, we needed to focus on a simple, reliable fix, not a feature-rich one.
The Breakthrough Solution: Clear, Local, and Confident
I translated these insights into a new, simplified pre-join component that addressed the old design's core failures.
The 'Before' pre-join screen, annotated to show key problem areas
The solution wasn't a single feature, but a system of three small, high-impact changes:
Clear, Local Error Messages: The hardest part of the design was the error banner. I focused on getting the language just right—simple, non-technical, and calm—to guide a low-confidence user to the solution. We placed it directly above the controls, locally at the point of failure.
Prominent Device Switcher: We elevated the microphone, camera, and speaker selectors to be first-class controls, so users could see and change their active device in one click.
Always-Visible Sound Meter: This was a "low-lift delighter" from the engineering sprint. It served a critical purpose: giving users immediate, visual confidence that their microphone was working before they joined the call.
Automatically focused users on the browser permissions immediately the page loaded and provided in-app guidance on what to do
Co-located the error banner and the device switcher making their relationship clearer
Added a sound meter and exposed the device switcher to make it easier for users to find.
The Outcome
Business Impact
This 1-sprint, hypothesis-driven fix was a resounding success.
We slashed the primary metric, "unrecovered media errors",by 40% in the first 8 weeks post-launch.
This directly addressed the "mirror-opposite" CSAT complaints, reducing the rate of missed client appointments and saving downstream revenue and rescheduling costs.
By targeting the root cause in a single sprint, we delivered this value at a fraction of the cost and risk of a full, multi-sprint redesign.
A Pendo Screenshot of the 40% Drop in media errors after this feature shipped
Product & Team Impact
The most significant outcome was the shift in our team's approach to problem-solving.
For the Product: We delivered a reliable, intuitive pre-join flow that empowered first-time users to solve their own media issues, enabling more appointments to start smoothly.
For the Team: The "mini design sprint" I ran became a scalable blueprint for our team. This highly collaborative, cross-functional kickoff is now being adopted by other designers as the new starting point for their projects, changing how we build and de-risk our work.
Lessons Learned
This project was a powerful reminder that pragmatism and small scope can beat a full redesign.
My biggest takeaway was that a leader's job is to anchor the team to a measurable outcome, not just a set of features. By framing our work as a "Hypothesis first, then UI" challenge, we resisted the urge to over-engineer a solution.
This solidified my belief in using facilitation as a core design tool. The mini design sprint and the "weekly snapshots" we shared with PM and Eng weren't just for collaboration; they were the engine for getting buy-in, building shared ownership, and maintaining focus. This approach proved that a small, aligned team can move faster and deliver more value than a large team pulling in different directions.
