Impraise
Performance management platform





DESIGNER

Ruixin J. Zhang


ROLES

Lead Product Designer


LINKS

Read how I created it

Impraise Design System Site

INTRODUCTION

Impraise is a B2B platform focusing on modern performance management. And it is also well-known as a "feedback tool". It brings feedback into daily conversations instead of just at the end annual performance review cycle. For the product design team, we need to manage to help our customers to figure out complicated performance management issues, facilitate their communications, set up OKRs, and influence a positive culture change.

THE CHALLENGE

Improve and maintain new features update from customers, and innovate on the current product to deliver more value to our customers within a small product design and development team.

THE OUTCOME

I lead the product design for several major features redesign(e.g. 1:1, OKRs, ask for feedback, etc.). As a result, now Impraise has a completely new look powered by the new design system and general improvement of the user experience.

Customer feedback and data-driven product design

We have several ways of data collection methods. For quantitative data, we use Metabase and Amplitude data tracking software. For qualitative data, we gather from Shipright and customer support team. To define the measurement of success, we use Google's HEALTH metrics definition framework. During the product design process, we involve our customers in the very early stage of design. PM and I will involve our customer in user needs discussion, and user testing session. During those sessions, we validate existing problems, finding new ones, and validate our design.

Design Language System to maintain consistent customer experience

There are several reasons that we started to build our design system. For us, the most challenging part of this project is that we have quite a small team, and our main focus is on building new upcoming features and continuing delivering values to our customers. However, with a whole year of design and development, the design system brings us structured design components and enables us to speed up the product development process. Now with the new design system components, we can manage consistency across the whole platform well.

DESIGN THINKING

User Journey Map

DESIGN THINKING

Customer & Data-driven Design

Tracking Communication

Tracking 1:1 conversation is an important part of performance management. Our customers would like to have a place to view and edit their thoughts and thinking for the 1:1 conversation. We aim to offer a contributed 1:1 space, for managers/direct reports and for any other “pairs” of people who have 1:1 relationship, to track what happened during their 1:1 conversation.

1:1 relationship with anyone in the company

This is a dedicated shared space for one-on-one meetings between anyone inside the organization.

1:1 detail page with discussion topics

The detail page listed all the topics to discuss, and the topics that are done. The notes of each topic allows user to track their progress together.

1:1 on mobile

Mobile version of one-on-one allows users to use it anytime they need.

1:1 topics on mobile

The topics and notes feature are also available from mobile view.

Goals & OKRs

Objectives and key results (OKR) is one of the well-known goal-setting frameworks, it works by defining and tracking objectives and their outcomes. Google is one of the good examples to apply this framework to their working process. Impraise also creates this framework into the product to complete the performance management cycle. We did a transition from normal goals to OKRs system.

Objectives tree in the organization

By linking teams and individuals to the organization objectives and visualizing how individual ones can contribute to higher level objectives, everyone inside the organization can see alignment and highlight dependencies.

Objective detail

Increased visibiliy of objectives status with status tags, and measurable key results.

Team objectives overview

Personal objectives overview shows objectives progress that drives personal development.

Performance reviews

As the major part of the Impraise platform, reviews serve as an important part to reflect on employees' performance and generate insights to make decisions on career progression and compensation. Impraise offered a simplified version of the performance review that makes performance review an easier job to do as HRs and mangers.

Review overview

Admin can create reviews based on the review templates (peer review, performance review, leadership review, and custom review).

Review report

The feedback from review is all stored in one place. The reports help to align on strengths, areas for development for managers and inidviduals. This is also a good place to trigger follow up 1:1s conversations.

Teambase

With growing pressure to keep your people engaged and performing at their best, you need to empower your managers. Teambase helps managers drive meaningful conversations and actions with their team so that they can do their most courageous thinking together.

Teambase overview

With three different practices focusing on people, collaboration and performance, managers can choose what to tackle first based on their teams current challenges. Learn more about the product from here.

OKRs Board Practice

Get a quick overview of how the whole team is doing in one place. Simply set Objectives and Key Results for your team, and then come back here to track how they are progressing.

Design System

The design system helps to maintain both visual and interaction patterns consistencies in the Impraise platform. The design system includes a website that describes how to use design components and a sketch library of all the patterns.

Design language system structure

The design system consists of 6 major sections, they are grid, typography, color, spacing, components and animations (link to design system site). I lead the team on this project for the whole year (read about how I created the design system).

Example of basic design system elements

Here are some examples of basic design elements (e.g. fonts, size, spacing, and color). You can view the whole system here (link to design system site).

Example of design system components - interactive cards

Here is an example of rules of using interactive cards design components.

Motion design principles

e.g. Define easing curve by efficient easing vs. explanatory easing with CSS code on transition-timing-fuction.

Illustrations library

There is also a small human illustations libary in sketch.

DISCUSSIONS

value & impact

Not just making sure of delivering design with good UX design quality, I also introduce the iterative design process to the core product and design team. The team switched from a feature-based waterfall working process to a more customer-centered design process, which involves a new process of rapid prototyping, data validation, and iterations.


The design system has ensured our product continues to have good UX quality, which works as a key competitive factor in today’s B2B-platform world. The design system helps to maintain both visual and interaction patterns consistencies in the Impraise platform. When we look back on many features we released in the past two years, goals and OKRs, ask for feedback, and reviews. The design system project has been speeding up our product development efficiency a lot. Now our development team can pick up some small features on their own using the design system and build the feature quicker than before.