Small Improvements Redesign Header Image

Visual Design Refresh

Small Improvements is a performance management tool supporting 750+ companies to execute their feedback culture and help their employees grow. Notable customers include Zapier, Duolingo, Soundcloud, GetYourGuide, and Strava.

Creating a redesign opportunity

As in-house design team of 2, we continuously brought improvements to the application and style guide. However, working on large structural changes to IA, usability issues, and visual design was all but impossible.

To solve this, I decided to kickstart a “redesign exploration” time, taking the team out of the office for one morning every 2 weeks. The goal was to create a space where we could escape the time pressure of daily work and openly explore new design possibilities for Small Improvements.

Core issues

We started by analysing the current application and identifying the core issues which most frequently acted as bottlenecks or blockades to our design work.

Two apps in one: Small Improvements caters both to HR professionals and regular employees. The current app structure focuses on employees, leaving HR – the paying customers – stuck in a corner of sub-pages and sub-tabs.
Over-friendly brand: The combination of colorful illustrations with bright colors, outlines and shadows on interface elements – cards, buttons, form elements – have made the app style so “approachable” that it started feeling unprofessional at times.
High-density pages: Small font sizes and minimal margins are optimised for density and make the app look dated and stuffed, as if made just for small screens.
Rigid structure: Our UI doesn’t extend beyond 1440px. With ~90% of sessions coming from screens 13” or higher, our users’ screens are often underused, especially when dealing with high complexity screens.

Role-based navigation

Most of the Small Improvements application is targeted towards HR professionals, while a smaller set of screens is accessible and used by general employees looking to complete their reviews, create personal objectives or document meetings. The app's navigation, however, focused all its space on employees and left HR screens crammed under 2 menu items.

A map of all SI views. The biggest number of views is dedicated to Admins (orange and red). But the employee pages (blue) get more visibility.

Analysing Small Improvement's navigation isues, and our proposed solution

To solve this, we decided to display separate navigation systems for HR and Individual Contributors. This allow the app to cater to each role’s needs more p, providing quick access to the most important pages for that group.

HR Admins need access to both navigations depending on the task they need to achieve in the app. For these users, we provided a toggle to easily switch between their roles of Administrator and Individual Contributor. A strong color change in the navigation ensures the clarity of which role they are currently operating in.

Leading by example

After addressing the main navigation issues, we picked a number of key screens to redesign that would paint a clear picture of our revised UI. The goal here was to make a strong impression in the team and inspire the company to move forward with the project.

The new home screen focuses on tasks and objectives instead of a news feed

Praise Module in the existing Small Improvements app. All badges automatically receive a cartoony ribbon.

The new Praise tones down cartoony elements such as the mandatory badge ribbons.

Meetings in the current Small Improvements app. Research showed us that users don’t use value the split meetings layout.

The updated design puts all talking points in one column and allows commenting, opening the door for new usage patterns.

On the HR Admin side we selected one key screen to use: the "Cycles Overview" a screen that repeats itself over multiple features. At the moment, a user can only access the different types of feedback separately, making it hard to view their company-wide plan as a whole. By having them all in the same page, we are able to show all kinds of cycles overlapping in time, giving the HR professional a complete view of their feedback processes.

New integrated feedback cycles giving Admin a bird's eye view

What's next?

After presenting the initiative at the company All-Hands, we received an enthusiastic response from the rest of team, and a green light to proceed.

We now want to further develop the core concepts, define a solid set of changes to the Style Guide, and break some of the initiatives into smaller projects that can be incorporated into regular agile development processes.

Eventually, the UI update should be launched in sync with a broader brand refresh, including the new logo that can be seen on some of the UI mocks.