Aja Shamblee Experience Design
Created with sketchtool. Back to work, we're done here.

Github

How we built fully branded, flexible CMS templates and reduced
deployment reliance on design and engineering for 80% of our pages.
Situation
  • We used to take months to build landing pages. Our most popular home page redesign took 6 months. Our impact was limited to a few projects, with several requests for support that would increase the company bottom line, getting declined.
  • Our site branding was fragmented, reflecting individual design preferences with no clear through line or connection to our core brand. We had branding but no brand identity.
  • We lacked an opinionated design system. While designers reused some patterns across experiences, we had several redundant components and engineers were building each page from scratch.
  • Goal: Reduce design and technical debt across the site. Reduce the time it takes to launch high quality, high impact experiences. And enable teams to ship updates without relying on Design or Engineering teams.
Team Site Designers Design System Designers Design System Engineers Brand Engineers CMS Engineers Brandstudio Art Directors
Responsibilities
  • Product Management: Define project objectives
  • Design Director: Define design expectations, critique and collaborative programs
  • Project Management: Define roadmap, scope and milestones
Game Time I started with my own Design audit, narrowing the site down to the top 10 components that would make up 80% of our pages. I scoured the site ecosystem and documented all the styles and redundant patterns, looking at various header styles, type hierarchy, CTA’s, iconography, form fields, product demo styles, illustrations, brand patterns and even photography. From there, I moved on to a content-type audit, recording different variants of common patterns like heroes, testimonials, stats, value propositions, related content, logo suites and even pricing. Finally, I audited how those components came together on the page, looking at ways we can improve layout, content grouping, increase legibility and improve page hierarchy through copywriting.
I then tasked my team with refactoring our foundational styles and components. Starting with typography, type scale, color, spacing and using those ingredients to inform components and their newly minted variants. With brand guidelines getting created in parallel with our audit, we leaned heavily into editorial styles where type and images took the spotlight. Every concept we created, we stress tested on an existing project, refining and revising based on limitations and unanticipated constraints.
Once we were happy, our Design Leadership team helped us organize a team to build a marketing extension of our design system, connecting designs to code. Our mission was to convert everything from Rails into React, using Storybook as the true source of truth for all design patterns. Designers needed access to the system in Figma, while Engineers needed access to the tokens and components in Storybook. So we built a program, whereby Site Designers operated like concept car designers, and our design system maintainers operated like assembly factories, connecting everything to our existing API.
We then turned those components into templates. We expanded our team to include CMS product owners and engineers to make authoring and publishing pages easy. Starting with typography, type scale, color, spacing and using those ingredients to inform components and their newly minted variants. With brand guidelines getting created in parallel with our audit, we leaned heavily into editorial styles where type and images took the spotlight. Every concept we created, we stress tested on an existing project, refining and revising based on limitations and unanticipated constraints.
Finally, we defined brand themes to be applied to any template. Branding a template became as easy as selecting a radio button. While we worked on the system, our Brandstudio team of Art Directors were working tirelessly on our brand guidelines. We took those styles and started defining brand themes based on our organizations core brand pillars. We used those themes to bake colors, assets and backgrounds into each component, and eventually each template. With a growing asset library of brand images, now anyone across the org could publish a fully branded, up-to-date landing page with virtually no engineering or design support.
Results We've reduced our time to launch landing pages from months, to as little as days.
:: Standing Ovation :: Show me more Created with sketchtool.