Accolader.io

View online

Summary

Accolader is an online employee recognition tool designed to drive engagement within small companies. The tool has both a main user interface and an admin interface.

When I joined the team, requirements were increasing and the design language was struggling to stay consistent. I came onboard to create an organized design strategy and continue the design of this evolving tool.

Color Palette and Typography

Accolader had an existing font library and color palette, but the styles were not used consistently. I established a naming convention for all colors and font styles to keep developers and designers on the same page.

Components

Originally, components in the tool were not stored in a reusable library, making it hard to keep them consistent across pages. I created new master copies of each component in Accolader and sharpened up some of the designs.

Profile Page

With the help of these new components, I reorganized the profile page. The design provides an overview of a user's awards, as well as their information.

Team Page

The design of the team page allows users to view their entire company. A newly implemented grid responds to content seamlessly regardless of team size or screen width.

Admin Interface

Although the admin interface utilizes a unique layout and a wider range of controls, the organized design system helps maintain a consistent look and feel.