Introducing Redpoint’s Design and Front-end Engineering Landscape

A big movement over the past few years is the rise of design and front-end engineering. These groups have adopted component-driven design as a best practice for UI creation. Design systems enable component-driven design by creating consistency across an organization. While design systems help the process there are still challenges when handing off mockups and collaborating between the teams. An additional trend is the need to create accessible UI. Below we categorize ~50 solutions to highlight key players and to clarify how they interoperate. As evidence by the numerous vendors, we believe this category is ripe for disruption and are excited to speak with startups in the space.

Designers and front-end engineers take center stage.

Our research suggests the ratio of designers to back-end engineers has dramatically shrunk. Five years ago the ratio was roughly 1 designer to 25 engineers. After speaking with teams, on average the ratio is 1 designer to 6 back-end engineers, about 4X more coverage.

Front-end engineering teams have started to gain prominence as well. Our research finds that there is now about 1 front-end engineer to 2 back-end engineers. With managed services, front-end engineers are empowered more than ever before to be self-reliant. They can do much more with less back-end support.

In turn, the modern ratio is about 1 designer to 3 front-end engineers to 6 back-end engineers.

Component-driven design is a best practice.

Component-driven design (atomic design) is a practice of modularizing UI development into components. A component is a well-defined, independent element that solves a particular task like a dropdown menu, slider, or button. They are developed in separation and composed to build larger components and the entire application.

There are numerous benefits to component-driven design including faster development, simpler maintenance, better component reusability, and shortened learning curves. Moreover, this practice tries to minimize the designer-developer handoff by enabling stakeholders to work more closely together throughout the development lifecycle, particularly reviews. Finally, it can provide more accurate time estimations for a new feature that must be implemented.

Moving to a component-driven design often requires the need for style guides for consistency and documentation so stakeholders across a business can leverage the work. In turn, a new solution called a design system has arisen.

Design systems set and maintain standards.

Design systems (design languages) are a collection of rules, constraints, and principles, implemented in design and code. They are intended to streamline development and create consistency across teams and the broader organization. A design system is comprised of three main parts: 1) a component library, 2) design style guides, and 3) documentation.

These systems are useful for small businesses but are particularly powerful for large organizations where design and front-end engineering teams may be aligned by product. Siloed teams are prone to inconsistent user interfaces and development inefficiencies. Design systems create cohesion, decrease duplicative work, and accelerate new team members’ learning curves.

We’ve seen the rise of design system teams from Airbnb to Uber to Atlassian. These teams create, document, and deliver a unified set of guidelines, toolkits, and accessible components for user experiences. They maintain the living system for designers and developers to consume as their single-source-of-truth. Finally, they often evaluate design and front-end tooling to improve productivity and workflows.

Bridging the gap between designers and front-end engineers.

The workflow between designers and engineers is fairly consistent. Designers mockup the interface with Sketch, Figma, among others. They then hand off the mocks to the front-end engineers, who are responsible for coding up the mockup. The engineers may create the new component from scratch or reuse components. Once the new component is created it needs to be rendered so both team members can review it and agree it is correct.

There are a few challenges with this process. First, designers may want to get feedback on their prototypes from users so use solutions like Maze. Next, designers hand over a file to developers but sometimes developers don’t know if they have the most up-to-date version or know the designer’s intent. Abstract tries to improve collaboration through version control, commit history, comments, and annotation. The files themselves aren’t code which causes the time to creation to be longer. Solutions like Framer X try to improve the process of translating designs into usable code. If a team isn’t using a solution that generates code, they have to code it themselves. Reusability of the components is a huge bottleneck. Sometimes teams would share folders, a source code repo, or simply knowledge in people’s heads. Instead, Storybook or Bit, component libraries, lets teams reuse what’s already been created to accelerate development. Finally, it can be hard to tell if the component is correct. UI testing tools like Percy and Chromatic take snapshots of the different versions to highlight the changes and catch unintended visual bugs.

A thriving ecosystem.

There are numerous solutions trying to make designers’ and front-end engineers’ lives easier. Below we categories ~50 solutions across 11 categories. The top row reflects steps along a designer’s process from ideation to hand off to a front-end engineer. We acknowledge that many of the design solutions are taking on more functionality to become real end-to-end design tools.

The bottom row highlights more of a front-end engineers’ workflows including design systems, its sub-components, and testing. We’ve also included visual programming solutions, like Webflow or Carrd, since these tools can translate designs into clean, semantic code that’s ready to publish to the web, or hand off to developers.

Accessibility is key.

In the U.S., Section 508 Amendment to the Rehabilitation Act of 1973 requires all Federal agencies’ electronic and information technology to be accessible to those with disabilities. On October 7, 2019, the Supreme Court upheld a U.S. 9th Circuit Court of Appeals ruling holding that the Americans With Disabilities Act protects access not just to restaurants and stores but also to the websites and apps of those businesses. According to UsableNet, there were 2,285 federally filed ADA web accessibility-related lawsuits in 2018, up from 814 in 2017, a 181% over 2017.

Accessibility can help everyone, not just the disabled use websites. For example, testing for discernible text or that an element has sufficient color contrast (read Stripe’s recent post here). Accessibility is usually tested during the build pipeline using open source add-ons to Storybook, Google Lighthouse, ESLint, or Deque. Matt Biilmann, a Netlify co-founder, mentioned the value of linting for accessibility at the most recent JAMStack Conference. Unfortunately, a lot of accessibility testing is still manual today. A process can’t always see if some features, like popups or screen readers, are accessible.

During our research we found that consumer-facing websites or those with older demographics are more actively performing accessibility testing than enterprise websites. Moreover, some businesses have dedicated accessibility teams whose sole focus is the testing.

Designers and front-end engineers are a growing employee base that is adopting component-driven design, and in turn, design systems. This best practice helps bridge the gap between the two teams but processes still have room for improvement. Our landscape highlights some companies, and we can’t wait as more startups emerge in the ecosystem!

Special thanks to Vivek Ramaswami of Redpoint Ventures.