Design Technologist Club

Skills

Reading time: 4 min.
Author: Konstantin

There are different names for the role of Design Technologist, but there is a basic skill set that is well established: the ability to write code, build prototypes, and at the same type be sensitive to design and user experience. But the most important skills that clearly stand out are, of course, design and coding. More than half of IT jobs and more than a quarter of jobs outside of IT these days require knowledge of digital design; successful workers must think like designers. On the other hand, coding is also increasing its influence in various positions and require knowledge of it till some extent for graphic designers, marketers, and business people. Half of all job openings in the top income quartile are in positions that now show a significant demand for coding skills.[1][2]

In day-to-day work, Design Technologist’s main tasks are tasks of Front-End developer and are related to HTML, CSS, and JavaScript. The scope is what differs this skillset from regular Front-End Developer: Design Technologist should be able to develop rapidly mockups and prototypes showing how sites would look and work, generate prototypes to help illustrate UX solutions and interactive designs.[3][4]

The required skillset and knowledge level quite often depend on the company where the Design Technologist is working. In case of a freelancer, you would need to know a great deal of design. When working for startups or agencies, knowing exactly how much effort implementing a certain feature makes it much easier to prioritize steps during the first design phases. It also allows to avoid checking the design with the development team all the time. This is especially useful if you work remotely or in different time zones and cannot easily communicate with colleagues at any time you need to. If you have at least basic Front-End skills (HTML/CSS), fixing some code by yourself will take a minimum amount of time. In bigger organizations knowing some design would help you communicate your ideas better with other teams and with designers.[6][14]

Prototyping

The role of Design Technologist is sometimes called UX prototyper. During the design phase, a Design Technologist converts design intent to real prototypes. A prototype is unlikely to have production-ready code, but certainly part of it can be reusable and thus prototypes and specifications can be used later in the implementation phase by the engineering team. It also helps the designer find UX problems earlier and in communicating design intent faster. The series of prototypes multiplied by Design thinking then come to play by minimizing the uncertainty and risk of innovation and by engaging with users in learning, testing, and refining concepts. Design Technologists build exploratory solutions to solve the problem instead of just making empirical assumptions on how to solve a UX problem, which then ensures that team members spend less time planning and more time doing.[6][7]

One of the popular methods to organize fast prototyping with designers is RITE or Rapid Iterative Testing and Evaluation. It allows updating design quickly in response of customer feedback. It differs from usual usability testing because it advocates for UI changes once a problem is found and a solution is clear.[8]

Skills

  • Adobe XD
  • Figma
  • Sketch
  • Framer
  • Origami

It is useful to learn the basics of classical design as well, including type, space, motion, color, and rhythm, which apply also to the Web. The fundamentals of design relate to user experience in a stronger way than most realize. Inspiration often comes outside the web and uses the tools of the web to make your ideas come alive. A Design Technologist also should be able to answer different tricky design questions: why text is left-aligned, why paragraphs should be longer than 50-70 characters per line, why it is better dark-colored text on light-colored backgrounds etc.[9][10]

Vector and static design tools will be always a part of your arsenal, because it reflects what users see, when they use your product. Getting outside the comfortable boundaries of static design tools allows though to explore more exciting and innovative solutions and to open your eyes to new ways of interacting with products.[10]

Front-End development

In many teams Design Technologists handle the Front-End implementation role. In such case they might support designers so that they do not have to be any more detailed in their instructions - due to the Design Technologist’s eye for design. In the engineering side, the core Design Technologist skill is problem-solving. There is always a need to take a problem and break it down to its subcomponents and then tackle individual problems. Concretely in Front-End side, the Design Technologist might be focused on interactive features, including, for example, animations, touch, tap, and swipe gestures, accessibility features etc. Often, however, a Design Technologist is not directly intersecting with other Front-End developers, as they have quite concrete design tasks assigned to them like designing graphic user interface elements (menus, tabs, widgets), building page navigation buttons and search fields, designing responsive interfaces etc.[7]

Another task that Design Technologists can do is finding inefficient processes, creating new processes or tools to improve old ones. For example, some can write a plugin to auto populate data into Sketch mocks, a tool to help researchers interpret video recordings of usability studies, a mockup viewer that shows designs in different devices and sizes or dashboards to track new metrics.[11][12]

Skills

  • HTML, CSS, JavaScript (ECMAScript 6)
  • JavaScript frameworks (React.js, Vue.js, Angular.js)
  • Build tools (webpack, gulp)
  • CSS pre-processors, post-processors (SASS, LESS, PostCSS)
  • Animations
  • Accessibility (automated testing)
  • Algorithms
  • Software design patterns
  • Responsive design
  • Testing and debugging (Jest, Enzyme, Axe)
  • Version control (git, GitHub, GitLab)
  • Package and dependency managers (npm, yarn)
  • Command line tools
  • Progressive Web Apps
  • Browser dev tools
  • Design systems
  • Engineering tools (Visual Studio Code, Atom, WebStorm)[9][13]

UX

Getting a Design Technologist on the team means there is always an engineer whose work is first and most important, the user experience. It means minor things like CSS animations, button alignment, and error messages, and major things like consistency, brand, and usability will not be forgotten. It also means that to turn into a Design Technologist you would also need to have at least some experience in the core UX principles, philosophies, and methods. This includes, but is not limited to, how and why to do user research, wireframing and personas.[7][11]

Skills

  • Usability
  • UX testing
  • Personas
  • UX writing
  • Service blueprints
  • Customer journey map
  • UX research

Soft skills

These skills will ensure that you land your dream job, whatever the requirements. Not only does it highlight the multidisciplinary nature of design technologists, it also shows that mostly they form medium between other fields, often with conflicting goals.[9]

Skills

  • Communication (written and verbal)
  • List item
  • Teamwork
  • Empathy for users
  • Problem solving
  • Critical thinking
  • Business skills