Brightidea · Whiteboard

Time Period

2021-2022

Disciplines

Vision, Strategy, Product Design, Product Management, UX, User Research, Market Research, Interaction Design, Product Launch (0-1)

Bridging the Brainstorm Gap for Enterprise Innovation

Mockup of sticky notes in Brightidea Whiteboard v1

Project Background

The Problem

Innovation managers and design facilitators struggle to manage ideas generated by their teams during brainstorming sessions. Popular digital whiteboards (Miro, Mural, FigJam, et al) are isolated in silos, making it difficult to track, evaluate, and integrate ideas into a formal enterprise innovation pipeline.

The shift to remote work during the pandemic has exacerbated this problem, increasing reliance on digital collaboration tools.

Further, employees face friction to submitting and collaborating on ideas within existing Brightidea workflows, hindering participation and execution.

Before Whiteboard, ideas were created via a form, and viewed in a process
Before Whiteboard, ideas were created via a form, and viewed in a process "pipeline" or as cards on an "idea board". This works well for activities like hackathons, incubators, and optimization challenges. However, compared to brainstorming on a whiteboard, this is high-friction, slow, and implies that ideas are more fully-formed (e.g. including images).

The Business Case

Brightidea’s platform excells at asynchronous idea management but falls short for real-time collaboration. Competitors are rapidly capturing market share in this growing segment, although they do not offer complete end-to-end innovation management solutions. This gap is an opportunity to expand deeper into the organization.

Role

As Product and Design Lead, I worked directly alongside the CEO to define product vision, strategy, and UX architecture. I then led design and development for the zero-to-one release, plus two quarterly updates.

Duration

  • Initial vision, strategy, and early architecture: ~3 months (parallel with other projects)
  • Core development with dedicated team (v1 release): 6 months
  • Iteration: daily bug fixes, weekly UX updates, and feature releases quarterly
A diagram depicting the team configuration and evolution over the course of the project.
Planned team evolution over the course of the project.

Starting at the End

Vision

We aimed to create an intuitive and powerful real-time whiteboard experience, seamlessly integrated with Brightidea’s platform, enabling teams to brainstorm effectively and manage the entire innovation lifecycle in one place–from ideation to execution.

An aspirational mockup established team alignment and direction, visually depicting table stakes functionality along with various platform integrations.
Aspirational mockups established shared direction and team alignment, visually depicting table stakes functionality along with various platform integrations.

Process

Discovery & Research

Market research was conducted to analyze the digital whiteboard market. This highlighted rapid growth driven by the rise of remote work in the pandemic, and the increasing demand for real-time collaboration tools.

Market insights provided by TrustRadius.

Competitive analysis enabled us to evaluate existing players like Miro, Mural, Microsoft, and FigJam. While recognizing the commoditized-but-essential nature of many whiteboard features, the analysis honed in on identifying opportunities for differentiation through integration with our existing platform.

The key differentiator was Brightidea’s robust enterprise functionality and its ability to connect brainstorming to all other innovation activities across an organization. This was further supported by analytics, reports, and access controls. We had opportunity to capitalize on a common painpoint: what happens after a brainstorm?

Screenshot of competitive analysis.
Competitive analysis was useful for identifying the top players and their strengths, weaknesses, capabilities, marketing approaches, and pricing. This also led to opportunities for differentiation.

Importantly, we would also be competing against offline, so we went back to analyze how in-person brainstorming sessions were being conducted. Specifically, the LUMA methods came up frequently interviews and requests. I am a LUMA Certified Practitioner, so was able to provide insights into those tools and needs.

Planned team configuration and evolution over the course of the project.
A lot was learned from observing, mapping, and analyzing offline brainstorming sessions. At a high level, two core insights emerged: (1) it was critically important for facilitators to be able to run a full workshop within our solution, and (2) if we could deliver on the value prop of "what happens after the session" we would be well positioned to differentiate in the market.

User interviews with innovation managers and users of Brightidea products uncovered significant pain points around capturing, managing, and tracking ideas generated in brainstorming sessions.

Customer quotes illustrating pain points around connecting Brightidea with existing digital whiteboard solutions.
For example, innovation managers were requesting integrations with competitors like Miro, indicating a strong need for real-time collaboration. However, deeper probing revealed that a fully connected solution within Brightidea would provide far greater value than a simple integration, by streamlining the entire innovation process.
An aspirational mockup, visually depicting table stakes functionality like sticky notes, collaboaration, drawing tools, shapes, reactions, and various property controls along with deep Brightidea platform integrations
We made the decision to focus on two core Brightidea personas for Whiteboard v1, and refined out understanding of these customers through user research. We would later focus on more specialized personas.

Finally, data analysis tapped into Brightidea’s Idea Space community to glean any additional feedback or unmet needs. We use Brightidea to build Brightidea, and this is where we collect ideas, feedback, and suggestions from our users. We coupled this with basic ease-of-use metrics from existing products to understand how users were currently managing ideas and where the most significant gaps existed to speed up the idea-capture process.

Definition & Strategy

