Platform Layout Update at Bench

Bench is a bookkeeping platform for small to medium businesses. Our goal while I was at Bench was to move from a people drive service focused model to a tech drive service model.

Platform Layout Update at Bench

Bench is a bookkeeping platform for small to medium businesses. Our goal while I was at Bench was to move from a people drive service focused model to a tech drive service model.

Problem

Our NPS scores came in and ~80% of the detractors complained about how the app’s layout wasn’t showing as much content as it could - especially on larger screens. We confirmed this in user interviews, chats with Customer Support and Account Executives.

Problem

Our NPS scores came in and ~80% of the detractors complained about how the app’s layout wasn’t showing as much content as it could - especially on larger screens. We confirmed this in user interviews, chats with Customer Support and Account Executives.

Selling design

Adding work to the roadmap that does not create a new feature to sell is difficult at any start-up - so how did I get the buy-in?

Creating user advocates

We received a ton of user feedback around accounting data often truncating - even on larger screens - but this feedback wasn't being surfaced so it didn't seem important to our product team.

I created a Slack channel with our feedback tool integrated, added all the relevant stakeholders, and tagged them in relevant feedback.

In the span of two weeks the same stakeholders that were seeing this as a non-issue started tagging me, advocating for user focused improvements.

User sentiments

  • “I can’t read most of the labels for my transactions.”

  • “Everything is so small, why can’t I use my screen space?”

  • “The app just looks odd on my screen, I don’t know what it is.”

Design Workshop

I organized a design workshop with 2 other designers and a PM. We gathered inspiration, created wireframes, and discussed solutions. As the lead on this project, it was up to me to digest all that work and turn it into a refined solution.

Design Workshop

I organized a design workshop with 2 other designers and a PM. We gathered inspiration, created wireframes, and discussed solutions. As the lead on this project, it was up to me to digest all that work and turn it into a refined solution.

Layout exploration

Cherrie explored different general lofi layouts

Layout exploration

Cherrie explored different general lofi layouts

Top level nav exploration

Sean spent time exploring different navigation layouts, including this top nav

Top level nav exploration

Sean spent time exploring different navigation layouts, including this top nav

Mulit-layer nav

Sean also explord a multi-layer side nav

Mulit-layer nav

Sean also explord a multi-layer side nav

Traditional SaaS nav + Wider content area

I explored a more traditonal SaaS nav with a wider content area, breaking our current 720px width limit for content

Traditional SaaS nav + Wider content area

I explored a more traditonal SaaS nav with a wider content area, breaking our current 720px width limit for content

Smaller nav for smaller screens

Additional exploration for a smaller sidenav at smaller screen sizes

Smaller nav for smaller screens

Additional exploration for a smaller sidenav at smaller screen sizes

Heuristic improvements

  • Real user data was more readable and did not truncate.

  • The app's visual alignment worked better on larger screens.

  • How different elements changed size at different screen sizes was more cohesive in testing.

  • The layout worked well across the app from our dashboard, to configuration and of course the core workflows.

Happy user = happy designer

We released the new layout that centred and expanded the content. The design team wanted to go steps further, but we worked within the technical limitations and timeline for the project.

NPS +1

Net Promoter Score move from 6.5 to 7.5

Improved user sentiment

Users reached out to customer support with praise for the improved layout

Layout Specs

Made with Figma

Layout Prototype

Made with Figma Make

< Back home