New York Design Systems Coalition - Bridging the Gap

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.

Transcript

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...