Apryse · Product Designer · 2023

Redesigning a toolbar that hid its own tools

The native Windows toolbar showed nine icons and hid everything else behind an overflow menu. I made every tool visible, labelled and one click away.

Skip to the numbers

−2
clicks per task
Qualitative workflow analysis · Xodo for Windows · 2023

Role: Product Designer
Product: Xodo UWP (Universal Windows Platform)
Duration: Jan 2023
Shipped: Shipped

Context

A toolbar that showed nine of its tools

The redesign aimed to address hidden tools, lack of organization, and poor discoverability by enhancing tool accessibility and optimizing user interactions.

The mess

Nine icons, and everything else behind an overflow menu

Create a more cohesive and user-friendly toolbar that would benefit both new and existing users.

Organize tools in categories similar to Xodo on Android/iOS and order tools in each category from most used to least used.

Go through all tools/features and redesign the ones that aren't actionable with one click.

Screenshot of original toolbar — Nine icons, no labels, and every remaining tool behind the overflow menu.

User Flow diagram — The user-flow tree the redesign was planned against: four levels deep from the upload view, 12,690px wide at full size.

What I did

Order every tool by how often it is actually used

Made every tool visible

Keeping most important features visible upon document upload to reduce search efforts.

Edit Landing - Annotate Toolbar view — Every tool labelled and in the row, with the category menu open on Annotate.

Labelled every tool

Adding clear labels to each tool for better identification.

Presets Fly-Outs variant — Ink presets, one click from the pen tool.

Grouped the tools by task

Categorizing tools based on functionality for improved discoverability.

Cut the common tasks to one click

Implementing one-click actions for each tool to reduce navigation steps.

Evidence

Measured by task walkthrough, with no live analytics

Qualitative data analysis was conducted to gain insights into user pain points, gather feedback, and most frequently used tools and patterns in user workflows, which allowed us to prioritize the redesign efforts effectively.

The most frequently used tools in the Windows platform align with those in Android and iOS.

What shipped

Two fewer clicks to do the same job

Users spent less time on the landing page after uploading a new document

Decreased time between switching to different tools

Two fewer clicks to perform tasks

A button in the settings allowed users to revert to the old toolbar with a popup to provide reasons for switching back.

Still open

The team is also exploring opportunities to introduce personalized tool customization options, allowing users to tailor the toolbar to their specific workflows.

Two fewer clicks on every task, from ordering tools by how often they are actually used.

Next case study

The redesigned WebViewer SDK: a vertical tool rail down the left edge and a second panel rail on the right, with the document centred between them.

Apryse · WebViewer SDK · 2023 Making the SDK toolbar configurable Prior to this initiative, the SDK toolbar was locked to the top of the window, which meant that a significant portion of customers had already rebuilt it themselves in pursuit of a more seamless and intuitive experience. To address this issue, we made the toolbar configurable and authored the guidelines that engineering ultimately shipped it from.