Campfire Stories A Tale Of Two Redesigns

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.

Internet Retailer #186

Medford, Oregon

Internet Retailer #300

Anamosa, Iowa
Combined Revenue: > $250 Mil / yr
Combined Visits (mo): ~2 million
Combined SKU's: ~250,000

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