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.
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 colors and fonts
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.
A small selection of components and their variants
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.
A simplified user flow for sending an award
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.
Plan selection and onboarding screens
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.
Premium states of the account settings and dashboard screens
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.