Responsive Design, Responsive Thinking: How the Redesign of Walmart.ca Changed the Way We Work eiko.kawano@nurun.com

Oct 2012

“I think that you are a JACK OF ALL TRADES.”

1998. no formal roles.

we made it up as we went along. we were responsive!

responsive is a way of working responsive is a way of thinking

walmart.ca circa 2012

end to end. full functionality.

agile. 9 months.

2-week sprints. teeny ixd team.

Challenge #1 wrangling a whole whack of documentation

checkout circa 2012

“We don’t do wireframes anymore.”

x 3 breakpoints

“Sketching is the best!” “Sketching is faster.” “Sketching is slow.” “My hand hurts.” “Let’s use Axure!”

“I don’t know Axure!” “Let’s just use Omnigraffle…”

“Omnigraffle is the worst!” “Let’s just get through the damn project.”

We had to go back to wireframes.

Challenge #2 looking for “best” practices

product detail page circa 2012

on controversial pages, people look for examples

there were very few responsive mass retailer examples

we looked at a lot of responsive patterns.

we had to accept that we needed to do something new.

We had to get over the competition.

devices personas

components (cartridges) abstracts

Challenge #3 mobile first

sometimes we tackled the trickiest device first.

“But what about mobile desktop tablet?”

We had to change the way we thought.

We had to think about all devices all the time.

We brought back sketching! But this time we did it together.

sketch for all three breakpoints by divvying them up.

Sketching sessions: 1.  Time-boxed 2.  Use competitive as inspiration 3.  Everyone sketches. Clients too. 4.  No such thing as a bad sketch 5.  All devices 6.  Everyone shares

walmart.ca: what we learned

#1 Right tool(s) at the right time.

#2 Don’t get stuck on one type of input.

#3 Collaboration is the only best way through. (Also, take shortcuts.)

thank you.