Implementing Atomic Design at Wipro Digital

by James Nash
Director of Creative Technology, Wipro Digital

As more and more of our work is done entirely digitally, it’s become necessary to rethink “tried and-true” methods of communicating ideas in favor of something different.

Navigating both the technology and design worlds, I am always on the lookout for ways of smoothing the transitions between design and development. I first came across Atomic Design about 2 years ago and it immediately struck me as great method for doing just that. More recently, my colleagues and I have been applying Atomic Design here at Wipro Digital and are excited to share our learnings with the world.

Moving Beyond Traditional Brand Guidelines

Most clients I have worked with have an in-house style guide or “brand book” that documents their brand identity and explains how it is applied to various media. Our digital design teams strive to follow such guidelines when crafting user experiences for our clients.

Unfortunately, the style guides provided to us are often lacking when it comes to digital media such as apps or websites. Either the guidelines do not cover important details or, worse, they are counter-productive because they fail to accommodate the diversity and complexity of modern technology: for instance, mandating fixed-width, pixel-precise web page layouts in an era where fluid, responsive ones are the norm. I suspect that the authors are frequently driven by a traditional print media mindset, treating digital media as an afterthought rather than being central to their brand’s considerations.

As a result, there is a growing trend in the web design community to move away from documenting a brand’s user interface look and feel in static media to documenting it in the form of a website instead. Designing and documenting in the actual target medium makes it possible to accurately describe all the nuances of a digital design. Other benefits versus static documents also include faster and more convenient distribution: sharing a URL is much quicker than sharing multiple versions of a large file. If they are not already doing so, I would strongly encourage brands to adopt such an approach for the digital portions of their brand identity.

How Atomic Design Improves Workflow

In order to effectively catalogue and document all the user interface components that make up your overall look and feel, you need a good way of organizing them. One method that has gained a lot of traction is Brad Frost’s Atomic Design. It gives us a reusable and easy-to-understand vocabulary for categorizing UI elements. In conjunction with web-based style guides, it also helps get designers and client stakeholders to think about digital designs in a more systematic way. That in turn allows for a smoother and more efficient transition from design into development.

Atomic Design resonated well with our own design, development and management teams and we are increasingly using it on our projects. It’s also been well received by our clients, who especially appreciate accuracy and flexibility of online style guides versus the static PDF documents and Photoshop compositions that they would have otherwise received.

If you’d like to learn more about Atomic Design, its benefits and what Wipro Digital is doing with it, I invite you to watch this recording of a presentation I recently gave in our London studio: https://vimeo.com/157213875.

Originally posted on Wipro Digital, an innovation-led, digital transformation partner built for today’s digital challenges.