Background
BetterWorks provides continuous performance management to help employees easily set goals and give ongoing feedback. The platform connects the four aspects of a performance review process – goals, check-in conversations, peer feedback and reviews – to help organizations improve employee performance and engagement. 
When I joined BetterWorks in 2014, the platform was little more than a few core features. Within my 3+ years working with the team, we built an entire suite of performance management software accessible across desktop and mobile, signing on hundreds of companies including a good chunk of the Fortune 500. We even won HR product of the year in 2015!
Because our product reached beyond the purely HR space into the operational space, there were a number of personas -- executives, managers, employees, talent leaders, and more -- to build for. Prioritization became our biggest challenge.
Problem
In Q4'17, through extensive user research, we identified a key usability problem in our site navigation. Poor navigation was frustrating customers and causing them to churn from the product.

A few images of the old infrastructure

We found that many pages in the app offered similar but inconsistent features and navigation. In some worst case scenarios, users would be required to click and load 3 degrees of pages to conduct core actions like creating goals, updating progress on goals, or commenting on coworkers' goals.
The results were excessively long session times to perform core actions, or users simply not logging in at all.
Another challenge we encountered was designing features that could account for changing needs during a company's business calendar. Oftentimes users would engage with features like goals differently at the beginning of a quarter than towards the end -- for example, creating and editing a goal at the beginning, and then updating or scoring the goal towards the end. Designing these features necessitated a thorough understanding of how users engage with them at different times throughout the year.
The diagram below shows how time can affect what a user does in the platform.
Design principles
We created the following principles to keep the team focused on solving the navigation problem, by delivering a solution that allows our users to efficiently create and update their goals throughout the year.
Single page framework — building an intuitive system that engages employees to complete core flows quickly and keep goals top of mind
Holistic approach — creating a user experience that empowers users to set, manage, and achieve their goals at all points during the business year
Collaborative — enabling users to share and discuss goals in a way that ensures alignment with overarching company strategy, as well as creating opportunities for feedback & recognition
Initial wireframes
Our old page based infrastructure caused a lot of cognitive friction, as a result of load times and pages looking inconsistent. We began looking into a single page framework to lessen the friction it takes to load an analyze new pages. This would enable certain modules and panels to handle the load times, while maintaining a single layout.

A few of many single page wireframes we explored

Unlike your typical analytics dashboard, our challenge was to optimize for cross-collaboration at different levels of an organization. A user needs to be able to quickly update & report on the progress of their own goals, followed by being able to give feedback on their team's goals, and ultimately look at how their company's goals are progressing.
Taking a closer look at one of the initial wireframes, we can see how one exploration maximizes as much screen real-estate as possible for goals, while placing filters as a navigational tool bar so users may change the view to another department or team.
The next question was, could the layouts account for a user's place in time? We challenged ourselves to design for an interface that would adapt depending on whether users were in the platform to create goals for the very first time, update their progress in the middle of a business period, or assess their goals when they've finished.
User flow
This user flow demonstrates how one layout can be leveraged to conduct core actions at different times of a business period, then pivot to interact with their team's goals.
High fidelity designs
Since this project involved redesigning the app's infrastructure, a lot of old UI was unable to work. It helped that one of the designers at BetterWorks was working on our design system at the time, making it easy to introduce new patterns.
Goal creation
Collaborating with my team

Flat list view displaying a team's goals

Looking into a goal's milestones

A user may click into a goal to see it's milestones

Diving into more detail

A detail panel slides in from the right, displaying comments and other tertiary information

Interactions
During early rounds of user testing we used Invision prototypes, but found without animated transitions creates cognitive friction. We needed a more robust tool to prototype, so I learned principle for mac to bring high fidelity prototypes to user tests. 
This not only gave us more honest results, it prioritized animated transitions when it came time to develop.

Recording of the following interactions: opening a goal, updating progress, viewing & leaving comments

The team
Product manager – Tony Ventrice
Product designer – Randall Hom
User research – Ana Valera & Randall Hom
(With lots of help from Design, Product, Engineering, and CS ❤️) 
Back to Top