Building a Flexible System
Because this product would be replacing one used by many different partners with their own unique audiences, a major challenge came in building a system flexible enough to accomodate their varying needs. On top of that, this would also need to be responsive, unlike its predecessor.
We also needed a way for partners to inject their own branding into the interface should they choose to serve it to customers from within their own products. My solution was to use a limited color palette and restrict whitelabel colors to select areas, so that text would remain accessible across virtually any color palette.
Rather than using a full color palette, we would use different opacities of the primary action color to indicate interactivity, state, or as a visual accent. The same approach was applied to typography as well.
Achieve presented an opportunity to flesh out our component library with additional flexibility and improved interactions suitable for the new micro-learning content model.