Workspaces Plus is a plugin for the knowledge management tool, Obsidian, which adds functionality to the software's Workspaces feature. I worked as a UX Designer in collaboration with another Obsidian community member, NothingIsLost, to develop this plugin.
Obsidian is a knowledge management tool which has a core plugin called Workspaces which allow you to save and load workspaces. Workspaces in Obsidian function very closely to the desktops feature in Windows and the spaces feature on Mac.
An issue that I experienced while using Obsidian's core workspaces feature was not knowing which workspace I was in. This frustration inspired me to create a mockup of a solution which would add a signifier to the UI, to show the name of the currently active workspace, as well as act as a drop down menu to allow for quicker switching between workspaces. This idea was developed and expanded into the Workspaces Plus plugin which was designed and developed by myself and NothingIsLost.
The plugin is available to download from Github or from Obsidian's community plugin browser and currently, as of 2022-01-18, has over 2,300 downloads and 50 stars on Github.
Make - Observe - Reflect
For this project, I used an iterative design process adapted from this model of the creative process from Dubberly Design Office. This is not a linear process and steps did not occur in the order presented here. The development process with my partner, NothingIsLost, was mostly ad hoc with priority given to fixing bugs. We worked asynchronously using Github’s issues, project boards, and direct messages on Discord.
I use the design and prototyping tool, Penpot, to ideate and mock up all of my designs. Below are some design examples:
Mockup of the initial idea. Adds a signifier to which workspace is currently active. Adds a workspace picker drop-down menu for quick selection of workspace. Inspiration for this initial idea came from Safari's tab groups feature.
Wireframe of workspace switcher modal idea adding delete, rename, and drag order functionality. Delete and rename functionality were implemented.
Observations for improving the plugin were gathered from various sources such as conversation in Obsidian's discord community, feedback in the form of issues on our github repository, direct messages from Obsidian users, and also personal behaviors from myself and NothingIsLost as we are both users of the plugin.
Some feedback was gathered through an Airtable survey where I recorded general observations about the usage of the plugin. The survey collected use cases, pain points, and general comments about the plugin and user experience.
My designs for this plugin were motivated by several goals: reducing interaction cost, increasing accessibility, and promoting personalization. I tried to keep these in mind when reviewing feedback and brainstorming new features or solutions to current challenges.
Reducing Interaction Cost
We wanted the user to be able to go through workflows with a minimal amount of effort. One example of a workflow where we were able to reduce interaction cost was for the following action: opening a specific workspace. In a previous build of the plugin, you could open a workspace with the following workflows:
- Open workspace via switcher modal
1. use hotkey to open modal
2. find desired workspace in list
1. using either mouse or keyboard
3. open workspace via mouse click or pressing `enter` on keyboard
4. desired workspace is now open
- Open workspace via picker menu
1. move mouse to workspace signifier button (see Fitts's Law)
2. click workspace signifier button to open picker menu
3. find desired workspace in list
1. using either mouse or keyboard
4. open workspace via mouse click or pressing `enter` on keyboard
5. desired workspace is now open
- And with the new feature introduced: open a specific workspace via hotkey:
1. use hotkey to open desired workspace
2. desired workspace is now open
Introducing the ability to open a specific workspace with a hotkey has a greatly reduced interaction cost which is great for increasing the usability of this particular feature.
Increasing Accessibility
The first major accessibility improvement to Obsidian's workspaces plugin was to add a signifier to the interface which shows the user which workspace is currently active. Beyond that, one of my goals is to try to make as many workflows accessible to both keyboard and mouse as possible. At any given time the user could be using any combination of mouse and keyboard so we want to make sure that the moment they make the decision to perform a particular action that our features can be available to them no matter what position they are in. One example of supporting mouse-driven workflows is the addition of edit and rename icons to both the workspace switcher modal and picker menu.
Promoting Personalization
Obsidian is a a very extensible and customizable knowledge management tool and we want to make sure that the ability to personalize features and elements of the interface extends to our plugin as well. We are continuing to add features to our plugin that allow the user to tailor their workspaces exactly how they want them. Some examples include:
- option to toggle icon in sidebar for opening the workspace switcher
- the ability to add descriptions to workspaces
- css classes for the modal and picker for user styling
Issue: lack of signifier showing the user which workspace they have open
Solution: added workspace picker to interface which shows the name of the currently active workspace
Design Challenge: should there only be one modal for switching workspaces or a modal and a picker menu?
Solution: we chose to include both so the user would be able to access workspaces via mouse (click on workspace signifier to open workspace picker) and keyboard (user made hotkey opens switcher modal)
Enhancement: only show edit and delete icons on hover
Rationale: inspired by the behavior in Todoist, this allows us to have the edit/rename functionality without creating too much visual clutter
Only show edit and delete icons on hover · Issue #20 · nothingislost/obsidian-workspaces-plus · GitHub
For more examples of design decisions made on this project as well as current design challenges see the issues section of the projects Github repository.
The plugin currently offers the following functionality:
Switch, rename, or delete workspaces with the workspace switcher modal that can be activated via hotkey or sidebar icon
Click on the workspace signifier in the lower right corner of UI to access workspace picker menu where you can select, rename, and delete workspaces.
