A talk about how to exist in between the worlds of design and engineering, and ways the speaker has flourished and added value in a new role between design and engineering.

1. Bridging the Gap
NYC Design Systems Coalition, April 2018

2. What’s this gap?

8. Meetup was growing and changing
We rebranded
We’re killing 16 years worth of tech debt
We’re hiring like crazy
We’re starting to work with third-party contractors

9. Everybody needs to know everything
Copywriting guidelines
Branding and visual design
Responsive design
Progressive enhancement
Internationalization (i18n/l10n)
Accessibility (a11y)
etc...

10. ...but that won’t end well

11. I found my happy place

12. A Design Systems
team could help

13. A Design Systems
team could help
We’re a cross-disciplinary team of 2

14. We prioritize projects that...
Help design fidelity and intention make it to production
Facilitate cross-team communication
Make our UI more inclusive
Provide design and component support to product teams

15. We have small, sharp tools

16. The gap is the perfect place to slow people down

17. The gap is the perfect place to slow people down
← Moving sidewalk, not a speedbump

18. Measuring usage

21. tool builders
!==
design systems team

28. My happy place

29. My happy place was a weird place

30. I don’t half-ass two things,
I whole-ass one thing

31. I don’t half-ass two things,
I whole-ass one thing

32. EMBRACE THE GAP

33. I add value
I make communication and collaboration a big part of my job
I give a boost to Meetup’s designers and engineers

34. I’m a better designer/engineer/whatever
I’m a better craftsman
I’ll never get bored learning a broad spectrum of skills

36. EMBRACE THE GAP

37. Thanks!
NYC Design Systems Coalition, April 2018

38. Thanks!
NYC Design Systems Coalition, April 2018

39. The team that builds these tools needs to live
somewhere between design and engineering

40. What do I do?
Identify pain points in design and engineering workflows, and develop tools or
processes to make designers and engineers more effective
Inform collaborators of possibilities* and constraints**, and ensure our designs
can hold up under the various design constraints
Maintain a set of components that are flexible, and intuitive to build/design with
Make sure the design systems team is making things that are useful to BOTH the
design and engineering teams
~Performance optimization for CSS, images, asset caching~

41. The tools I do this with
Mediating between designers and engineers
Building React components
Building and maintaining a CSS library
Building and maintaining designer and engineer documentation
Jumping in to help product teams build stuff
UI design

42. Don’t make product teams wait
Review designs early and often, and prioritize system-level changes
Make sure product team engineers are empowered to implement any design, even
if it’s not standardized
Not everything should be immediately added to the system - have a process in
place to handle those cases

44. Maintain a balance of flexibility and rigidity
We want our product teams to be able to move quickly. This requires a balance

45. Our Design System’s main KPI measures usage
45%-60% imports coming from SDS
Chart that shows “Too little, and we’re not really doing anything. Too much, and
nobody will use our stuff because it’s too restrictive”

46. I love when I do stuff that nobody notices or cares
about
Layouts just snap together
Typography, spacing, and metrics are harmonious
Baking a11y into our tools and components
Making our components mobile-first and baking responsiveness in

47. I was one of the first Product Designers at Meetup,
and I had to be a generalist
Front-end dev for decent prototypes
Copywriter
UI designer
UX designer
Illustrator

48. Engineering example: Emily
Emily is a back-end engineer, but her team was short on a front-end resource, and
she had to do some front-end work

49. Screenshot of venue picker with issues highlighted

50. How do hybrids resolve that gap?

51. Breaking down barriers
A hybrid’s biggest strength isn’t a deep knowledge of design or engineering tools,
it’s our ability smooth out the bumps that come up with collaboration

52. Minding the gap
Product quality suffers if we don’t give attention to the details
Have you ever made a perfect mockup/prototype that just “doesn’t feel right”
when you use it in the browser?

53. I really enjoy thinking about the stuff designers don’t
like spending time on
How can this design be implemented in a sturdy way for all users on all devices?
What should this simple UI component look like?
Is this design accessible?
What’s going to happen when this gets translated to German?

54. How I help designers
Attending critiques and catching things early
Answering questions about technical limitations
Compromising with engineers without compromising quality

55. I really enjoy thinking about the stuff engineers don’t
like spending time on
Is the spacing right?
Do I have all the right ARIA roles and a11y goodies?
Is this the right color?
Is this going to work in ALL the browsers?

56. How I help engineers
Attending engineering meetings and communicate relevant info to designers
CSS nitty-gritty
Point them towards components that will help them avoid writing more code or
building from scratch
Compromising with designers without sacrificing quality

57. Design example: Rye
Rye works on Meetup Pro, which has a lot of admin/dashboard interfaces that are
uncharted territory in our main web app
She was designing some new tools for filtering, and wasn’t sure how feasible her
design would be

58. Screenshot of Rye’s designs with issues highlighted

59. We’re a small team
Our Design Systems team is only 2 people. If we weren’t cross-functional, we
wouldn’t be very effective

60. What do I do?
Identify pain points in design and engineering workflows and develop tools or
processes to make designers and engineers more effective
Write highly reusable styles and create robust components to help designers and
engineers avoid duplicating work
Inform designers of possibilities and constraints, and ensure our designs can hold
up under the various design constraints*
Make sure our components are intuitive to build with

61. What do I do?
Help designers and engineers maintain consistency of UI and UX interactions
across multiple apps
Maintain documentation of design decisions and “lessons learned”
Help make designer and web engineer onboarding easier
Performance optimization for CSS, images, asset caching

62. Be like a moving sidewalk and speed people up
Review designs early and often
Don’t make product teams wait for something to be “ready” in the design system
Maintain a balance of flexibility and rigidity

63. The team that builds these tools needs to live
somewhere between design and engineering

64. A Design Systems team could help
Address the finer details of UI implementation
Make it easier for others to address the finer details of UI implementation
Empathize with the engineering and design teams to identify pain points in
process and workflow
Give designers and engineers a place for shared understanding

65. Empower engineers and designers to focus on big
picture product goals
Help designers and engineers move fast and avoid duplicating work
Maintains consistency of UI and UX interactions across multiple apps
Documentation helps designers and engineers avoid repeating mistakes we made
in the past
Helps make designer and web engineer onboarding easier
Product quality improves when we give attention to these details, and we have
less situations where the implemented design “isn’t quite right”

66. How do we know these tools are working?
Qualitative feedback - annual survey
Quantitative feedback - measure usage

70. My happy place wasn’t really a thing at Meetup
I don’t know anybody else who did this
I didn’t feel like a “real” engineer
Being a Product Designer felt more like being a Product Manager, and I wasn’t
enjoying it as much
“Real” engineers say shitty things about people like me on the internet

72. Everybody can’t know everything
Copywriting guidelines
Branding and visual design
Responsive design
Progressive enhancement
Internationalization (i18n/l10n)
Accessibility (a11y)
etc...