Incremental Design: A conversation with a designer and a developer

Developers: how many times have you had to completely rip out your hard earned code for a totally new site design?
Designers: how many times has a re-design taken 4 times as long as the developer said it would and not looked good in the end?
Change all that by using an incremental approach to design. Set up your code to change all the buttons at once or prioritize design changes to make each small change good enough for production.
A designer and developer will talk about the challenges and joys of making this process work in two production sites.

Given at RailsConf 2013 4/29/13

Transcript

1. INCREMENTAL
   DESIGN
   A CONVERSATION WITH A
   And
   Developer
   Designer
   Monday, April 29, 13
   

   View Slide

2. @rmillerwebster
   REBECCA MILLER-WEBSTER SAVANNAH WOLF
   Ruby & Javascript Developer
   Lead Developer
   UX & Visual Designer
   Head of Design
   #incrementaldesign
   @savwolf
   Monday, April 29, 13
   

   View Slide

3. Major Redesign?
   HOW DO YOU MAKE DESIGN CHANGES?
   Monday, April 29, 13
   

   View Slide

4. Major Redesign?
   HOW DO YOU MAKE DESIGN CHANGES?
   Page by Page?
   Monday, April 29, 13
   

   View Slide

5. Major Redesign?
   HOW DO YOU MAKE DESIGN CHANGES?
   Page by Page?
   Incremental Design!
   Monday, April 29, 13
   

   View Slide

6. WHAT IS INCREMENTAL DESIGN?
   Monday, April 29, 13
   

   View Slide

7. Tiny Deployable
   Design Changes.
   WHAT IS INCREMENTAL DESIGN?
   Monday, April 29, 13
   

   View Slide

8. A conversation between
   Design & Development.
   WHAT IS INCREMENTAL DESIGN?
   Monday, April 29, 13
   

   View Slide

9. HOWABOUTWE.COM • MODERN LOVE, AWESOME DATES.
   Monday, April 29, 13
   

   View Slide

10. HOWABOUTWE.COM • being redesigned
    Monday, April 29, 13
    

    View Slide

11. COUPLES.HOWABOUTWE.COM • MVP
    Monday, April 29, 13
    

    View Slide

12. Product Challenges
    Aggressive
    TIMELINES
    CHANGING
    MODELS
    MAKE GREAT
    DESIGN
    SPLIT-TESTING
    & METRICS
    Monday, April 29, 13
    

    View Slide

13. ORIGINAL DESIGN
    Monday, April 29, 13
    

    View Slide

14. MINI-FACE LIFT
    Monday, April 29, 13
    

    View Slide

15. ORIGINAL DESIGN
    Monday, April 29, 13
    

    View Slide

16. MOVE RAIL FROM LEFT TO RIGHT SIDE
    Monday, April 29, 13
    

    View Slide

17. UPDATE PRICING MODULE
    Monday, April 29, 13
    

    View Slide

18. UPDATE SUBNAV
    Monday, April 29, 13
    

    View Slide

19. UPDATE REMAINING STYLES
    Monday, April 29, 13
    

    View Slide

20. MINI-FACE LIFT
    Monday, April 29, 13
    

    View Slide

21. UPDATE REMAINING STYLES
    Monday, April 29, 13
    

    View Slide

22. Design Team
    OUR PROCESS
    Couples Development
    Monday, April 29, 13
    

    View Slide

23. Design Team
    OUR PROCESS
    Couples Development
    BEFORE
    DELIVERY
    Monday, April 29, 13
    

    View Slide

24. Design Team
    OUR PROCESS
    Couples Development
    BEFORE
    DELIVERY
    BEFORE
    DEPLOYMENT
    Monday, April 29, 13
    

    View Slide

25. TECHNIQUES
    for the
    DESIGN
    PROCESS
    Monday, April 29, 13
    

    View Slide

26. SPRINTS.
    REVIEWS.
    RETROS.
    work for the
    DESIGN
    PROCESS
    Monday, April 29, 13
    

    View Slide

27. TECHNIQUES
    for the
    development
    PROCESS
    Monday, April 29, 13
    

    View Slide

28. about your styles.
    GET STRICT
    Monday, April 29, 13
    

    View Slide

29. THE STYLE GUIDE
    Monday, April 29, 13
    

    View Slide

30. about content.
    MARKUP IS
    .upgrade.container.clearfix
    %header.bevelledSeparator
    %h1.serif.icon-quote<
    Start Your Membership
    .upgrade
    %header
    %h1.icon-quote<
    Start Your Membership
    Monday, April 29, 13
    

    View Slide

