Design Technologists: Front-End Development in the Design System Era
Let’s be honest. The relationship between designers and the engineers who execute their designs can be rocky.
Engineers get frustrated when designers design things that were “impossible” (read: would be hard to build, don’t play nice with the API, or are likely to cause cross-browser issues) and that it is the engineers who are on the hook for all the bugs created by the design complexity.
Designers can never understand why their designs never make it to the user intact. Can’t the engineers see that the leading and kerning is nothing like the PDF exported from Sketch/Illustrator? Do I have to spell everything out for the engineers, why can’t they intuit the right choice?
Engineers are from Mars, designers are from Venus, etc…
But things are starting to evolve in organizations that are willing to reconsider the old-school assembly-line approach of drawing immaculate high-resolution pictures of websites in comping tools and throwing them over the wall to engineers, who then take up the designs a few sprints later when they have capacity and when the designers have already moved on to another focus.
Designers have realized that front-end code is not that much more complicated than mastering Sketch or Illustrator and a knowledge of their materials (browsers, native apps) strengthens their design.
Engineers have realized that there is a relationship between systematic design pattern thinking and creating DRY code, that there is a mathematic elegance to typographic theory and they can express it in code.
Organizations understand that designers and the people who realize those designs should have a shared context, timeframe, language, and incentives.
This intersection is where you find the Design Technologist. I’ve held this role (with differing titles) in two large Fortune 500 companies and I’d like to tell you what I’ve learned about this role.
Who is a Design Technologist?
Design Technologists have an expertise that combines traits of a great designer and a great engineer. We have advanced knowledge of one or more digital delivery mediums but also a strong basis in UX, visual, and motion design.
Design Technologists serve as a bridge between design and engineering. We bring an engineer’s pattern thinking to systematizing designs and a designers eye for fit and finish and empathy for a user’s needs.
Design Technologists can and should be found at every step of a reasonably-sized design operation, our responsibilities should include:
- Informing the design process with the opportunities and challenges presented by the medium though which the user will experience the product.
- Building a scaleable code-based design system that has the design intention baked directly into it in the form of component granularity and class-naming choices.
- Leading styleguide-driven development/design to create product efficiencies.
- Building tools that help operationalize and bring efficiencies to design activities.
- Prototyping user experiences to the fidelity required to gain insight in user testing.
- Helping to assess the technical impact of design decisions, and insuring less impactful options that can achieve the same design intent are considered.
- Providing in-browser proof of concept.
- Ensuring that designs and the code which manifests them provide progressive enhancement and accessibility affordances for all users.
How Do We Fit In?
Design Technologists are at our best reporting into a design organization, working directly with the rest of the Design team.
We should be there sketching with you on paper and should help you take your sketches from paper to browser with a minimum of comping or specifications.
The design deliverable for your web projects is then production-ready front-end code built from the same materials, frameworks, and code style as the final UI that the user will experience.
The Design Technologist will work with the Engineering team to ensure that the code is faithfully implemented and that any future deliveries correct any usage issues expressed by engineering.
The Value Added
Industrial designers don’t hand sketches of their products to the assembly line. They work with materials experts to prototype with the bare minimum of fidelity to test the concept then increase this fidelity over time though tested iterations.
For some reason with digital products our industry has decided that we can move from static visual representations and specifications created to production. The truth is that having the materials expertise along for the ride and experimenting with the real materials until a series of inexpensive failures add up to an inexpensive success.
The Design Technologist will prevent the designer from needing to draw high fidelity representations of UI components that we already have in code, only to file away these comps in an archive when the project is over. If you put that same energy into building and improving reusable UI components your end result is code that can be used immediately and repeatedly which has been proven to work across browsers and be faithful to the design intent. No more expensive back and forth between engineering, QA, and design.
Design Technologists also keep your designers honest. If a designer is proposing a new design which serves the same purpose as another similar pattern the Design Technologists can work with them to see if an enhancement to the existing pattern may be more appropriate and that the improvement can be safely propagated throughout the product. This ensures that the global UI stays current and that the presentational code footprint that needs to be maintained and pushed over to the user remains small.
Design Technologists bring a constructive pessimism to the design process. Designers can often be overly optimistic, or golden-path oriented. Often times a show-stopping potential exception is not identified until it is being built in Engineering and the design must be sent back to the proverbial, and literal, drawing board. Design Technologists will make sure that exceptions and engineering impact will be considered throughout the design process and the resultant design will be all the better for it.
Who We Are Not
So you are a Creative Technologist right?
No. Creative Technologists are those folks hacking Raspberry Pi’s and Amazon Alexa’s to figure out what new technological innovations can do for your company. When your CEO reads an article in Forbes about Facebook bots and asks you what you are doing about it, you call the creative technologists. Design Technologists are more concerned with realizing design-driven solutions for user needs and building a toolset to facilitate that.
What about UI (or “Full-Stack”) Engineers?
As more and more of responsibilities traditionally associated with the back-end have moved to the front, and as front-end-associated code (i.e. Javascript through NodeJS) has moved to the back-end, and front-end tools like React, Bootstrap and Zurb Foundations have made it easier than ever to branch into areas of development in which one has not previously specialized, many organizations are now looking for “full-stack” engineers to do everything.
This is wonderful as it creates many efficiencies in bringing a product to market, but in practice I have seen a fairly mixed bag of experience-levels and design understanding in these developers. Many of these developers just do not have the interest and background to be strong front-end developers.
Design Technologists can provide these developers with a set of reusable UI components that allows them to build bullet-proof, aesthetically-sound user experiences. Specification documentation and back-and-forth with designers shrink noticeably and story estimation confidence grows. When they need a button, they now know exactly what classing to use and they can rest assured that the resultant button will meet brand, user-experience, accessibility, and cross-browser support standards.
Wait. Design team delivering code?!? Engineering Won’t Like This One Bit.
Maybe not, at least not some of them and not at first. This shouldn’t be threatening to them. Design Technologists are simply providing the basic building blocks that represent the core UI patterns from the design process. The Engineering team shouldn’t be concerned with re-inventing the wheel (or, in this case the button or form input) for every project.
The code that the Design Technologist team delivers should be held to the same standards as any other code and should be managed through code reviews and pull requests just like any other code. Engineering should also be brought in during the interview process for Design Technologist candidates.
Hopefully over time, engineers start to see that they are getting fewer comps to pixel push, and that they are spending less time troubleshooting UI bugs. They are freed to solve the really difficult engineering puzzles that actually warrant their expertise.
Design Technologist should start slow, build trust, listen, and be humble. Invite engineering to your design and code reviews. You’ll have some tough conversations, but in time your Engineering team will come to trust and understand what you are doing and you’ll develop a mutually-beneficial symbiotic relationship.
Incentives and Behaviors
Engineers are generally incentivized to complete as many user stories as possible while maintaining a high level of code quality. If the user story was not the right story for the end user, that is not their concern. Spending a day fine tuning the speed and feel of a modal window is generally out of the picture. Sure that button is 10 pixels too close to the input field above it, but should that stop a release? Certainly not. Right?
Designer Technologists and the rest of the design team are, however, responsible for creating high quality consistent user experiences and by eliminating every barrier they can to a user’s understanding of a product and their ability to accomplish the tasks that enrich their lives and provide business value to the company. They create a scaleable system that ensures that the button spacing is always perfect, automatically.
By identifying the difference between building a reusable design system and the act of using that design system to execute the UI layer of given user story, we allow both teams to focus on what is important for that task. We can rapidly execute granular and varied user stories because we have the best building blocks available.
Where This is Going
Roles evolve constantly. In design the firm division between UX and visual design has melted away. Engineers don’t tend to think in terms of front-end vs back-end any more.
More and more designers are simultaneously learning web and app development skills as they learn design. Building things is getting easier, we have better, more consistent browsers, frameworks are becoming more comprehensive and more approachable.
In an ideal world we’ll hire engineers and designers on spectrums based on our needs and existing team make up, but scale often demands more rigid categorization. Design Technologists fill a gap which allows design and engineering to work harmoniously together and ensure that your product can continue to rapidly delivery robust user-centric and profitable experiences to market.
