# The Project [[Workspaces Plus]] is a plugin for the knowledge management tool, [Obsidian](https://obsidian.md), which adds functionality to the software's [Workspaces feature](https://help.obsidian.md/Plugins/Workspaces). I am currently working as a UX Designer in collaboration with another Obsidian community member, [NothingIsLost](https://github.com/nothingislost), to develop this plugin. **Duration:** September 2021-Ongoing **Methods:** [[mockups]], [[wireframing]], [[prototyping]], [[UX survey]] **Tools:** Penpot, Airtable **Role:** UX Design **Tags:** #case-study #design/mockup #design/wireframe #research/survey # Context Obsidian is a knowledge management tool which has a core plugin called Workspaces which allow you to save and load workspaces. > [!quote] "Each workspace includes pane layout, sidebar state (expanded or collapsed), and file open states." - [Obsidian Help page](https://help.obsidian.md/Plugins/Workspaces) Workspaces in Obsidian function very closely to the [desktops feature in Windows](https://support.microsoft.com/en-us/windows/multiple-desktops-in-windows-11-36f52e38-5b4a-557b-2ff9-e1a60c976434) and the [spaces feature on Mac](https://support.apple.com/en-ca/guide/mac-help/mh14112/mac). </br> 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](https://forum.obsidian.md/t/workspace-switcher-drop-down-menu-mockup/23785) 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 has been developed and expanded into the Workspaces Plus plugin which is being actively designed and developed by myself and NothingIsLost. The plugin is available to download from [Github](https://github.com/nothingislost/obsidian-workspaces-plus) or from Obsidian's community plugin browser and currently, as of 2022-01-18, has over 2,300 downloads and 50 stars on Github. # Process make - observe - reflect For this project, I use an iterative design process adapted from this [model of the creative process](http://www.dubberly.com/concept-maps/creative-process.html) from [Dubberly Design Office](http://www.dubberly.com). This is not a linear process and steps did not occur in the order presented here. The development process with my partner, NothingIsLost, is mostly ad hoc with priority given to fixing bugs. We have been working asynchronously using Github’s issues, project boards, and direct messages on Discord. ## Make I use the design and prototyping tool, [Penpot](https://penpot.app), to ideate and mock up all of my designs. Below are some design examples: </br> - Mock up 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](https://support.apple.com/en-ca/guide/safari/ibrwa2d73908/mac). ![[Pasted image 20211129151120.png]] </br> - Wireframe of workspace switcher modal idea adding delete, rename, and drag order functionality. Delete and rename functionality are currently implemented. ![[Pasted image 20211129141154.png]] ## Observe Observations for improving the plugin are 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. </br> Some feedback is being gathered through an Airtable survey where I am also recording general observations about the usage of the plugin. The survey collects use cases, pain points, and general comments about the plugin and user experience. ## Reflect My designs for this plugin are motivated by several goals: reducing interaction cost, increasing accessibility, and promoting personalization. I try to keep these in mind when reviewing feedback and brainstorming new features or solutions to current challenges. **Reducing Interaction Cost** We want 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 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 # Design Decisions **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 </br> **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) </br> **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](https://github.com/nothingislost/obsidian-workspaces-plus/issues/20)* </br> 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](https://github.com/nothingislost/obsidian-workspaces-plus/issues). # Current State The plugin currently offers the following functionality: ![[Artboard-5.png]] - Switch, rename, or delete workspaces with the workspace switcher modal that can be activated via hotkey or sidebar icon ![[Artboard-3-2.png]] - 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 # Links - [GitHub - nothingislost/obsidian-workspaces-plus: Quickly switch and manage Obsidian workspaces](https://github.com/nothingislost/obsidian-workspaces-plus) - [Obsidian October 2021 daily progress and learnings - #29 by Johnny - Meta - Obsidian Forum](https://forum.obsidian.md/t/obsidian-october-2021-daily-progress-and-learnings/24472/29?u=johnny) - [Workspace Switcher Drop Down Menu (mockup) - Plugins ideas - Obsidian Forum](https://forum.obsidian.md/t/workspace-switcher-drop-down-menu-mockup/23785) - [Obsidian Setup for 2023](https://youtu.be/ym26gT798lQ) # See also - [[Workspaces Plus Plugin Design for Obsidian]] - [[Obsidian Commander Case Study]] - [[Obsidian Workspaces Plus Case Study UPDATE]]