I worked closely with the CEO to define the product vision, strategy, and key differentiators as described above. This collaborative process aligned on target users, core features, and business goals, ensuring that Whiteboard would address both user needs and strategic business objectives.

Defining the MVP: Valuable integration with the existing platform was a primary focus. We prioritized two sets of features for the initial release:

  1. “Table stakes,” commoditized whiteboard functionalities necessary to compete in the market.
  2. Innovative features that emphasize and leverage Brightidea’s strengths or unique capabilities.
A mindmap capturing potential requirements from a collective brainstorm.
A mindmap I built, capturing potential requirements from a brainstorm session.

Roadmap: We developed a product roadmap outlining swimlanes of functionality for the initial release and subsequent iterations, demonstrating a clear path for building upon the MVP and incorporating user feedback in all areas of the product.

Early Architectural Work: I collaborated with the engineering architect during the foundational work, ensuring the technical architecture would support the product’s performance and scalability requirements, as well as the featureset.

Design & Development

Design Shaping: There was much divergent exploration in this phase by means of sketches, wireframes, and Figma prototypes, exploring different approaches to application layout, individual features/tools, and user flows.

Sketches of potential layouts and interfaces for a whiteboard application.
Early sketches show potential layouts and UI, to aid in shared understanding during directional and trade-off discussions.
Flows and interactions for Whiteboard sticky notes.
Sketches illustrate options for basic interactions and user flows involving sticky notes, and connecting them to Brightidea.

Execution: Once the foundational directions were set, we brought on a pod of engineers, another designer, and a product manager, establishing a strong team to execute on the product vision.

A myriad of mockups and explorations in Figma.
A myriad of mockups and explorations in Figma.

Collaborative Design Process: the design process was highly collaborative, involving the CEO, a product manager, the engineering lead, and a second designer. We also interfaced with another product manager and engineering leads for the platform integrations.

A book could be written of Brightidea’s inhouse “Design Review” process, so suffice to say it is open, rigorous, meritocratic, and iterative–all to ensure that “the best ideas win.” We practice what we preach when it comes to collaborative innovation and a culture of ideas.

Since this process was entirely remote during the pandemic, we relied on Brightidea and Figma for everything including idea tracking, research, roadmapping, shaping, wireframing, mockups, prototypes, and design reviews. This accelerated our learnings and the development of a realtime collaboration tool of our own.

Dogfooding & Internal Feedback: We became heavy users of Whiteboard internally for our own product development, replacing Figma for brainstorming, research, and strategic planning. This dogfooding provided valuable real-world feedback and helped refine the product based on internal usage patterns and acute familiarity with painpoints.

A demo showing stickies, shapes, texts, marker, stickers, images, and smart tools
An early version of Whiteboard demoing the basic primitives.

Beta Testing with Innovation Consultants and Customers: We engaged Brightidea’s innovation consultants to use the product in beta stages, gathering feedback from their perspective and from early-access customers participating in guided sessions.

An early build showing ideas linked from the Brightidea platform, and demoing relative evaluation of those ideas on the fly using the
An early build showing ideas linked from the Brightidea platform, and demoing relative evaluation of those ideas on the fly using a "Smart Matrix."
An early build demoing the basic multiplayer experience and social interactions with stickers.
An early version of the basic multiplayer experience and social interactions using stickers and drawing tools.

Design Details

Getting the interactions right on the canvas took extreme focus. While establishing a vision and the high-level design was exciting, my most enjoyable moments were working with the engineering lead to define and perfect the myriad of interactions on the board. This is one of those areas of design that users will take for granted if done well, but will completely break the feel of product when done poorly.

I’ll keep it brief, though there were innumerable compounding variables including:

  • Navigation and selection: including mouse, keyboard, and trackpad/touch, as well as combinations like shift+drag
  • Object states: like selected, hovered, focused, active, and further complicated by multi-player states
  • Object interactions: for example resize, rotate, scale as well as affordances for changing states and modes. The hotspots also needed consideration as to where they appear on an object and how they behave around neighbors and at different zoom levels.
  • 3-dimensional hierarchy: the whiteboard seems 2D, but exists as a 3D space, which can be illustrated with zoom. Objects are stacked on the canvas (e.g. one sticky overlappying another), and UI is also stacked in the z-direction, above the canvas. Some effects fall in between conceptually–like object selection, which feels best when it “burns through” by displaying non-physically above all the canvas objects, regardles of the selected object’s index.
  • Sizing and scaling: getting the relative sizes right with appropriate scaling factors also proved to be a challenge. Another neat note about this, is considering which classes of objects always stay the same size on screen vs. scaling when the canvas is zoomed. For example, grab handles stay the same size on screen regardless of zoom factor, but disappear when a certain threshold is reached where they would become impossible to use.

Please forgive the lag in the recording below, illustrating a few of these considerations:

A demo of in-canvas object interactions and hotkeys.
A demo of in-canvas object interactions and hotkeys (note: mouse clicks are annotated with a cyan circle).

Launch & Iteration

