Incremental Design: A conversation with a designer and a developer

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

WHAT IS INCREMENTAL DESIGN? Monday, April 29, 13

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ORIGINAL DESIGN Monday, April 29, 13

Slide 14

Slide 14 text

MINI-FACE LIFT Monday, April 29, 13

Slide 15

Slide 15 text

ORIGINAL DESIGN Monday, April 29, 13

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

UPDATE PRICING MODULE Monday, April 29, 13

Slide 18

Slide 18 text

UPDATE SUBNAV Monday, April 29, 13

Slide 19

Slide 19 text

UPDATE REMAINING STYLES Monday, April 29, 13

Slide 20

Slide 20 text

MINI-FACE LIFT Monday, April 29, 13

Slide 21

Slide 21 text

UPDATE REMAINING STYLES Monday, April 29, 13

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

TECHNIQUES for the DESIGN PROCESS Monday, April 29, 13

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

TECHNIQUES for the development PROCESS Monday, April 29, 13

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

THE STYLE GUIDE Monday, April 29, 13

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

.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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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