How to make an e-commerce site fully responsive - Eiko Kawano talks about the redesign of Walmart.ca

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

2. Oct 2012

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

4. 1998.
no formal roles.
we made it up as we went along.
we were responsive!

5. responsive is a way of working
responsive is a way of thinking

6. walmart.ca circa 2012

7. end to end.
full functionality.
agile.
9 months.
2-week sprints.
teeny ixd team.

8. Challenge #1
wrangling a whole
whack of
documentation

9. checkout circa 2012

11. “We don’t do wireframes
anymore.”

12. x 3
breakpoints

13. “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.”

14. We had to go
back to
wireframes.

16. Challenge #2
looking for “best”
practices

17. product detail page circa 2012

18. on controversial pages, people
look for examples

19. there were very few responsive
mass retailer examples

24. we looked at a lot of
responsive patterns.

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

27. We had to get
over the
competition.

28. devices
personas
components (cartridges)
abstracts

29. Challenge #3
mobile first

33. sometimes we tackled the
trickiest device first.

34. “But what about mobile desktop
tablet?”

35. We had to
change the way
we thought.

36. We had to think
about all
devices all the
time.

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

38. sketch for all three breakpoints
by divvying them up.

39. 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

41. walmart.ca:
what we learned

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

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

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

45. thank you.