UI Components by Design: Bridging the Designer-Developer Gap

Presented at the Chicago Coder Conference 2017

------------------------------------

Abstract:
Even in an agile environment, the transition between design work and development work has been un-collaborative. Designers design a thing. Developers build a thing. And in the middle… a 1-way hand-off that lacks consideration for both crafts. We can do better. Ryan and Angelina share their challenges and insights in trying to break down that wall, learned from experiences on a large-scale, integrated UX design and UI development team. From strategies for building a purposeful team structure to technical considerations in implementing a library of UI components, you’ll hear relatable experiences and practical tips to create a more enjoyable, collaborative, and productive space for design and development.

Transcript

1. UI Components by Design Bridging the Designer Developer Gap Angelina Cole & Ryan Oglesby ThoughtWorks
2. Hi, I’m Ryan. I’m a Hi, I’m Angelina. I’m a Designer. Developer.
3. Designer. Developer.
4. Mental Technological OrganizaAonal misalignment
5. 1. The gap is bad.
 2. How did we bridge it?
6. 1. The gap is bad.
 2. How did we bridge it?
7. Two designers One product owner No developers!
8. One designer One product owner 30+ developers! OFFSHORE
9. “That’s not what designers do.”
10. SeparaAon of Design and Development
11. Design without developers results in miscommunicaAon, misunderstanding, and rework.
12. “There must be a library for that.” - Every developer
14. Development can’t “solve” design with only a technical soluAon; it’s not a technical problem.
15. Designer. Developer. Style guides Bootstrap
16. Designer. Developer.
17. 1. The gap is bad.
 2. How did we bridge it?
18. Design, build, and scale a front-end soluFon for a 70+ person, mulA-team, mulA-applicaAon, 4+ year enterprise project.
22. Designer. Developer.
23. ConAnuous Design TradiAonal Design
24. UI Components by Design DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UX DESIGNERS ANALYSTS STAKEHOLDERS DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD
25. DESIGN
26. COMPONENT An independent, reusable unit of your applica/on.
27. DESIGN
28. FoundaAon Components ApplicaAon Components DESIGN
29. UI Components by Design DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UX DESIGNERS UI DEVELOPERS
30. already exists already exists already exists build it! build it! FoundaAon Components ISOLATE
31. DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design UX DESIGNERS UI DEVELOPERS
32. Does this appear on the top of the screen or the bo]om? Does it meet accessibility standards? What colors can it accept? Does it have any transiAons? What does this do on mobile? Does it have a loading spinner? When does it Ame out? Can it appear like a link? Does it have a hover? What do errors look like? What size is appropriate? Is the text sentence case or Atle case? Is the touch area large enough? What’s the tab order? What are the alignment rules? ELABORATE
33. DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design UX DESIGNERS UI DEVELOPERS
34. BUILD class Button extends React.Component { render() { const className = this.props.primary ? "primary-button" : "secondary-button"; return ( <button className={className} onClick={this.props.onClick}> {this.props.children} </button> ); } }
35. DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design UX DESIGNERS UI DEVELOPERS APPLICATION DEVELOPERS
36. class Cart extends React.Component { render() { return ( <form> <Heading>Your Cart</Heading> <CartItems /> <Inline> <BodyText>Order Total</BodyText> <Currency>{this.props.orderTotal}</Currency> <Button primary onClick={this.props.doCheckout}> Checkout </Button> </Inline> <Link>Continue shopping</Link> </form> ); } } INTEGRATE
37. INTEGRATE ApplicaAon Focus Component Focus LEARN DESIGN ISOLATE ELABORATE BUILD
38. UI COMPONENTS BY DESIGN Uni0ng design and development with a shared language of components.
39. <Button /> <InputField /> <Dropdown /> <MultiChoice /> <Icon /> <Link /> <ResponsiveDrawer /> <Address /> <Currency /> <MaskedData /> <Grid /> <BusyIndicator /> <PagedResults />
40. <Button /> <InputField /> <Dropdown /> <MultiChoice /> <Icon /> <Link /> <ResponsiveDrawer /> <Address /> <Currency /> <MaskedData /> <Grid /> <BusyIndicator /> <PagedResults /> A Component Library
41. When building a component library…
42. STANDARDIZE THE TECH STACK. When building a component library…
43. EMPHASIZE THE BUSINESS VALUE. When building a component library…
44. “The UI Component Library is the expression of the visual and interac7on design of the product. 
 It enables teams to build consistent interfaces quickly. ApplicaBon developers focus on implemen7ng complex business logic.”
45. DELIGHT YOUR CUSTOMERS. When building a component library…
46. CUSTOMERS. Write awesome docs h]ps:/ /react-styleguidist.js.org DELIGHT YOUR CUSTOMERS
47. $ npm publish $ npm install @myCompany/foundation-components Streamline distribuAon DELIGHT YOUR CUSTOMERS
48. Over communicate DELIGHT YOUR CUSTOMERS
49. Component all the things @mixin layout-horizontally { … } @mixin layout-vertically { … } h1 { … } h2 { … } .small-font { … } .bold-font { … } .button__primary { … } .button__primary--disabled { … } .button__seccondary { … } <Heading /> <SubHeading /> <BodyText small /> <BodyText bold /> <Button /> <Button disabled /> <Button secondary /> <HorizontalLayout /> <VerticalLayout /> DELIGHT YOUR CUSTOMERS
50. <Button /> <InputField /> <Dropdown /> <MultiChoice /> <Icon /> <Link /> <ResponsiveDrawer /> <Address /> <Currency /> <MaskedData /> <Grid /> <BusyIndicator /> <PagedResults /> DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design
51. Designer. Developer. Style guides Bootstrap
52. Ask yourself What can I do in my current organizaAon? Where do designers sit? Where do developers sit? Who is in the room when your work starts? When do problems come up? How do you know when work is finished?
53. Ask yourself Designers: Can I bring developers into my process? Is there space to chat as I make things? Developers: Can I involve designers in the development work that I do? Grab your designer/developer friend & get them involved!
54. Designer. Developer. If you only do one thing… Work together.
55. Thanks!
56. Angelina Cole @uxangelina h]p:/ /angelinamcole.com Ryan Oglesby @ryanoglesby08 h]p:/ /ryanogles.by ThoughtWorks h]ps:/ /www.thoughtworks.com