Designing and building software is a team sport that requires different skills, good communication, creativity and discipline. For a long time, there was a gap between the design work that defined the structure, flow and interactions of software and the development work that brought it to life.
Connecting the languages of these two different skills—design and development—was a challenge for large enterprises as well as small companies. The gap still exists, but thanks to the evolution in both UX design and software development—and the tools we use—things are rapidly improving. UX style guides are one such tool that is helping to bridge the gap.
UX and front-end development fields share common threads of consistency, modularity and efficiency. The design goals of consistency and patterns that support ease of use and learning align with development systems of templates, grids, components and styles. The emergence of front-end UI frameworks like Bootstrap, Foundation and Semantic UI provides a way for teams to co-create a UX design system that also serves as a library of code for development. These frameworks make it easier to design responsively and design for accessibility.
Here are some of the universal benefits a style guide can deliver:
• Better adoption—A successful style guide isn’t created BY designers FOR developers. If it’s done right, it is built together and becomes a universal language everyone uses. It’s essential to include QA testers as well to get their input. Co-creating a style guide will increase the likelihood that it gets used and continues to evolve.
• Codify best practices—You may already have shining examples of a full application or key screens or behaviors you’d want to reuse. Capture these in your style guide as a central place for communication.
• Improved usability—The consistent use of language, colors, layout and UI components supports end users in their journey and reduces cognitive load.
• Path of least resistance—Development teams will appreciate the reusability of code, especially if they’ve had a hand in creating it.
• The right focus—Software design and development is full of challenges. Designing and building commonly used components shouldn’t take time and energy away from solving genuinely complex and unique problems.
Here’s a real-world use case where a Pittsburgh utility sped up app development with a user-centered style guide. Let’s discover how they arrived at the decision and the apparent benefits of a technical style guide.
Duquesne Light Company (DLC) is a leader in the transmission and distribution of electric energy, serving more than half a million customers in southwestern Pennsylvania. Following a large IT transformation and corporate rebranding initiative, the company found itself without a technical style guide and brand standards for internal applications. DLC enlisted the UI/UX design team at OpenArc, a technology consulting firm specializing in software development and IT staffing, to create a technical style guide and toolkit using the company’s existing brand style guide and specifications.
Now developers, designers and marketers within DLC have a living document that outlines all the digital design patterns they must work from, streamlining the development process by enabling the team to build applications more quickly and efficiently. By having OpenArc establish design patterns and a toolkit that includes a set of components in Bootstrap 4, the team at DLC has the foundation to provide a consistent experience within and across applications. The visual design and interaction feedback considers the needs of visually impaired users and component code contains ARIA tags to present content through screen readers. A project team now can focus more of its efforts on Human-Centered Design methods to understand the unique needs of end users and align them with the needs of the business.
The roadmap for DLC includes replatforming legacy applications and rolling out new external facing applications. The style guide will evolve as new needs arise, and new UX patterns emerge. The company predicts that the implementation of the style guide will significantly reduce the overall number of development sprints and that team members will be able to produce new apps quicker than they have ever been able to do before. The technical style guide is already being well-received by DLC’s corporate communications group and the software development teams. “We’re preserving our brand while cranking out applications at a record pace and saving a lot of time,” said DLC.