I’ve been designing and building web stuff in San Francisco for a while now. And during this time there have been some dramatic shifts in technologies, and along with it, job titles. UI Developer, Web Designer, UX Engineer — they can mean lots of different things and I often find myself struggling to explain what it is I actually do.
People who are skilled at frontend design are in a great position to help bridge the divide between the design and development…Embrace the fuzziness, encourage [them] to exist between worlds, and let collaboration and great work ensue.Brad Frost
At a high level, Design Systems Ops is a solid introduction by Kaelig Deloumeau-Prigent to the sometimes ambiguously defined roles of those who, like me, operate with a mix of design and engineering. And Brad Frost’s Frontend Design nicely captures my experience as a frontend designer, describing it as a “purgatory” between these worlds. To their credit, Optimizely did an admirable job describing how UI Engineers fit into the organization and my experience at Thumbtack as a UI Developer was similar. I settled on Frontend Designer as it seems to describe my skill set best.
What I do
- Design Systems At Optimizely I consolidated their existing brand into the OUI Sass library for use by their products. This work was broadened significantly at Thumbtack in the construction of the now mature, multi-platform design system, Thumbprint. With the support of three team members I helped define designs, constraints, long-form documentation, team planning, built and contributed to React components, and communicated our team’s progress at company presentations.
- Documentation The range here is wide, from pattern libraries to code samples to living style guides. Among the many challenges are identifying the audience, making it accessible and easily searchable, and then balancing the complexity of the documentation with the ability to keep it up to date. For Thumbprint’s entry on motion I built a number of React examples to demonstrate usage and native mobile interactions.
- CSS & Sass Having now built multiple design systems and the functional CSS library, Atomic, I’m very comfortable with authoring reliable, well-scoped styles and troubleshooting thorny browser bugs.
- Design & Design Guidance This includes everything from designing new patterns and interactions from scratch to helping Product Designers with UI and IA suggestions. In reviewing a design, prior to building the production code, I will look for how well it aligns to existing standards, if it can withstand stress tests, and if patterns are reusable and scalable.
- Designer & Developer workflows. Having worked on both sides of the aisle I understand the common pain points and have long been interested in helping them work together to make it easier, and faster, for all involved.
- Tooling Version control with Git and Github, coding with VSCode, package management and publishing with yarn and npm, code linters and formatters, and the occasional snapshot testing with Jest.
- Internal Tools I really enjoy finding productivity friction points and creating tools to help. I’ve built a number of Chrome extensions, resource trackers for brand teams, and Figma plugins for design and analytics teams.
- Performance. This is a newer area of interest. I worked with Thumbprint’s Growth team to identify multiple ways—responsive images, reducing CSS payload, limiting node counts—to decrease page load time on thumbtack.com and fine-tuned this website to make it load as fast as possible.
What I don’t do
- Dedicated Product Design I’ve worked as a Product Designer in the past but have not done this full time for years. It’s an area I can contribute to and I understand the processes involved but wouldn’t be appropriate for me.
- Project Management Though I’ve found myself the de facto project manger in some projects, synchronizing the work of multiple teams, it’s not where I’ve spent much time.
- White-space Arguments Tabs or spaces? 2 or 4? Who ate my bagel?