Responsive Web
Walmart was going through a responsive web redesign—expanding the two break-point adaptive desktop site to retire the mWeb site.
Companies where discovering that if they went responsive, time and money could be saved from supporting multiple platforms.
Process
We had 10 weeks to pull a proof-of-concept prototype together. We led design studios with each of the 10 product teams; one each week to come up with a core set of patterns that covered their domain.
In the end, we would hand the teams a set of core patterns for them to take forward and work through every use-case they were responsible for.
Walmart had already done a tablet first redesign; this effort would focus on mWeb.
designs
The starting point would be the tablet redesign patterns and work with the teams to finalize mWeb versions.
A good example of the big challenges we had to solve for was checkout. The customer had lots of competing elements for them to pay attention to; especially with being able to ship or pick items up in-store, which was pretty new at the time.
How do we handle space and keep the eye focused on the right things?
The User of Color
With the re-brand, we had more colors to work with.
Orange became the color to indicate what to focus on.
We reduced the amount of content shown, only providing the best options. Additional content would be hiding behind a “see all” option.
Remove the Unnecessary
We looked for opportunities to remove unnecessary elements for example. Once a customer is within checkout, the Walmart Spark is only shown.
We felt the word Walmart was no longer needed and space in the mWeb header was valuable.
Enhance the Important
At the item level, the most important functions were enhanced with very big tappable elements.
These were the most used functions in Cart and Checkout. The item information becomes less important so, it was made smaller.
With all the competing priorities from the different departments, designing for mWeb forced people to make hard choices to reduce as much of the page clutter as possible.
conclusion
At the end of the 10 weeks, a presentation was given to senior leadership and we got the green light to move forward.
In collaboration with the research team, 3 days of in-studio testing were held to catch any major issues and final updates to the designs.
A walk-through was held with each product team to hand off our work. Each product team would take the baseline patterns and work through the remaining use-cases.
Lastly, using Confluence, we created Walmart’s first pattern library, which included the dos & don’ts, specs, and animated gifs to show how each pattern should work.