Design for Scale

Here at Aten, we do a lot of work with organizations that deploy web platforms at scale. From universities and government institutions to publishers, healthcare providers and beyond, building expansive and flexible design systems is a crucial requirement for most of the organizations we serve. Here are a few things we’ve found helpful for keeping design systems flexible – and designers sane – at enterprise scale.

Cross-Functional Teams

We involve multiple disciplines from the very beginning of the process: user research, business analysis, strategy, and engineering. Effective design doesn’t happen in a silo, and getting ideas, feedback, and buy-in from the entire project team early on is important.

Research, Data, and Analytics

This is huge, and way beyond the scope of this post, but I couldn’t leave out at least a nod to getting good data as a starting point. Back to the point above about engaging multiple disciplines: we lean hard on user research, usability testing, analytics, and strategy to inform design direction. Good data is critical; it provides both clear direction for design and a benchmark for measuring success. (Related post: Connecting Content to User Needs and Business Goals.)

Shared Inspiration

Just like we involve the entire project team early on, we involve stakeholders from the beginning as well. We start with exercises that help develop a shared sense of inspiration, encouraging teams to dream big while refining our own sense for stakeholders’ aspirations. Over the years we’ve used a number of tools for sharing inspiration and aligning with stakeholder groups at the outset: mood boards, comparative analysis, and voice and tone workshops, to name a few. Regardless of the specific approach, effectively aligning project teams with a shared basis for inspiration is important.

Broad Exploration

We start broad, then gradually narrow our focus over the course of projects. Beginning with exercises to share inspiration, outlined above, we hone in on effective visual themes with design exploration. We explore design with Style Tiles or Element Collages, presenting components that demonstrate the use of color, imagery, typography, and other visual elements that clearly establish voice and tone – without tackling the needs of specific content or layout. Starting broad helps build consensus, and is particularly effective when dealing with large stakeholder groups.

Page Mockups

In recent years there has been a lot of momentum around atomic design and holistic design systems, favoring component libraries over specific page designs. While our goal is ultimately to develop comprehensive design systems, we still find specific page mockups to be incredibly important for establishing design direction. Page mockups play a crucial role in providing crystal clear direction for how a design system works in practice. They provide context for the elements outlined in component libraries and help us establish hierarchy for information on each screen. Designing individual screens helps prevent designs from being overly generalized, from feeling sterile or generic. Further, we still find page mockups to be the most effective deliverable for getting design approval and stakeholder sign-off. And while mobile is a huge focus for us, we typically work on – and present – desktop versions first. Why not start with mobile? For us, it’s a matter of solving the right problems in the right order, of running effective presentations and gathering needed approvals. While our design process is strongly focussed on mobile, we’ve found it far more effective to work out content hierarchy for more complex, multi-column layouts first, then refactor designs for the simplicity enforced by narrower, mobile viewports second. Similarly, stakeholder teams tend to be more confident responding first to large format mockups than to mobile versions.

Documented Design Systems

While page mockups are effective and important, designing every single page for any but the simplest of projects is impossible. We use component libraries to document design systems, and a few page mockups to show the design systems in action. We do not attempt to design every single page. Rather, we rely on a thoroughly documented design system coupled with a few specific page examples to establish an extensible framework that holds up at scale. Documented design systems establish consistent patterns for solving a broad range of problems as they arise. They help increase efficiency over time, and provide a visual toolkit that can grow over the life of the project.

Design Systems Won’t Replace Designers

Thoroughly documented design systems are important, but they’re no substitute for keeping designers involved throughout the process. Back to the point we opened with: cross-functional teams are critical to the success of impactful digital projects. As projects evolve, leading up to and even well after the initial launch, there will be new challenges in need of new solutions. Expecting design systems to just work, without the need for new creative thinking and problem solving, is unrealistic and even dangerous. Involving designers at all stages ensures that design systems can adapt and grow to support new, unique challenges. We keep designers integrated in project teams throughout the entire process – from kickoff, to launch, to ongoing iterative releases.