Databolt navigation and project creation flow refresh
I redesigned the navigation of a B2B data labeling project management system — creating new dynamic navbars, rethinking the project view, and simplifying the project creation flow.
About Databolt
The problem
The most frequented page was hidden away.
Through user interviews, we learned that the page most frequented by our users was View Annotations, where they would watch their annotated images roll in after they’ve been submitted by our annotators.
Some clients had even shared that they would keep the page open until the project ended.
The problem was clear — our clients had to take multiple steps to get to the View Annotations page. They had to navigate from their dashboard to the project page, switch to the Quality tab, and find the View Annotations button in order to arrive there.
The project creation flow seemed lengthy.
In the initial launch, the end-to-end flow from uploading to exporting was built all in one place for simplicity. However, it wasn’t clear to new users what the required steps to start the project were.
There were 5 tabs on the create project page, even though only 3 were required to start a project. This created the illusion of a lengthy project creation flow.
The process
The Product team ran a design sprint where we outlined the key problems we wanted to solve, and made heatmaps of our favorite ideas from our timeboxed sketches.
At the end of the sprint, the consensus was to:
Shorten the project creation flow
Separate setup from post-setup steps
Bring users directly to View Annotations when viewing a project
Maximize screen real estate
The challenges
Top-level vs. page-level navigation
Initially, I explored positioning top-level items in the top navbar, and page-level items in a collapsible sidebar. That way, content in the sidebar would change depending on whichever page the user is on.
After rounds of internal testing, I learned that users wouldn’t find value in collapsing a sidebar that contained important page-level action items that are needed at high frequency.
Maximizing screen real estate at the expense of navigation usability
For the sake of screen real estate, I explored a floating quick access button in place of a sidebar, that would essentially hide main navigation items in a single menu.
However, the lack of findability posed too much of a risk. Not being able to show users upfront what their options are was a tradeoff that my team and I decided wasn’t worth it.
The solution
Dynamic top navigation bar for primary action items
Collapsible sidebar for secondary action items
View Tasks as the default home page for projects
Backdoor to project setup steps
Quick access to projects
Dynamic top navigation bar for primary action items
To optimise space usage, I created 3 different variants for the top navbar, containing different action items for each page’s varying needs:
Page title
Search bar
New project button
Project title
Data tab
Labels tab
Instructions tab
Start project button
Project title
Navigation dropdown
Collaborators and Share button
Pause and Resume button
Project status
Collapsible sidebar for secondary action items
Top-level navigation items were tucked in a collapsible sidebar to give the user more freedom and flexibility to remove distraction. These items include destinations that less frequented by users:
Home
Recent projects
Documentation
Account
Logout
To save horizontal space, I also assigned each item a recognizable icon for when the sidebar is collapsed. This enables users to navigate without having to expand the sidebar.
View Tasks as the default home page for projects
When a user clicks into a project they’ve started, they will now immediately land on the View Tasks page, where they will find all their annotated images.
Analytics and Export were moved from the project setup flow to the project page’s navigation dropdown, as part of the post-setup flow.
This separation of post-setup items from pre-setup stages allows users to focus on one task at a time — whether it is starting a project or managing a project they’ve started.
Backdoor to project setup steps
To allow users to revisit project setup steps after starting a project, we added a Project Setup page in the navigation dropdown.
Here, I created tabs where users can manage and iterate on the data, labels, and instructions they’ve set up during the project creation phase.
Quick access to projects
To add more value to the sidebar, I enabled quick access to all created projects sorted by recency.
This shortens the flow between viewing one project and viewing another, by removing the need for users to return to the Home page before they pick a different project to view.
The prototype
© Zoe Chin 2023