product design
Co-designing a tool that helps visual thinkers map out their digital spheres.
Interspace is a visual information mapping tool that helps visual thinkers easily access and discover webs of information they gather for themselves and others. Users can log onto any of their social medias from Interspace to combine, organize, and re-contextualize their created or collected content all in one space.
I co-led design for this project, executing and developing a 0-1 product roadmap and brand identity- conducting user and market research to inform product vision, key features, information architecture and user experience.
Timeline
November 2023 - April 2024
Subjects
Design systems
User research
Art direction
Role
Lead product designer
preview
The problem
Information Overload.
The internet and digital technologies, especially products like social media, have made it incredibly easy and convenient to discover and collect information online.
Users consume
up to
74 GB
of information per day
Users retain
only
25%
of information consumed
Users integrate
less than
1%
in a meaningful way
Creatives, researchers and students
remain no outliers and are massive contributors to the generation and gathering of online content, stocking inspiration into bookmarks, assortments or directories across diverse social networks and artistic platforms.
Without one platform for creatives to access and synthesize all their information they collect online, they find themselves feeling:
experiencing cognitive overload and decision fatigue, directly caused by the viewing and collecting high amounts of (usually low quality) information online.
On a day to day basis, there is little intention behind what information we interact with why, making it difficult to retain and understand new information, ideate upon projects, and develop complex ideas - even more so for visual thinkers.
Our Solution
Given how much we all “doom scroll” and mindlessly click “save,” Maggie and I wanted to build a creative tool that helps users easily access and sift through the information we encounter while exploring what we’re collecting and why- all in one platform- as a tool towards project ideation, creative exploration and greater introspection.
We created an application that encourages relationship building, the synthesis of complex ideas, and active learning, physically manifested as an information diagramming (mind mapping) platform, accompanied with a flexible, spatially-intuitive canvas and left-hand side bar featuring a social media collections explorer and search.
The strategy
Exploring Meaningful Friction and Play
While building Interspace, we kept a few core tenants in mind that we wanted the app to stand upon and embody as a product and as a brand:
Digital products today prioritize frictionless design.
The goal is for users to get to point A- opening up your app- to point B within the least amount of steps and time as possible.
While researching, we wanted to explore what would happen if we made an app that intentionally didn't have a through line between point A and point B.
Specifically designing an interface that required intuitive action as its utility and provided friction as a tool for creativity and discovery, really encouraging the users of Interspace to create their own experience within the
boundaries of play.
The two main texts that guided our research and conceptual development are “How can we develop transformative tools for thought?” by Andy Matuschak and Michael Nielson and concepts around personal meaning making on the web by Charles Broskoski.
Low fidelity wireframes
User Flow
Users log in to Interspace using a social media account of choice (we used Are.na) to access their information collections and content blocks.
Content blocks appear in a retractable left-hand side panel that can then be placed (drag and drop) onto our main interface.
Users have access to our interface tools to connect, interactively organize, group, define and categorize blocks through the features provided.
V1 features
Fields
allow for object grouping, a feature that lets users flexibly pop blocks in and out of groups while toggling the “wrap” and “unwrap” icon
Node and Arrow Connectors
lets users create uni or bi-directional and solid or dashed connections between blocks, sticky labels, groups and maps.
Labels
or text boxes lets users label their blocks. We created a size limit around labels to encourage synthesis of information.
User feedback
Unclear User Journey.
Designers, creative technologists, photographers, artists and content creators tested our product.
To be candid, V1 of Interspace (”Compass” at the time) addressed a very complex user problem -“information overload”- with a very broad goal- “helps users develop more meaningful relationships with the information they encounter online.”
Although the primary solution of creating a mind-mapping application was well designed, there was a lack of well-defined user action items or “tasks,” resulting in a vague user flow.
Users asked:
Aside from design system critique, we also got questions around product-market fit and existing mind-mapping solutions.
Next Steps
We needed to break down the problem of "information overload" into smaller, actionable pieces.
Define a user journey endpoint
Define use cases and integrate templates
Implement information mapping features that are unique to Interspace
Iteration
Implementing Unique Features
Existing information mapping tools, including white-boarding tools and note-taking tools posed as constraints while working on this project and was a common point of comparison within our user interviews.
"How does Interspace’s core functionality differ from Obsidian Canvas, Miro or FigJam?"
In V2, we implemented new features and user touch points which emphasized “play within boundaries” and encourage new avenues of relationship building that are unique to Interspace.
Random Block Generation
facilitates exploration, allowing users to pull a random bookmark and content block from their collections, their friend’s collections, or from anywhere on the social media.
Users can even generate a custom random content block from an existing block simply by hovering over the block and clicking the plus icon.
Aside from dragging and dropping blocks into canvas, random block generation is a great place to start for users who want to map and define their collected content.
Gradient Compass Mapping
a four-quadrant graph, inspired by "the political compass map" allows users to label each quadrant, graph content blocks and spatially organize information, encouraging memory retention and active learning through pattern matching.
The use of color and color gradients in the context of a "tool for thought" was important to us to explore, functioning as a method of organization and fun!
Interspace
After breaking down the problem of “information overload” into smaller, actionable pieces, we were able to create an execute a solution that helps users intentionally address and synthesize the information they collect online.
We expanded Interspace's core functionality beyond the limits of one social media platform and integrate the ability for users to log into and access information collections from any of their social media platforms.
By automating and minimizing resistance around information sourcing, users can focus on discovering webs of information they gather for themselves and others.
We presented the final product demo to over 45+ potential stakeholders and users, achieving a 90% user interest rate in regular tool usage. We received interest in building from Paradigm, three angel investors, and 7+ software (front end and back end) developers.
Takeaway
What I learned
I had many take-aways from this project, especially regarding how to build a product 0-1.
Break down the problem into smaller, digestible pieces.
Maggie and I tackled a vague problem and oscillated between building off existing solutions or building out our own. It's difficult to find a solution to a problem that isn't well defined.
After we defined the problem more thoroughly, it was easier to digest and find solutions that were unique to user pain points and our product.
Test often and test early.
We spent a lot of time making assumptions about our users and how they would use the product- specifically assuming that our average user was dumber than they actually are.
These assumptions were productive to a fault, however getting our product into the users hand gave us real insights into user pain points and where our solution could be improved.
Conducting Thorough Market Research
When we first began this project, we were unaware of all the existing mind-mapping solutions that existed. This created road-blocks that we had to find solutions to further down our product creation process.
