What Is a Design Technologist? An Interview With James Patrick Gibson
Design technologists are a relatively new role in the software engineering world, and there is often lots of confusion over where the position fits on a development team — are they a designer or a programmer? To dispel some myths, clarify the role, and share why it’s important to have this kind of talent working on your project, we’ve invited design technologist James Gibson on the blog.
We are extremely fortunate to be working with James. He’s an interactive designer, a front-end developer, a visual designer, a usability engineer, and an information architect all rolled into one. Given his unique, multidisciplinary skillset and process, he’s able to adeptly bridge the design/development divide and help us provide more value to our clients. Without further ado, let’s learn all about James and design technology:
Tell us a little about yourself.
I’m a graphic designer by trade and started my career over a decade ago working at design studios focused in print design. Much of my experience early on dealt in traditional graphic design sensibilities and creating designs for items like posters, packaging, brochures, logos, signage, and more.
While I knew a bit about making a basic webpage, I never envisioned myself working in the Web, yet I found myself intrigued at designing websites. Often studio clients would request some web-design work and concepts, usually in combination with a greater project.
The deliverables for those projects would always be in some static design tool, which at the time was either Photoshop or the now-defunct Fireworks. Both tools were pretty tedious to work with. Years of frustration mounted trying to understand why my pixel-perfect designs never ended up representing the final product.
At that point, I started to learn how to code HTML and CSS and started creating my designs directly in the browser, and since then it’s been the defining point of my career. I’ve gone on to work at digital agencies, e–commerce shops, and eventually startups and technology companies. I’ve even taught web design and development for a few years.
In short, my career has been shaped by working in the medium of the web.
What exactly is a design technologist and what do you do?
A design technologist is a designer who can bridge the gap between visual design, user experience design, and engineering. These designers are comfortable using the tools native to the web to express design intent. In other words, designers who are comfortable and effective working with HTML, CSS, and JavaScript—the grain of the web itself.
This toolset allows the designer to build prototypes that can be tested and iterated upon in the real medium, which allows for faster validation of design concepts, and higher efficiency product development. The designer can also explore different approaches and flows, and run experiments against those ideas rapidly and efficiently.
A typical workflow has me embedded with a small and agile product development team where I collaborate with the team to create and validate design solutions. As the team validates UX solutions, iteration is made to prototypes, which end up being quite close to production-quality code.
Deliverables typically come in the form of functional prototypes, or are often expressed by building out and maintaining a design system for the product. These tools allow engineering teams to build out beautiful, usable products faster without the overhead and translation issues of a more traditional design process.
What are the benefits of a design technologist over a traditional developer role?
Modern developers have a massive amount of responsibilities, especially when working in full-stack. With the advancement of JavaScript in web applications, many of the duties of a back-end developer have moved to the front-end and require a broad skill set. I’ve worked with many developers who are amazing at working across this spectrum of technologies, yet having to learn visual design, user-experience design, and modern-interface design is entirely another job in itself.
Traditionally, designers have provided a set of static screens or non-web-native prototypes as a simulation of what an interface would look like. Unfortunately, this further burdens a development team by forcing a developer to translate that design intent from the static mockups to a real product. Often, much is lost in translation.
Developers are also frequently put in situations where they have to make design decisions not expressed in a static mock — things like responsiveness, motion and animation, loading states, interactive reactivity, inconsistent content, and more. This either forces the engineering team to guess at those decisions or creates a costly back-and-forth waterfall process where design intent questions ping-pong from developer to designer.
Eventually, this comes as a cost to the quality of the end product.
A design technologist fills this gap by bringing the UX and visual design expertise directly to the product-development process. Instead of working in static design tools, the designer can instead iterate in code and work side-by-side with developers. Real code prototypes help surface UX friction points earlier and aid in communicating design intent faster. These designers can also collaboratively create a reusable component library as part of a design system, which further reduces handoffs and lets full-stack developers focus on building great software.
Having a design technologist on the team turns the engineering team into creative collaborators, and designers into contributors to the product code.
What misconceptions are there about your role?
I think the strongest misconception revolves around the question, “Should designers code?”
It’s a refrain that keeps surfacing year after year and comes off quite vague to both developer and designer audiences.
When designers say “code,” what we really mean is writing HTML and CSS, neither of which are programming languages. HTML is a simple structural markup language that anyone can learn. CSS is a declarative design language — in other words, a descriptive language for visual style. It’s an incredibly powerful toolset for a designer and has strong roots in style sheets from traditional desktop publishing and print design. Again, this language requires no programming experience or understanding of computer science.
Once a designer becomes proficient in crafting their own designs, they’ll want to start breathing life into their work by introducing interactions, live data, and reactive controls. This is where simple JavaScript comes in. Again, this isn’t programming sophisticated applications. Instead, it’s another design tool to allow the designer to explore the full range of possibilities in the medium. New frameworks like Vue make it even simpler to bridge the gap from HTML/CSS to JavaScript, just as jQuery had 10 years ago.
Once a designer knows these tools, they’ll be able to express themselves using the concepts of modularity and traditional design sensibilities that exist in the design world outside of our screens.
So, I believe learning to “code” gives a design technologist a set of the most powerful tools to create interfaces.
What’s the most interesting project you’ve been able to work on as a design technologist?
My favorite project was building out a complete design system from the ground up. As a designer working in the front-end for a large-scale e-commerce platform, it became clear that we needed to create modularity and reusable components to scale our product design more rapidly.
Starting the foundation of the design system was easy, by working in a modern front-end framework, but the real challenge was working with people and building a tool that many development teams could benefit from and product teams could leverage.
Much of the work was evangelism and research.
- How would differing teams use the system?
- How could we apply design intent over a handful of different technology stacks?
- How could we reliably enhance the system without affecting adopters who can’t always upgrade to the latest and greatest?
- How do we prove the ROI to our leadership team, and that the design system was worth investing resources in?
It was a very exciting experience to spearhead the system and advocate for its use across the company, especially when developers enjoyed building products with the system’s tools. I could see teams start to explore more innovative ideas and worry less about production or implementation minutia.
What advice would you give to someone who wants to become a design technologist?
- Build, build, build. Learning to craft an experience on your own is incredibly empowering and can be the strongest tool you’ll have to communicate your design intent. Don’t be afraid to “code” and understand that a good deal of the industry still works in a print-based methodology.
- While vector and static design tools should always be a part of your arsenal, understand that the product your users see and experience will always be in that final code. Getting outside of the comfortable boundaries of static design tools will allow you to explore more exciting and innovative solutions, and will open your eyes to new ways of interacting with products.
- Finally, learn classical design. All of the basics of design — including, type, space, motion, color, and rhythm — all apply to the web and even more so now that we can design for an infinite canvas in hundreds of contexts. The fundamentals of design are tied to user experience in a stronger way than most realize. Look for inspiration outside the web, and use the tools of the web to make your ideas come alive.