31. css.
    GENERATE
    .upgrade{
    @extend .container;
    @extend .clearfix;
    margin-bottom: $thickUnit;
    width: $grid30;
    > header {
    @include trailer(2);
    @include bevelledSeperator;
    > h1 {
    @include serif;
    }
    }
    Monday, April 29, 13
    

    View Slide

32. Variables
    ARE YOUR
    FRIEND
    $extra-small-font-size:11px;
    $small-font-size:13px;
    $medium-font-size:18px;
    $medium-large-font-size:23px;
    $large-font-size:27px;
    $extra-large-font-size:34px;
    $extra-extra-large-font-size:41px;
    $huge-large-font-size:51px;
    //Layout
    $defaultUnit:30px;
    $narrowUnit: $defaultUnit/3*2;
    $skinnyUnit: $defaultUnit/3;
    $thickUnit: $defaultUnit*2;
    $gridColumnWidth: $defaultUnit;
    Monday, April 29, 13
    

    View Slide

33. Mixin
    IT UP.
    @mixin bevelledSeparator{
    @include trailer(1);
    border-bottom: 1px solid rgba($darkBeige, .5);
    @include box-shadow(0 1px 0 #fff);
    }
    Monday, April 29, 13
    

    View Slide

34. Awesome Dates.
    COMPLEX PRICING.
    Monday, April 29, 13
    

    View Slide

35. .pricing{ class: “#{offer.members_only ? ‘membersOnly’ : ‘’} #{additional_classes} “
    -if offer.members_only
    -if offer.free_for_member?
    .price.free
    %strong
    Free Date
    %em
    for members only
    -else
    %strong.details
    Members
    %br Only
    %dl.price
    %dt.title
    Member
    %dd.value
    = “#{offer_member_price(offer, {unit_tag: ‘small’})}”.html_safe
    -else
    %strong.details
    Save
    %br #{saving_percentage(offer)}
    %dl.price
    %dt.title
    Member
    %dd.value
    = “#{offer_member_price(offer, {unit_tag: ‘small’})}”.html_safe
    %dl.price
    %dt.title
    Standard
    %dd.value
    = “#{offer_non_member_price(offer, {unit_tag: ‘small’})}”.html_safe
    get logic out of your views
    WHAT THE
    !#*K IS
    GOING ON?!
    Monday, April 29, 13
    

    View Slide

36. 41
    LINES of
    CODE
    .pricing{ class: “#{offer.members_only ? ‘membersOnly’ : ‘’} #{additional_classes} “ }
    -if offer.members_only
    -if offer.free_for_member?
    .price.free
    %strong
    Free Date
    %em
    for members only
    -else
    %strong.details
    Members
    %br Only
    %dl.price
    %dt.title
    Member
    %dd.value
    = “#{offer_member_price(offer, {unit_tag: ‘small’})}”.html_safe
    -else
    %strong.details
    Save
    %br #{saving_percentage(offer)}
    %dl.price
    %dt.title
    Member
    %dd.value
    = “#{offer_member_price(offer, {unit_tag: ‘small’})}”.html_safe
    %dl.price
    %dt.title
    Standard
    %dd.value
    = “#{offer_non_member_price(offer, {unit_tag: ‘small’})}”.html_safe
    .footer{ class: “#{‘darkSeparatorTop’ if add_separator}” }
    -if offer.booked?(offer)
    %strong.booked
    Booked
    -elsif offer.expired?
    %strong.expired
    =t(‘.expired’)
    -elsif offer.sold_out?
    %strong.sold_out
    =t(‘offers.offer.sold_out’)
    }
    Monday, April 29, 13
    

    View Slide

37. 5 lines
    DOWN TO .pricing{ class: offer.price_classes }
    %strong.priceDetails= offer.price_details
    = offer.price_definition
    %footer{ class: offer.price_classes }
    = offer.status_tag
    Monday, April 29, 13
    

    View Slide

38. classes.
    GENERATE
    def pricing_classes
    classes =
    classes << ‘membersOnly’ if member_only
    classes << (free_for_member? ? ‘free’ : ‘paid’)
    classes << ‘unavailable’ if !bookable? || h.offer_booked?(self)
    classes << ‘nonMembers‘ if !members_only && non_member_price > 0
    classes.join(‘ ’)
    end
    Monday, April 29, 13
    

    View Slide

39. copy
    GENERATE
    def pricing_details
    str - “”
    if members_only && free_for_member?
    str = “Free Date
    for members only”
    elsif members_only
    str = “Members
    Only”
    else
    str = “Save
    #{h.saving_percentage(self)}”
    end
    str.html_safe
    end
    def booking_form_attributes
    attrs = {
    url: h.offer_booking_path(self,secure: true),
    html: {id: ‘new_booking’ }
    }
    if h.current_user.has_booked_this_month?
    attrs[:html][:class] = ‘track_submit’
    attrs[:html][:”data-event-name”] = “submit: upsell”
    end
    attrs
    end
    html
    attributes
    &
    Monday, April 29, 13
    

    View Slide

40. Encapsulate
    REPETITION INTO
    Partials
    def pricing_definition
    unless free_for_member? && members_only
    (text = “”) << h.render(partial: ‘shared/offer_pricing_dl’,
    locals: {offer: self, member: true })
    if !members_only
    text << h.render(partial: ‘shared/offer_pricing_dl’,
    locals: { offer: self, member: false})
    end
    text.html_safe
    end
    end
    Monday, April 29, 13
    

    View Slide

41. Can all design changes
    happen in CSS?
    OUR (unAttAinAble) GOAL:
    Monday, April 29, 13
    

    View Slide

42. THE CHALLENGES:
    This is
    stupid.
    This is
    UGLY.
    &
    Monday, April 29, 13
    

    View Slide

43. A conversation between
    Design & Development.
    WHAT IS INCREMENTAL DESIGN?
    Monday, April 29, 13
    

    View Slide

44. A conversation between
    you and your users.
    BUT ALSO
    Monday, April 29, 13
    

    View Slide

45. rebecca@howaboutwe.com
    REBECCA MILLER-WEBSTER
    @rmillerwebster •
    github.com/rmw
    rebeccamillerwebster.com
    savannah@howaboutwe.com
    SAVANNAH WOLF
    I’m anti-social. :)
    Monday, April 29, 13
    

    View Slide