Hi! I'm Jess

I'm A Front End Developer & User Experience Designer at

On Twitter: @JBertling

The Year Is 2012

• Responsive is catching its footing.
  But not on large scale sites
• Touch device explosion.
  Rapid development of sizes and OS
• HTML5 and CSS3 standards support.
  But still a lot on older browsers
• MAG Retail is formed.

Project 1: The Platform

Featuring Motorcycle-Superstore.com

Requirements

• "Full" Rewrite
  Copied over a lot of the existing logic, no change to tech stack.
• Shared E-Commerce Platform
  Eventually add J&P Cycles and maybe future brands.
• Responsive + New Design
  & a few features.
• Scheduled "Big Bang" Launch

Requirements

• Distributed Team
  Oregon, Florida, Iowa
• Process: Opaque/Trickle Down
  No road map, communication siloed in email and DM.
• Source Control: TFS
  All work to be committed at EOD so it can be pushed to staging.
• New Development Freeze

Outcomes: So Slow

CSS weight more than tripled.

• No collaboration, no code reviews.
• No framework, no style guide.
• Essentially every (wo)man for themself.
• Desktop first.
• Didn't design to flex, new layouts at breakpoints

Outcomes: So Slow

Image Issues

• This was before the picture element was a thing.
• Relying on scaling or overwriting a bigger image with a smaller one.
• Loaded large image, scaled as needed.
• Used images where could have used more efficient alternative.

Outcomes: Other Issues

• Most of the back end was reused
  All the old obstacles and bugs to work around.
  We weren't able to improve the UX of suboptimal features.
• One-off static pages
  Generated through a wysiwyg editor, they were each unique and not able to be edited at scale.
• Fell behind competitors due to over a year of devlopment freeze.

Big Bang

And Subsequent Failures

• Rushed to meet "Big Bang" date and please executives.
  Rushed QA, known bugs in production
  
• OMG ALL THE BUGS Bugs at various viewports and no process to triage and handle the fixes.
• User + revenue decline and don't stop.

Project 2: The New Platform

Featuring JPCycles.com

Requirements

• Iterative
  Start at checkout, move backwards through funnel.
• Shared E-Commerce Platform
  More in framework than all the things.
• Responsive ONLY
  Design stays (mostly) static. This is a tall order.
• Must work in IE8 (still significant traffic, revenue)
  And no media query support
• Deploy as completed, constantly measure.

Requirements

• Distributed Team
  Oregon, Florida, Iowa
• Process: Agile/"Scrumish"
  Planned, shared roadmap, open collaboration with key parties.
• Source Control: Git
  Collaborative branching, pull requests, code reviews.

Why Iterative?

It Works.

• New Production Code Faster!
  Less time mainting multiple instances.
  Deliver value sooner.
• Fight Bugs in Stride.
  More manageable, affects less areas of the site, better UX.
• FAILURE IS APPARENT SOONER
  As is success. Measure, measure, measure.

How We Did It

• One Sweeping Change At A Time
  The more changes you make, the harder to isolate any problems or successes.
• Kept Wireframes/Mocks Loose
  Prototypes in HTML so you can see the flex and shifts in action.
• Designed to Flex and Flow
  Didn't reinvent the layout for every specific viewport.
• Had A Style Guide
  Got everyone on the same page for expected styling of similar elements and how they should behave.

How We Did It

• Worked Backwards, Reversed the Funnel
  You land in responsive as opposed to bounce out.
• Started With A Fresh Master Page
  Header/footer first, then actual content.
• New CSS/JS As You Go
  Create reusable and efficient classes based on a style guide as you need them.
  Do code reviews so colleagues know what's in the CSS that they can use.

How We Did It

• Mobile First CSS
  With a specific stylesheet for IE8 that was essentially the desktop styles added in without a media query.
• Mobile First Images & Sprites
  Used background images wherever possible to control image loading.
  Broke up some sprites and only loaded them in appropriate media queries.
• Kept the Media Queries to a Minimum
  Only 3 viewports, not for specific devices but when the design warrants a break.

How We Did It

• Within An Agile Process
  Pages and components were storied out, prioritized amongst other things.
• Alongside New Develpment
  Thanks to advanced source control techniques, we had no need to freeze new development. Any new pages/features were built responsive.

Outcomes

• Despite 2 New Viewports, FASTER Than The Original
  New optimized CSS, mobile first, flexible design.
• Revenue, Mobile Conversion/Traffic Up
  We like $$.
• Not A Single Major Bug Reported
  Thanks to code reviews and careful attention from the team. No QA.

Outcomes

• Completed Faster Than Full Rewrite
  Despite smaller team and sharing time between initiatives.
• Essentially "No Change" To Desktop Users
  Never interrupted the original user experience or workflow, smaller devices experience got better.
• Overall A Success Story!

Thanks For Coming!

Jessica (Jess) Bertling

@JBertling