Lithium Refresh

Lithium is a global leader in social media management technology, helping brands grow their influence and create a loyal community. I worked with Lithium for five years at Active Ingredients as creative lead for the account. This particular project is still ongoing... but that's kinda the point! 

Social Media Management never looked so good is always a work in progress, and that's a good thing. I recently led a progressive redesign of the Lithium website, setting the foundation for a dynamic and flexible web presence for years to come.

What started as a simple visual refresh grew into a holistic rethinking of the entire web experience (all managed by yours truly). We created a new modular design system, implemented a full backend CMS overhaul, developed a living styleguide on the front-end, prototyped animations, developed a UX testing strategy, and fully reassessed content direction and information hierarchy. Whew! 

Pushing the Lithium digital brand forward

We started with the visuals. Lithium is built on bold colors and a playful attitude — helpful design allies to have when telling the story of an elaborate software suite. Without losing their core brand essence, we wanted to push Lithium’s digital experience into fresh, beautiful, and informative new territory. We wanted to create a brand new design system that would be instantly recognizeable, yet be more on-trend, more flexible, and more engaging than ever before.

Living styleguides

I’m most proud of the modular design system we created for this project.

Far above and beyond a simple redesign, our primary goal for this project was to to end up with a living styleguide — a collection of pre-coded elements, modules, and theme options that would fit together seamlessly in  infinite layout configurations, continuously updated and maintained on a central server as the brand evolves into the future, and ultimately made available in a CMS so any dum-dum can build pixel-perfect pages in minutes. No more hacked-together one-off pages. No more duplicated code. No more mismatched colors, or off-brand animations, or wondering what size the buttons are supposed to be. Futureproof, as the kids say.

Check em out for real: elements styleguide / modules styleguidewritten documentation

Interaction prototyping to the max

At long last, our budget was big enough to devote serious attention to animations and interactions! Universal text and button rollover styles were painstakingly thought through. Unique hover states were carefully prototyped. A library of reusable animation classes were lovingly crafted.

The result is a website experience full of life and nuance, something that is a joy to explore while still remaining fundamentally simple and usable.

Testing, testing...

We love running tests on the Lithium site. There’s always something that needs to be analyzed and optimized, whether it’s CTA placement, form layouts, promotion engagement, or efficacy of personalized content. Pictured: A/B testing landing page form layouts. The middle version won by a 200% margin!


So... I lost my process documentation for this project. *cough*mycoworkersthrewitallaway*cough*

You'll have to trust that it involved lots of visual & strategic research, brainstorming exercises, physical moodboarding, sketching, pencil & digital wireframing, and more. If you want to see my process for another project, Lindsay Party Guides has great documentation.