Capital Group has about a couple dozen core web properties, and even more international sites, all of which needed to retain visual consistency. This consistency could only be achieved by a robust, well-thought-out design system and pattern library. To compound this, we were switching from a CMS built in-house to Adobe Experience Manager, in order to empower non-coders to author pages. I was assigned as the Lead Visual Designer to create the digital translation of the brand, define the design system and pattern library, work closely with developers to encapsulate that within AEM’s templates and components, and document that in a Digital Style Guide. And oh yeah, it needed to be responsive too.
Assess: I performed a visual audit of the existing site and found rampant inconsistencies in the UI. The audit also gave us a list of what core UI elements I needed to redesign, and revealed gaps where new UI had to be defined.
Define: I then worked closely with the UX designers to layout the site and create rough, low-fidelity designs for prototyping and usability testing. Once rough designs were refined through user testing and iteration, final high-fidelity designs were created. I worked with the developers to create a modular design system that would be implemented as templates and components within AEM.
Document: Finally, all the designs were documented as a Digital Style Guide, which incorporated both visual specs and design patterns and behaviors.
Digital Style Guide
When I created this style guide, I never thought it would be shared beyond the designers. This became the bible from which everyone referenced styles and patterns, from designers to writers to developers. Eventually this was transformed into an online living document, but the online version never was as complete as this version, which I maintained.
Mobile usage among our end users was growing, and the company had yet to define a mobile strategy. The UX team decided that a responsive site, vs. a separate mobile-optimized site, was going to be easier to maintain in the future despite the greater level of effort up front. One of our guiding principles for content was to maintain parity of content across all breakpoints. I helped define the responsive strategy, reflows, and behaviors. The responsive specs were also defined in the style guide.
The website rebrand was successful in achieving its many goals:
1) Created visual consistency and adherence to the brand. A design audit of the old site revealed several different iterations of UI elements. There were probably eight versions of buttons alone. Non-designers were empowered to create pages with some reassurance of adhering to the brand.
2) Created a library of reusable patterns, and templates and components. Prior to this developers would create pages from scratch. Non-developers were empowered to author pages without the need for dev resources. Speed to market was greatly reduced.
3) Reorganized the site to align with user task-driven behavior and mental models. Site users were empowered to get what they needed to get done more efficiently and naturally. This helped AmericanFunds.com garner a top advisor site rating from ThinkAdvisor, one of the premiere online resource for financial professionals, as voted by their subscribers.
4) Streamlined the process by which sites were maintained. Having all the web properties under the same enterprise WCM improved how we updated content. Prior to this, a chain of change orders had to pass through approvals of several people before the developer could make a change. We cut down on that number and even defined a new non-developer role that could make that change, freeing up the dev resources to make continual improvements to our templates and components.
5) Brought us into the mobile game. Admittedly we were pretty far behind in our mobile strategy. Prior to this we created a mobile optimized site, but content was limited, and maintenance across two versions of pages was difficult. Now with templates and components with their own responsive behaviors, pages could be created across breakpoints easily.