Component-based Design to the Rescue

Imagine merging an 800+ page legacy website with another 800+ page legacy website when your end goal is to create a single streamlined, author-managed CMS. I don’t have to imagine anything because this was my first project at Make (eeeep!). Well guess what? We did it! And it wouldn’t have been possible without the design and implementation of content components.

Hey Tina, what do you mean by ‘content component’?

I realize that there are many, many varying definitions for the term ‘component’. I’m not going to debate these, but I will try to define my version of the term. A content component is a set of interchangeable design modules that can be reused on different web pages to accommodate various types of content needs. Once assembled, the components form the body of a web page.

Hold your horses lady! Isn’t that cheating?! As a designer, you might gasp at the very thought of a templated way to design a website. What about creativity? Where’s the innovation? I hear ya, but bear with me. There are places for uniquely designed pages (such as a homepage, or a small website with few pages) and there are places for component-based design—like when you’re creating a content-heavy website managed by multiple authors, most of whom are probably not designers.

The Problem

Client: I want to make pages for all types of content all of the time, because content.
Designer: Gasp, the client made the text orange! Gasp, where did that pink button come from? Gasp, why is everything centre aligned?!

Sound familiar? Yeah…

So how do you give content authors flexibility, while maintaining a cohesive design? Survey says… CONTENT COMPONENTS! If you give your clients enough solutions, they will avoid using the dreaded CMS wysiwyg.

Here are (some) of the steps we took:

1. Content delivery system audit
First, we analyzed the site’s existing content and worked closely with the authors to create a content delivery wishlist. By working with the authors rather than independently from them, we gained an understanding of their needs, frustrations and limitations. We were then able to understand why the authors were making design decisions. Most of the time, it wasn’t for the sake of design. The CMS template simply did not offer a solution for the content that authors needed, so the author was forced to make a design decision. These decisions in turn create inconsistencies in the site’s overall design patterns.

design-inconsistencies300
“The Homer”


2. Asset Audit
I won’t lie, this part was fun (as she sings “one of these things is not like the other”). This is when you can really get your design OCD on. We painstakingly went through the site, page by page and took screenshots of buttons, forms, hyperlinks, dividers, strokes, colours and fonts to make a visual inventory of the site’s UI elements. Aside from being an invaluable guide to help us create a slick CSS style guide, this was also a useful tool in pointing out design inconsistencies to reluctant stakeholders (wink, wink).

audit
Image source http://bradfrost.com/blog/post/interface-inventory

3. Wires & Design
Ok, first off, you may have noticed that I haven’t yet mentioned strategy or information architecture. Being a UX practitioner, I did feed-in on the work being done on both strategy and IA, and the development of these happened in parallel with the work I was leading with the audits. So, with strategy, IA and the audit data in hand, we were able to breeze through wireframes and design. After a reasonable amount of design iterations (considering the scope and size of the changes being proposed), we finalized a set of content components that could handle various content requirements. What was once a website with a single column layout populated with tonnes of copy, random header styles, inline images of all shapes and sizes, was transforming into a dynamic website with a content hierarchy and consistent design patterns. Praise the UX lords!

ubc-components
Content Component Library


4. Implementation

The CMS in this case was WordPress. Our developer (ahem, in-house unicorn) Alex implemented a component-based logic in the admin panel to give the content author the ability to choose from a set of components. What we found was that the content creators started to structure their content to fit inside the various component layouts. This helped streamline and standardize not only the site’s content, but also helped the authors focus on content creation rather than formatting. The result: we helped make their jobs easier.

Screen Shot 2016-04-21 at 12.56.15 PM
WP Admin Component Selector

5. Client Training
Once everything was developed and tested, we traveled to our client’s office to train them on how to use their brand spankin’ new CMS. The best part of this whole process was seeing how happy the content management team was to have access to such a wide variety of content components that were easy to use and understand. No more jamming large volumes of content into a single column layout for you, my friends. And of course, every designer on the planet is pleased that ‘others’ only have access to limited formatting tools. No orange text for you! Smiles all around. Pats on the back.

Tina-Fey-giving-herself-high-five
Because Tina Fey

Flexibility, not freedom.

It’s important to note that the success of this project happened because we worked with our clients. We listened, we iterated, and we delivered a product that is sustainable, manageable and structured (and also looks niiiiiice). As designers, we can often get annoyed with, well, everything. Why would they want three columns in a four-column layout? No that shouldn’t be bold, it’s not an H2? What? ORANGE? AGAIN? Instead of being annoyed, we should help our clients solve problems. At its core, that is our job isn’t? Whatever we want to call ourselves, be it a product designer, UX designer, graphic designer, freakin’ design ninjas (don’t get me started on that one) we are problem solvers and we do it with style.

Related Posts