Kaitlyn Zou
Design technologist passionate about digital experiences that enhance simplicty and human connectivity.
Let’s make something together!
Design technologist passionate about digital experiences that enhance simplicty and human connectivity.
Let’s make something together!
JigJam~interactive computing
A multi-user whiteboard where users can collaboratively add, delete, and modify graphics on a canvas in real time.JigJam~interactive computing
Type
Project
Project
Timeline
Nov 2023
(3 weeks)
Nov 2023
(3 weeks)
Skills
Frontend, visual design
Technologies
p5.js, Adobe Illustrator, Procreate
p5.js, Adobe Illustrator, Procreate
Joshua Le, Victoria Liu
Concept
Figma started as a simple multiplayer collaboration tool for UI/UX designers over a decade ago, but has quickly evolved into the go-to whiteboarding service for software engineers, product managers, creatives, students, and all individuals looking to easily share their vision with a team. Figma has now transformed into a unicorn startup with their aim being to easily create spaces for teams to collaborate, design, and share their ideas/visions. With this, we wanted to see how far we could go with replicating one of their services, FigJam - a playful "rough draft" storyboard that allows users to easily draw, post, and illustrate ideas quickly with the use of pen tools, shapes, sticky notes, comments, text, stickers, etc.
Our remake is called JigJam. It is a multi-user whiteboard where users can collaboratively add, delete, and modify graphics on a canvas in real time. When first opening JigJam, users are prompted to enter their name. Users then advance to the home screen with options for different “rooms” or canvases to edit. Once selecting a room, users will advance to the multi-user canvas.
Features
- Pen tool: draw using different colors and different stroke weights
- Sticky notes: drag and drop sticky notes around the canvas, add text within sticky note
- Stickers: choose from library of stickers(doodles, foods, reactions, words), place and resize
- Text: create text and customize with different font sizes, colors
- Multiplayer interaction: 2+ players can edit the document at the same time
- Pointer tool(select objects) vs. hand tool(grab and move canvas)
- Draggable Canvas
- Record player with 4 instrumental track options
Contribution
Draggable canvas: Similar to FigJam, we have a draggable canvas. The user can switch between pointer and hand mode by clicking the corresponding icons in the bottom of the toolbar. Pointer mode is used for adding and modifying graphics and hand mode is for navigating around the canvas. In hand mode, you can drag the canvas around to access all areas of the canvas. This allows for more whiteboard space to add graphics and text. This feature is not multi-user and is specific to each individual, so everyone can move independently around the canvas. Like FigJam, we made the viewport of the canvas fill the entire width and height of the window size.
User Interface: I worked on
Stickers:
We worked on wireframes for the landing page(lobby showing previews of the available rooms) and main sketch page(tools, document + navigation elements). We’ve begun to implement the design on the main page!
Development
Developed using p5.js. Artwork created using Adobe Illustrator and Procreate.
Future Development
- FigJam has a fun feature that allows you to high-five other players currently on the canvas when your cursors are nearby and you are both holding the “H” key. We’d love to implement a similar interaction!
- Expand on the range of tools offered. Figma has other tools such as the drawing tool or the washi-tape tool.
- Expand on existing tools by adding more customization options like color picking and more resizing mechanics (like snapping, retaining proportions with shift, etc). We could also allow users to rotate the graphics and arrange their layer order to customize what will appear on top.
- With our current draggable canvas, we would like to make it zoomable using additional off screen graphics buffers.
- While we didn’t get to it, we originally wanted to have multiple rooms for users, and state management options that allow you to save, undo, export, etc.
- There are also unlimited possibilities with adding widgets like the ones featured on FigJam, which include things like tools and games.