Go-to-Market: Our marketing team interfaced with our incoming Head of Product to develop launch materials, which I helped to support as far as capabilities, assets, and access. GTM leveraged various channels to promote Whiteboard to existing and prospective customers. The launch included blog posts, a press release, and targeted outreach. Check out the official launch video telling the Brightidea Whiteboard story, crafted by the marketing team:


Post-Launch Feedback: We continuously collected user feedback through various channels where I often engaged directly with users–including Brightidea’s Idea Space, customer support interactions, and calls with users.

Customers submitted feedback and enhancement requests via the IdeaSpace community (which is itself a public instance of a Brightidea Idea Box).
Customer quotes submitted as Whiteboard feedback.

Ongoing Insights & Iterative Improvements: In addition to using the roadmap as a guide, we implemented key features in subsequent releases, such as “Follow” and “Huddle,” based on user feedback and insights gathered from usage data. These features addressed specific needs related to remote collaboration and innovation management.

Technical Decisions: When we first began thinking around this project circa late 2020, many of the realtime collaboration apps felt laggy, glitchy, and clumsy to use. Upon investigation, they were found to use common web-based technology that was not originally designed to be pushed to these limits. Being entirely user-centric in our decision, we established that our product must transcend these constraints. Dozens of people needed to be able to collaborate on hundreds of ideas, all while tapping into the power of the platform (i.e. Smart Objects).

Fortunately, we found inspiration in Figma, which was an obvious outlier at that time, and we made the decision to build Whiteboard on WebAssembly using Rust and WebGL after a bit of testing and prototyping by engineering. This was critical to providing the multiplayer UX that we needed, as well as the infinite canvas and smart object capabilities.

Results

Quantitative

  • Rapid Adoption: Brightidea Whiteboard saw immediate success, with over 1,100 new whiteboards created within the first four months, demonstrating strong product-market fit and seamless integration into the platform.
  • Sustained Usage: Consistent daily creation of new Whiteboards indicates that the product provides ongoing value and has become integral to users’ workflows.
Planned core team make up and evolution over the course of the project.
Whiteboard showed sustained adoption and use over the first few months, and also unlocked qualitative business impact.

Business Impact

  • Complete Platform and Improved Retention: Whiteboard filled a critical gap in Brightidea’s offering, providing a complete end-to-end innovation management solution. This has led to improved customer retention as well as expansion within existing accounts.
  • Enterprise-Grade Differentiation: The unique ability to connect brainstorming to all other innovation activities, metrics, analytics, and access controls sets Whiteboard apart from competitors and solidifies Brightidea’s leadership in the enterprise market.
  • Positive Reception: The launch garnered positive feedback from users, highlighting its inclusive nature, and significant industry attention through press coverage, validating its value proposition.

This new and fully integrated product completes Brightidea as the only platform you need to manage the entire innovation lifecycle, from initial spark of an idea to measuring implementation impact.

Various UI elements floating above a whiteboard

Reflection

Learnings & Takeaways

  • Focus on the user: By listening to customers and always digging deeper to their underlying needs, we were able to reliably derisk and inform design decisions while ensuring we were always delivering real value.
  • Leverage your strengths: Integrating real-time collaboration with the broader enterprise platform was crucial for differentiating our product in the market and delivering that value to our target personas.
  • Embrace “dogfooding”: Using your own product internally provides invaluable insights and helps refine the user experience much faster. Usability and quality-of-life requests are much more easily sold to cross-functional stakeholders.
  • Technology serves the user experience: The decision to go with WebAssembly was exciting for engineering, but more importantly offered significant advantages for building the high-performance, scalable solution our users needed.
  • Team leadership in a dynamic environment: Building and leading a new team requires adaptability, clear communication, perseverance, and a strong focus on collaboration.

Design Challenges

  • Balancing a rich feature set with simplicity and ease of use: Prioritizing essential features for the MVP while ensuring a user-friendly interface was a key challenge.

  • Ensuring seamless integration with the existing platform: Creating a cohesive experience between Whiteboard and the broader platform required careful planning and close collaboration between teams.

  • Competing with established players in a crowded market: Differentiating Whiteboard from existing solutions required a strong focus on unique value propositions, such as deep platform integration.

  • Adapting to the rapid shift to remote work: Meeting the evolving needs of remote teams demanded agility and a willingness to iterate quickly based on user feedback.

  • Technical Implementation: Bridging the gap between the robust technical foundation and the desired user experience presented unique challenges that required creative problem-solving.

Product summary:

  • Real-time collaboration (shared cursors, follow mode, huddles)
  • Standard whiteboard tools (sticky notes, shapes, text, images, freehand pen)
  • Reactions and stickers for engagement and lightweight feedback
  • Pre-built templates for jump-starting innovation activities
  • Synchronized activity timer
  • “Smart Matrix” for idea evaluation and stage-gate routing
  • Platform integration (seamless idea creation, unified tracking, metrics, and analytics)
  • Straight-forward sharing and access controls
  • Zoomable User Interface (ZUI) for both detailed work and broad context views
  • High performance and scalability, offering users an infinite canvas and massive multi-player capability
Various UI elements floating above a whiteboard

Thanks for reading! Contact me to discuss opportunities, or learn more about Brightidea Whiteboard.