Overview
Summary
Redesigned AT&T’s enterprise production process in order to streamline the output of page comps and allow for responsive layouts, by creating a new design system.
Roles
UX Designer, Visual Designer, Strategist
Date
February 2015- March 2016
Impact
Improved the production process saving over $500,000 a year.
Strategic Production Improvements
Problem
Although our team delivered on an Agile development cycle, the production process was unnecessarily cumbersome. For every wireframe that was created, we had to create a higher fidelity comp that was exactly pixel perfect so the development teams knew exactly what to build.
All of these fixed layout comps also presented the problem that they would only work at one resolution. We needed to find a way to transfer from our legacy fixed layouts to responsive or adaptive layouts.
A quicker production process would not only save money but would allow for more iterations in the same amount of time, which ultimately means better software and improved experiences for our end users.
Process
In order to be able to utilize responsive layouts in a “build once, use often” system we needed to adopt a design framework. My first thought was to implement a design philosophy like Google’s Material Design. A design philosophy would help dictate all future designs decisions and unite our style, but we were in need of something more concrete than a high level philosophy.
Brad Frost’s “Atomic Design” was right in the wheel house of what we needed to bring about a big transformation. This graphic from his website helps illustrate exactly what Atomic Design entails, starting with the smallest elements and building up from there.
Atomic design is similar to Object Oriented Programming, in that it starts with small reusable pieces and builds upon them to make the whole. The very smallest elements are called “Atoms”. A group of Atoms make up a “Molecule”. A group of Molecules make up an “Organism”. Groups of organisms become mock page templates, that when filled with real data and images create live pages/comps.
Solution
To demonstrate how to apply this system to our production process at AT&T, I took an existing page layout and broke it down into its “atomic structure”.
(Click to enlarge)
These slides document how a page would be broken into its smallest elements. The elements are aligned to a 12 column grid and their widths are defined as columns instead of fixed pixels. I created a simple universal way to measure heights that spanned all elements. This way, it was no longer a guessing game to figure out how much space went in between each element or section and instead a ubiquitous system.
(Click to enlarge)
The best part of aligning each element to a grid is that they can now also be responsive to width changes. This is how the very same page from earlier could be adapted to different displays. Viewing a page like this was previously impossible.
Tablet View
Mobile View
Each element on the atomic level would still have to have certain individual specs but these would be done once and could then be dragged and dropped for development when needed. In order to facilitate this a library was created with every element measured and ready to go into a page layout.
Example of drag and drop text inputs.
(Click to enlarge)
To prove how easy it was to implement these new page layouts I quickly created a page mirroring the example which can be resized exactly like the mock-ups. I was able to implement this system and I’m not even a front-end developer!
Results
The New Atomic Design system was tested with actual designers on my team and with the first use with minimal instruction we found that the time savings were monumental. After a few iterations based on feedback from our internal usability testing the system successfully lowered the time to produce a page to 1/10th the previous time. The cumulative time savings equated to more than $500,000 annually.
This was a great victory for us because it not only saves a ton of money but it opened up the path towards responsive layouts and ultimately better experiences for our users.