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.
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.
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.
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.
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.