Post on 09-May-2015
description
DOWN THE RABBIT HOLE
Thursday, November 14, 13
TYPICAL CYCLE
IdeaDesign Build
Thursday, November 14, 13
TYPICAL CYCLE
IdeaDesign Build
Brand
MarketingLegal
Product
Sales User Testing
Thursday, November 14, 13
JUST FOR FIXED WIDTH
Thursday, November 14, 13
AND IF THERE ARE MORE...
Thursday, November 14, 13
TIME AND UNKNOWNS
•Do we create compositions for all different permutations just to get a sign off? (a lot of time needed)
•Will it work on the device? (unknowns)
Thursday, November 14, 13
DESIGN APPROACH
• Just in time Design
•Done just before the development team needs it
• Layered Design
• Skeleton - Initial design work, think Layout
•Muscle - Content to fit in Layout
• Skin - Visual Design
Thursday, November 14, 13
SKELETON
Thursday, November 14, 13
PAGE FLOWS
Search Results DetailsHome
RecentlyUpdated
Thursday, November 14, 13
PRIORITIZE YOUR CONTENTThursday, November 14, 13
PAGE LAYOUTThursday, November 14, 13
THE SIGN OFF
ProposedSolution DevBiz
Rep
UX
Thursday, November 14, 13
VS
IdeaDesign Build
Idea
Design Build
Skeleton
Design Build...
Thursday, November 14, 13
THE DESIGN(MUSCLE & SKIN)
Thursday, November 14, 13
FILLING IN THE SKELETON
ResultsPage
FilterMenu
SearchBar Map etc
Thursday, November 14, 13
THE SEARCH BARThursday, November 14, 13
TAKE 2Thursday, November 14, 13
INACTIVE SEARCH BARThursday, November 14, 13
ACTIVE STATEThursday, November 14, 13
ACTIVE STATEThursday, November 14, 13
LANDSCAPE FAIL!Thursday, November 14, 13
PROBLEM
• The sketches were good to allow us to make a decision on a proposal of an idea, but we were missing:
• The interaction of the idea on the actual device (ie. what happens when the keyboard appears on landscape)
• The actual spacing of the elements on page (ie. when padding, margins and actual graphics were used the space issue comes up immediately)
Thursday, November 14, 13
LANDSCAPE - TAKE 2Thursday, November 14, 13
REFINING THE DESIGN PHASE
Sketches
Prototype
Visual Design
Analysis Build
Thursday, November 14, 13
A COUPLE OF NOTES
• Prototype is useful when:
• there is user interactions (input field, youtube video, etc)
• there is uncertainty around page layout/reflows
• Visual designs is obviously a must for the build.
Thursday, November 14, 13
THE BUILD
Thursday, November 14, 13
THE DETAILS PAGE
• Based on content priority:
• Business name
• Address
• Contacts
•Map
•Opening hours
Thursday, November 14, 13
REFLOWING TO LARGE
Thursday, November 14, 13
REFLOWING TO LARGE
Thursday, November 14, 13
REFLOWING TO LARGE
Thursday, November 14, 13
TESTING LAYOUT SHIFTThursday, November 14, 13
OUTCOME
• Test page will exercise all breakpoints to ensure coverage
• iframe to trigger mediaquery breakpoint
• screenshot capture to ensure no regressions
•Makes HTML/CSS refactorable
Thursday, November 14, 13
UI INTEGRATION TESTING Thursday, November 14, 13
LEGO BLOCKS
•Made use of OOCSS techniques to build a library of components
•Made these components intrinsically responsive
• Building pages will just be a matter of composing these elements
Thursday, November 14, 13
SLIDER BLOCK
Thursday, November 14, 13
SLIDER BLOCK
Thursday, November 14, 13
SLIDER REUSE
Thursday, November 14, 13
SLIDER REUSE
Thursday, November 14, 13
LIGHTBOX MODAL BLOCK
Thursday, November 14, 13
LIGHTBOX MODAL BLOCK
Thursday, November 14, 13
LIGHTBOX MODAL REUSE
Thursday, November 14, 13
LIGHTBOX MODAL REUSE
Thursday, November 14, 13
OUTCOMES
Thursday, November 14, 13
SEARCH RESULTS PAGE
• http://bit.ly/1dLAdSg
Thursday, November 14, 13
WINS
• Less sign offs and more collaborations & showcases
• Software was designed to better suit the device
• UI test coverage enabled weekly/fortnightly releases
• UI library of components enabled quick development of new features.
Thursday, November 14, 13
WARNING: LAYOUT SHIFTS ARE EXPENSIVE
Thursday, November 14, 13
Thursday, November 14, 13
QUESTIONS & FEEDBACK
• 4 question survey
• http://bit.ly/down-rabbit-hole
• Twitter : @cpl_rewinds
Thursday, November 14, 13