Carson Monroe logo
accolader product hero

Accolader

View Online

Accolader is an online employee recognition tool designed to drive engagement within small companies. Users send awards, or accolades, to their coworkers to recognize a job well done. When I joined the team, major functionality was in place, but the product lacked an organized design system and advanced features.

The Goal

My main goal was to create and manage Accolader's design system. Secondary goals included developing user flows, overhauling the onboarding process, and updating the admin section with new pro features.

accolader design system

Accolader colors and fonts

Design System

Updating the design system began by identifying a core set of colors and fonts to keep screens and components consistent. From there, commonly used UI elements such as inputs and buttons were created. As our list of features grew, this library allowed us to design new interfaces more quickly and effectively.

accolader design components

A small selection of components and their variants

User Flows

Accolader's initial concept was simple and little explanation was needed to understand it. However, as additional features were added and project members came and went, flow charts and tables became necessary to keep track of the product. These tools have helped developers and managers alike gather an understanding of the many states and features that exist.

accolader design components

A simplified user flow for sending an award

Onboarding

Accolader originally only supported free accounts. With the addition of a premium subscription option, new screens were designed to clearly explain plan options and enable integration with Stripe.

accolader onboarding

Plan selection and onboarding screens

Pro Features

The Accolader Pro tier enhances features for admin users and, in turn, enhances overall user experience. Pro features consist of the ability to modify the color of the UI, add a custom logo, unlock an admin dashboard, and export awards and users. A teaser UI was also added to free accounts to inform users of the additional features they would unlock with a pro account.

accolader pro features

Premium states of the account settings and dashboard screens

Final Thoughts

Creating the design system and developing user flows had a huge impact on the success of Accolader. These contributions have in turn allowed for stronger designs for new features and pro account screens. Most importantly, design, development, and product teams are much more in sync and able to deliver an enhanced user experience.