Workshoppr

Workshoppr unlocks your team's superpowers! Use our fantastic workshops like "the 1-day design sprint" to give your team a headstart and get decisions made fast.

Comment

Inspiration

After working hard on a previous project, I realised that the power of digital whiteboards are not in the whiteboard themselves, but the templates that come with them. These templates allow facilitators, scrum masters, agile coaches, tech leads, product owners, designers and just about anyone else to conduct remote workshops and support their teams in making decisions better, faster & cheaper for their projects. I saw firsthand how remote design sprints had turned teams around in their startups and product creating and prototyping process and could be just as good as their onsite brothers. So I decided to to try and replicate some of the most powerful workshop templates for use in Monday.com to help teams get back to collaborating and delivering value as a team.

What it does

Workshoppr is an embeddable whiteboard that focusses on the tools needed by workshop facilitators. As such it offers : *Infinite zoomable working canvas *Fully formattable geometric shapes (rectangle, circle, triangle) *Skeuomorphic formattable post-it notes in different shapes *Formattable text areas *Customisable lines and freehand drawing tool *Embeddable images *Lines and connectors *Slides with automatic navigation *Embeddable youtube videos *Embeddable links and hotspots *REMOTE COLLABORATION IN REALTIME *Undo & redo *Saveable to local and cloud files *A UNIQUE DESIGN SPRINT TEMPLATE

How I built it

All existing solutions seemed to rely on either DOM manipulation or canvas, Miro for example always makes my laptop fan go crazy and get really hot if I leave the tab open too long. I wanted to make sure, Workshoppr was performant and not resource-heavy, so I decided to use browser native SVG to do the rendering it turned out to be a great choice, coupled with using react and the virtual dom as a control plane to manipulate and manage events, the two came together in a really elegant way.

Challenges I ran into

The sheer amount of features present that needed to be built, was the biggest problem. Then creating an architecture that allowed for a decentralised approach that enabled putting the functional logic as close to the components as possible. Getting the resizing, selection and interaction events all working together in a harmonious non-spaghetti way was super hard. After performance/load testing it with a lot of elements, I had to introduce some performance modifications to downscale the SVG rendering when there are a lot of elements on screen at one time. The realtime sharing was also tricky to engineer in a way that sharing events between machines did not feel clunky, but after some tweaks and performance modifications that also turned out quite well.

Accomplishments that I'm proud of

The performance modifications really worked and were tested quite hard with the design sprint template. The design sprint template itself I'm really proud of, it took a lot of effort to go through existing templates and reduce it to it's bare minimum and then test it on friends and family.

What I learned

A ton about making workshops very lean and a ton about building fully-fledged front end applications.

What's next for Workshoppr

More templates! Including :

Strategy Sprints, Marketing Sprints, Tech Sprints, Lean Inceptions, Lead discovery, Wardley maps, Team trust and team charters so so many more...

There's also still a long long backlog of features the big ones I'm looking forward too now are :

*Beautiful timers *Guides *Mini canvas map *Comments *Tables *Presenter mode & attention management *Voting and quizzes *Export to image *Import PDF *Import from Miro *Import from Mural

Actually, though, the most important thing I need to do next is write a giant automated UI test suite to make sure all the features still work how they are supposed to...

Built With

Share this project:

Updates