$30 off During Our Annual Pro Sale. View Details »

Incremental Design: A conversation with a designer and a developer

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

Rebecca Miller-Webster

April 29, 2013
Tweet

More Decks by Rebecca Miller-Webster

Other Decks in Programming

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. [email protected]
    REBECCA MILLER-WEBSTER
    @rmillerwebster •
    github.com/rmw
    rebeccamillerwebster.com
    [email protected]
    SAVANNAH WOLF
    I’m anti-social. :)
    Monday, April 29, 13

    View Slide