Lucidspark whiteboarding

Lucidsparkthumbnail

Brief

Improvements to the core experience of the Lucidspark whiteboard tool.

Team

Design - Vishaka Nirmal

Product - Taylor Halversen

Toolkit

User research, experience design, UI design, usability testing

Problem space

Virtual whiteboards were all the craze as the pandemic hit. Lucidspark, a virtual whiteboard, was released in October 2020.

We learned quickly that virtual whiteboards lacked the structure that an in-person session would have. This board to the right showcases just how messy this can get.

My work in this space resulted in the Facilitator toolkit, a set of tools and controls to provide structure to a virtual canvas. 

PM_UX-VA-Working-Session_-Lucidspark-1

My role

I was the lead designer for this project, working alongside my Product Manager and designers on sister teams for feedback. 

The following work showcases my individual contributions throughout this project. 

CG100

General user interviews

Starting at Lucid, I hosted open 2-hour slots on my calendar each week, where new and existing Lucid suite users could schedule a 30-minute session with me.

In these semi-structured sessions, I would learn about their team’s goals in running virtual whiteboard sessions. I kept track of my notes on these sessions in Google Docs, seen here. 

These interviews sought to answer the question:

How might we provide the necessary structure to Lucidspark?

Screenshot-2023-09-08-at-11.48.38-PM

💡 General interview insight

In each user interview, I would see how participants were organizing and facilitating content on their boards. This quickly showed how Lucidspark boards were busy, hard to digest, and lacked focus.  

Facilitator interviews

Running a focused research effort, I set up sessions with 24 active facilitators in Lucidspark. These were users who created boards and shared their content with 5+ collaborators later on.

This is a snippet of my notes from these specific facilitator calls. 

Facilitator-NOTES-research-downloads_-Lucidspark

💡 Facilitator interview insight

I heard from these facilitator interviews that a major problem was keeping their content safe on the canvas. Participants would accidentally move items or delete content, distracting the session. 

Ideation

Thinking through the whole experience, I needed any facilitator-specific tools to live within our current constraints. 

I started ideating by looking for the best entry point for any features. Where would facilitators look for these tools? How would they want to access them?

Screenshot-2023-09-08-at-10.56.16-PM

Technical constraints

From a technical side, we hit a constraint. The Lucid paradigm of board collaborators included four permission levels. 

To fully create a facilitator experience, we wanted to create a new, higher role that a board collaborator could claim. However, based on large architecture questions and development cost, we settled on creating the facilitator role as an opt-in for those at the current highest permission level (edit + share). 

FB0

Initial concepts

Along with my Product Manager, we devised a strategy to tackle a set of tools and controls that would provide value to facilitators as an opt-in experience.

Our goals were to:

  • Provide tools to direct focus
  • Provide controls to keep content safe

This flow shows the opt-in process I designed to mark yourself as a facilitator. Once opted in, you can access all the tools and controls necessary.

Nov-30-2023-19-42-07

Usability testing

I conducted 5 qualitative interviews with facilitators to understand how my early designs for canvas tools might assist their usage of Lucidspark. 

For each focus-directing tool, I usability tested the concept, understanding likes, dislikes, and questions that came up from their interactions with the prototype.

Screenshot-2023-05-23-at-7.22.43-PM

Final designs, tools

Laser pointer:

The Laser pointer tool allows facilitators to create temporary annotations on the board, drawing attention to a specific piece of information. Each drawing erases itself, making sure the board doesn't stay cluttered. 

For this tool, I designed the look and feel of the annotations, while also providing timing and easings to a developer for the erasing animation. 

Nov-30-2023-19-42-35

Broadcast message:

Shown to the right, the Broadcast message allows facilitators to send a quick message out to the board, shown in a notification pop-up. This would allow facilitators to bring attention back to the group, especially if participants were heads down working on a different part of the board. 

Nov-30-2023-19-43-18

Take the lead:

Take the lead allows facilitators to quickly present, bringing everyone active on the board to their view. This tool was positively received by usability testers as a quick way to show participants their content.

In this example, the facilitator on the right takes the lead to show the participant on the left their current view. 

Nov-30-2023-19-43-40

💡 Previous general interviews insight → ⚓️ Anchoring design requirement

General user interviews showed a lack of focus on Lucidspark boards. The goal of all three of the facilitator tools is to create spaces for facilitators to direct attention effectively. 

Final designs, controls

Controls:

I designed a set of facilitator controls that allow users to lock down specific features on the virtual whiteboard. This provides an extra layer of security for items on the canvas, like locked content or hidden frames. 

In this example, once a facilitator has added controls to locking, only those designated as facilitators can lock and unlock objects on the canvas. 

Nov-30-2023-19-44-10

💡 Previous facilitator interview insight → ⚓️ Anchoring design requirement

Facilitator interviews had shown the importance of keeping content locked down and safe. The solution we created needed to provide controls for facilitators to manage the logistics of their session easily.

Development

Throughout my time at Lucidspark, I worked closely with engineers to understand and discuss feasible solutions for the best possible user experience. I strive to make design handoff as collaborative as possible. This image is an example of these sessions, with a mix of mock-ups and visual flows to depict the user experience.

Once items were discussed in a technical meeting, I worked to address any open questions, edge cases, or missing mocks. Then, I translated final designs to Jira tickets, where the team could estimate tasks.

Screen-Shot-2022-02-11-at-4.51.53-PM

Reflections

Release

Parting thoughts

© Vishaka Nirmal 2023