Creating UI Standards / Style Guides with Elizabeth Benker

When ZS Associates went through a company-wide rebranding in 2014, Elizabeth Benker—at the time a Design Lead, and now the UX Manager for the firm’s Javelin™ Product Suite—saw the opportunity for a systematic, standards-based approach to the design overhaul of the product portfolio. The result, after a six-month effort requiring a balance of focus between the UX team’s standards work and its members’ various primary job functions, was a comprehensive new set of design guidelines: the ZSUI Standards.

In a postmortem phone conversation with Axure this spring, Elizabeth told us that Axure RP turned out to be integral to the process of developing the new framework and communicating it within the software development team. “The project had been dragging on because we were stuck on the tool question. When we finally landed on Axure, we all said, ‘Genius!’ We were all fired up. We had everything we needed to get started.”

The Project

The firm’s larger rebranding effort had provided Elizabeth and her colleagues in UX with a rare moment. “All of a sudden, all of the software we build had to be updated at the same time. We wanted to seize the opportunity to develop a consistent look and feel and a single set of interaction patterns. Because there was so much excitement with the new brand, we had a lot of organizational momentum.”

The goal was to unify ZS’ Javelin™ products through a consistent user experience, starting with a unified user interface. The means to that end was conceived as a central repository where anyone—UX designers, product managers, front-end developers, and even consultants developing custom applications for clients—could go to learn about design standards, see and experience working examples, and download functional assets.

As the UX team began to gear up for the standards effort, the potential benefits of the project became even more apparent: the new framework could also serve as an onboarding tool for new team members. “We were painfully aware that our lack of documented standards wasn’t just resulting in a lack of alignment across teams, but also frustration among our own new people,” said Elizabeth.

We had a new person join the UX team in January—she was much more effective from day one. Her first week, she’s wireframing, and it looks like our stuff!

The Team

The project began with just three designers—Elizabeth, Shannon Burch, and Andrew Heber—a tight-knit group who had forged a common sensibility through sheer time spent shoulder-to-shoulder. “The three of us had worked on a massive, complex project together. To support multiple people working on the same design, we’d quickly aligned on styles. We’d worked it out through many conversations. When we were no longer on that project, we brought the same standards back to our own products. And for a while, that worked.”

But the ad-hoc approach to standards wasn’t scalable. “They were locked away in our heads,” Elizabeth recalled. “For the framework project, we needed more hands on deck from a UX perspective. The original three of us had all of these standards, discussions, agreements, but we hadn’t documented them. We just knew the standards—or we thought we did! But we weren’t as aligned as we thought we were. It was frustrating. A new designer would show me a screen and I’d say: these aren’t aligned with standards. They’d show someone else, and another opinion would emerge.”

The Tools Question

Perhaps the very method by which the UX team aligned could also be the platform for distributing the finished framework? They began to look for the right tool.

“We met with our front-end developers. We asked: should we buy an off-the-shelf tool to create a style guide in a way that multiple people can access? A CMS, or maybe some kind of style guide app? But all of the tools to build style guides were not quite right for us. We knew we wanted an online repository that communicated and presented our standards.

“Our designers are not developers. They’re designers. Not unicorns. We really, really wanted the designers to be able to create and update standards themselves. And we wanted those UI interactions to be demonstrated via working examples; we didn’t want just pretty pictures of them.

“With all of those criteria, we struck out. We even discussed building it from scratch through a vendor. For a while, we felt quite discouraged.”

And then Andrew, a Senior UX Designer, said “Why don’t we just use Axure?”

Results

The ZSUI Standards project ultimately took the form of a microsite, built in Axure RP and published to Axure Share, along with a downloadable package of production-ready CSS built by their front-end developers. UX Designers use the Axure masters and libraries as a ready-made, drop-and-drag toolkit for creating on-brand, interactive wireframes. UX Developers leverage the CSS Framework when building new features.

Elizabeth told us that the results have been positive. “The UX team has been using the new framework since the beginning of the year. The wireframes are on-brand right out of the gate. They’re able to learn the standards quickly. It’s really cut down on the time, both for wireframing and for onboarding new UX team members.

“Now it’s so much easier. When we had a new person join the UX team in January, the contrast between onboarding her and the previous person was like night and day. She was much more effective from day one. Her first week, she’s wireframing, and it looks like our stuff! And visual QA time to ensure the finished product is polished and on-brand has also decreased because everyone is pulling from a shared collection of design and development assets.”

Ongoing

Axure RP’s features geared toward collaboration and content reuse—team projects, discussions on Axure Share, masters, and custom-built widget libraries—have facilitated the upkeep and continual improvement of the ZSUI Standards.

“Now we have a backlog. We release one new standard a week at this point. We started with the straightforward stuff: radio buttons, a fonts page, a colors page, error handling, success messages. Aligning the standards is no small feat. It’s a lot of passionate arguments and discussions.

“But what’s so great is that we have time now for conversations about the deeper things. Now we’re really tackling: what should the filtering experience be like across our products? Things that are much more complex. Now that we’ve solved the lesser issues, it frees us to focus on the thornier problems.”

It empowers people—they can put things together themselves. They have more confidence that what they put together is high-quality and consistent.

Next Steps

Elizabeth is excited about what the new framework means for the future of design collaboration across teams at ZS Associates. “We have a test case happening right now. A team that is not a product team is using the assets. They’re building something and it looks exactly like one of our products. It’s pretty cool.”

Pavneet Kaur, a developer based in ZS’ Pune, India office, shares the sentiment. “We’re building a new product with a very intense timeline. Initially I was a bit hesitant to use the ZSUI Framework. I thought it would be a difficult and time-consuming activity for me to understand and use the library they made. But Mikhail (Vazhenin, a front-end developer involved in the standards effort) made it look like a piece of cake. To summarize, I would say: it’s easy to make things look hard, but hard to make things looks easy. ZSUI makes everything easily beautiful and consistent.”

“It empowers people,” said Elizabeth. “They can put things together themselves. They have more confidence that what they put together is high-quality and consistent.”

About Elizabeth Benker

Elizabeth leads User Experience strategy, research, and design for ZS’ Javelin™ suite, a set of software applications that maximize sales force performance. In addition to her product role, she also applies UX methods to consulting engagements focused on solving complex business problems for global firms. In her career as a UX professional, Elizabeth has worked with a wide range of Fortune 100 clients. She has also worked on multiple in-house teams and taught user-centered design at the university level. This varied experience has shown her that good UX is truly a strategic differentiator. It is this belief that fuels her passion for UX, whether she’s working to improve a CEO-level executive dashboard or a consumer-facing cruise-booking engine.