Hyperflow Canvas

Hyperflow Canvas was speculative exploration for integrating spatial canvas features on top of Hyperflow Library, allowing users to arrange and directly manipulate media and information in their workspace (as well as new items imported onto the canvas).

At the time (and mostly still today), most whiteboarding tools shared a few major drawbacks: they tend to become chaotic and unwieldy over time; the layout of items on the canvas is rigid and hard to dynamically rearrange; finding and navigating to items on the canvas is limited (which among other things leads to unnecessary asset duplication); they don’t support a wide range of media types.

So the goal was to investigate how we could design a ‘best of all worlds’ approach fusing the structured organization of Library with the freeform nature of Canvas, with the eventual aim of supporting creative workflows from the ideation stage all the way through to presentation.

As with Library, we explored multiple use cases and user flows in Figma to validate demand - the main ones are expanded upon below, and in this demo video (also 100% Figma).

In addition to drag and drop, we prototyped several user flows for importing media onto the canvas, with a special attention paid to helping users reuse and repurpose assets already in their Library (and maintaining bidirectional links between the original asset and the instances of it on the canvas(es)).

Users could also embed Collections on the canvas, and drag items from an embedded Collection onto the canvas.

Another direction we went deep on was allowing users to embed live webpages onto the canvas, and both manually drag and drop items from a webpage onto canvas ...

... bulk export all the media from a webpage onto the canvas ...

... as well as open anchor links in a new parallel block, allowing users to see all their open tabs in a single view and display their browsing history in a more visual format.

One of the main motivations for exploring a canvas-based UI was to be able to support more creative workflow tasks beyond the ‘capture, organize, annotate, search’ use cases that were covered in Library.

We focused on the early stages of creative workflows (research, ideation, conception, development and preproduction etc) and specific workflow tasks like collecting research materials and creating moodboards, shot lists, and other creative artifacts.

Currently many of these tasks are performed across multiple standalone apps (which usually requires a lot of repetitive importing/exporting and context switching between apps), so the idea was to try and bring some of the capabilities of those apps into Hyperflow and allow users to directly manipulate and transform content without leaving the canvas.

Examples shown below: extracting color palettes from images; separating and extracting audio from videos; extracting frames or clips from videos (individually or in bulk); extracting transcripts from audio; extracting text from images; extracting pages from PDFs etc.

We also investigated how we could use 'block styles' to visualize content in different ways depending on the media type and the users' workflow tasks.

As mentioned above, one of the problems inherent with canvas apps is that projects tend to become very messy and chaotic as they grow, and although items on the canvas aren’t fixed in place, it’s almost impossible to quickly rearrange them (which is useful for reorienting and recontextualizing projects and ideas as they evolve).

So we spent a lot of time thinking of ways of making the canvas more dynamic and allowing users to easily cluster, sort, group, and reorganize items, starting with the simple alignment capabilities found in most canvas apps …

... and then developing a more advanced 'Smart Arrange' feature that extended the concept of database views to a canvas UI, allowing users to reorganize items into several different configurations based on properties like creation date or media type ...

... or content-based features like dominant color.

Finally, 'Containers' were a way of localizing Smart Arrange functions to a specific region of the canvas (as well as enabling several other organization and collaboration use cases).

Another problem with canvas apps is the inability to easily find things on the canvas, especially on larger projects with lots of items.

We prototyped a bunch of different options for searching and navigating the canvas, including a panel combining the Table of Contents (ie 'layer stack') and Canvas Map ...

... which also doubled as a search UI (including the ability to cycle though duplicate instances of the same item on the canvas).

The Table of Contents/Canvas Map panel mentioned above was one of several we explored, including a dedicated Library/Inbox panel (for quickly adding existing items to the canvas), a Preview/Inspect panel (effectively embedding the functionality of the Quick Look modal in a panel); and an AI Assistant panel (for performing common AI actions and entering custom prompts into a chat UI).

Like with many other canvas apps, Panels could be hidden or resized based on user preference, as well as pinned/unpinned to the edges of the screen.

We also experimented with a sidebar UI for enhanced multitasking and focused web browsing (to compliment the spatial browsing features mentioned above).

Send Tom Phillips a reply about this page