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
   

   View Slide

2. Hi, I’m Ryan.
   I’m a
   Hi, I’m Angelina.
   I’m a Designer. Developer.
   

   View Slide

3. Designer. Developer.
   

   View Slide

4. Mental
   Technological
   OrganizaAonal
   misalignment
   

   View Slide

5. 1. The gap is bad.

   2. How did we bridge it?
   

   View Slide

6. 1. The gap is bad.

   2. How did we bridge it?
   

   View Slide

7. Two designers One product owner
   No developers!
   

   View Slide

8. One designer One product owner
   30+ developers!
   OFFSHORE
   

   View Slide

9. “That’s not what designers do.”
   

   View Slide

10. SeparaAon of
    Design and Development
    

    View Slide

11. Design without developers
    results in
    miscommunicaAon,
    misunderstanding,
    and rework.
    

    View Slide

12. “There must be a library for that.”
    - Every developer
    

    View Slide

13. View Slide

14. Development can’t “solve”
    design with only a
    technical soluAon;
    it’s not a
    technical problem.
    

    View Slide

15. Designer. Developer.
    Style guides
    Bootstrap
    

    View Slide

16. Designer. Developer.
    

    View Slide

17. 1. The gap is bad.

    2. How did we bridge it?
    

    View Slide

18. Design, build, and scale
    a front-end soluFon
    for a 70+ person,
    mulA-team,
    mulA-applicaAon,
    4+ year
    enterprise project.
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. Designer. Developer.
    

    View Slide

23. ConAnuous Design
    TradiAonal Design
    

    View Slide

24. UI Components by Design
    DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    UX DESIGNERS
    ANALYSTS
    STAKEHOLDERS
    DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    

    View Slide

25. DESIGN
    

    View Slide

26. COMPONENT
    An independent, reusable
    unit of your applica/on.
    

    View Slide

27. DESIGN
    

    View Slide

28. FoundaAon
    Components
    ApplicaAon
    Components
    DESIGN
    

    View Slide

29. UI Components by Design
    DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    UX DESIGNERS
    UI DEVELOPERS
    

    View Slide

30. already exists
    already exists
    already exists
    build it!
    build it!
    FoundaAon
    Components
    ISOLATE
    

    View Slide

31. DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    UI Components by Design
    UX DESIGNERS
    UI DEVELOPERS
    

    View Slide

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
    

    View Slide

33. DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    UI Components by Design
    UX DESIGNERS
    UI DEVELOPERS
    

    View Slide

34. BUILD
    class Button extends React.Component {
    render() {
    const className = this.props.primary ? "primary-button" :
    "secondary-button";
    return (
    
    {this.props.children}
    
    );
    }
    }
    

    View Slide

35. DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    UI Components by Design
    UX DESIGNERS
    UI DEVELOPERS
    APPLICATION DEVELOPERS
    

    View Slide

36. class Cart extends React.Component {
    render() {
    return (
    
    Your Cart
    
    
    Order Total
    {this.props.orderTotal}
    
    Checkout
    
    
    Continue shopping
    
    );
    }
    }
    INTEGRATE
    

    View Slide

37. INTEGRATE
    ApplicaAon Focus
    Component Focus
    LEARN
    DESIGN
    ISOLATE
    ELABORATE
    BUILD
    

    View Slide

38. UI COMPONENTS BY DESIGN
    Uni0ng design and development
    with a shared language
    of components.
    

    View Slide

39. 
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

40. 
    
    
    
    
    
    
    
    
    
    
    
    
    A Component Library
    

    View Slide

41. When building a component library…
    

    View Slide

42. STANDARDIZE THE
    TECH STACK.
    When building a component library…
    

    View Slide

43. EMPHASIZE THE
    BUSINESS VALUE.
    When building a component library…
    

    View Slide

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

    View Slide

45. DELIGHT YOUR
    CUSTOMERS.
    When building a component library…
    

    View Slide

46. CUSTOMERS.
    Write awesome docs
    h]ps:/
    /react-styleguidist.js.org
    DELIGHT YOUR CUSTOMERS
    

    View Slide

47. $ npm publish
    $ npm install @myCompany/foundation-components
    Streamline distribuAon
    DELIGHT YOUR CUSTOMERS
    

    View Slide

48. Over communicate
    DELIGHT YOUR CUSTOMERS
    

    View Slide

49. Component all the things
    @mixin layout-horizontally { … }
    @mixin layout-vertically { … }
    h1 { … }
    h2 { … }
    .small-font { … }
    .bold-font { … }
    .button__primary { … }
    .button__primary--disabled { … }
    .button__seccondary { … }
    
    
    
    
    
    
    
    
    
    DELIGHT YOUR CUSTOMERS
    

    View Slide

50. 
    
    
    
    
    
    
    
    
    
    
    
    
    DESIGN
    ISOLATE
    ELABORATE
    INTEGRATE
    LEARN
    BUILD
    UI Components by Design
    

    View Slide

51. Designer. Developer.
    Style guides
    Bootstrap
    

    View Slide

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?
    

    View Slide

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!
    

    View Slide

54. Designer. Developer.
    If you only do one thing…
    Work together.
    

    View Slide

55. Thanks!
    

    View Slide

56. Angelina Cole
    @uxangelina
    h]p:/
    /angelinamcole.com
    Ryan Oglesby
    @ryanoglesby08
    h]p:/
    /ryanogles.by
    ThoughtWorks
    h]ps:/
    /www.thoughtworks.com
    

    View Slide