accolader product hero

Accolader

Project Link

https://accolader.io

Role

Product Designer

Timeline

Jun 2021 – Oct 2022

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.

What I Did

  • Create and manage Accolader's design system
  • Developed user flows
  • Overhauled the onboarding process
  • Updated the administrative section with new paid features

Primary Font

accolader font

Colors

Accolader colors

Buttons

Accolader colors

UI Iconography

Accolader colors

Component Samples

Accolader UI

Design System

I started the design system by breaking out individual pieces of the existing app to identify functionality and design styles. Organization and naming decisions were made alongside development to create a shared understanding of the system.

After establishing base styles, I restructured commonly used UI elements such as inputs, buttons, and navigation. A library of components began to take shape and full screens and features could be pieced together in minutes.

User Flows

magnifying glass
onboarding flow
magnifying glass
Send Award Flow

I designed user flows to better document the user's journey through Accolader. New functionality was starting to get added to existing screens, making it difficult to visualize where features fell within a larger process.

The onboarding and send award flows above represent two core pieces of Accolader functionality. Many other flows were documented and linked to create a high level map of the product and continue to guide new feature development.

accolader onboarding

Onboarding

With help from the design system and user flows, the designs for the onboarding screens were able to be produced quickly. The goal of the designs was to entice users to sign up for a pro account, while still allowing an easy path to a free, fully functional product. With well documented flows and design language, the turnaround time for changes in Accolader onboarding is significantly reduced.

accolader pro-features

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, export awards and users, and view additional stats on the admin dashboard.

Custom branding was a request that came directly from users, while other features came from research and competitive analysis. This initial feature set represents a strong jumping off point for additional functionality within the pro experience.

Final Thoughts

Creating the design system and developing user flows had a huge impact on the growth and success of Accolader. I am able to use existing building blocks to create more informed visual designs, resulting in easier handoff and communication with development and management. Testing and iterating on designs is also more efficient, allowing or a more flexible design process and quick edits to essential features.