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
2. @rmillerwebster REBECCA MILLER-WEBSTER SAVANNAH WOLF Ruby & Javascript Developer Lead Developer UX & Visual Designer Head of Design #incrementaldesign @savwolf Monday, April 29, 13
3. Major Redesign? HOW DO YOU MAKE DESIGN CHANGES? Monday, April 29, 13
4. Major Redesign? HOW DO YOU MAKE DESIGN CHANGES? Page by Page? Monday, April 29, 13
5. Major Redesign? HOW DO YOU MAKE DESIGN CHANGES? Page by Page? Incremental Design! Monday, April 29, 13
6. WHAT IS INCREMENTAL DESIGN? Monday, April 29, 13
7. Tiny Deployable Design Changes. WHAT IS INCREMENTAL DESIGN? Monday, April 29, 13
8. A conversation between Design & Development. WHAT IS INCREMENTAL DESIGN? Monday, April 29, 13
9. HOWABOUTWE.COM • MODERN LOVE, AWESOME DATES. Monday, April 29, 13
10. HOWABOUTWE.COM • being redesigned Monday, April 29, 13
11. COUPLES.HOWABOUTWE.COM • MVP Monday, April 29, 13
12. Product Challenges Aggressive TIMELINES CHANGING MODELS MAKE GREAT DESIGN SPLIT-TESTING & METRICS Monday, April 29, 13
13. ORIGINAL DESIGN Monday, April 29, 13
14. MINI-FACE LIFT Monday, April 29, 13
15. ORIGINAL DESIGN Monday, April 29, 13
16. MOVE RAIL FROM LEFT TO RIGHT SIDE Monday, April 29, 13
17. UPDATE PRICING MODULE Monday, April 29, 13
18. UPDATE SUBNAV Monday, April 29, 13
19. UPDATE REMAINING STYLES Monday, April 29, 13
20. MINI-FACE LIFT Monday, April 29, 13
21. UPDATE REMAINING STYLES Monday, April 29, 13
22. Design Team OUR PROCESS Couples Development Monday, April 29, 13
23. Design Team OUR PROCESS Couples Development BEFORE DELIVERY Monday, April 29, 13
24. Design Team OUR PROCESS Couples Development BEFORE DELIVERY BEFORE DEPLOYMENT Monday, April 29, 13
25. TECHNIQUES for the DESIGN PROCESS Monday, April 29, 13
26. SPRINTS. REVIEWS. RETROS. work for the DESIGN PROCESS Monday, April 29, 13
27. TECHNIQUES for the development PROCESS Monday, April 29, 13
28. about your styles. GET STRICT Monday, April 29, 13
29. THE STYLE GUIDE Monday, April 29, 13
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
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
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
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
34. Awesome Dates. COMPLEX PRICING. Monday, April 29, 13
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
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
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
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
39. copy GENERATE def pricing_details str - “” if members_only && free_for_member? str = “Free Date <br/><em>for members only</em>” elsif members_only str = “Members <br/>Only” else str = “Save <br/>#{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
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
41. Can all design changes happen in CSS? OUR (unAttAinAble) GOAL: Monday, April 29, 13
42. THE CHALLENGES: This is stupid. This is UGLY. & Monday, April 29, 13
43. A conversation between Design & Development. WHAT IS INCREMENTAL DESIGN? Monday, April 29, 13
44. A conversation between you and your users. BUT ALSO Monday, April 29, 13
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