- Annotated wires.
- A revised user flow was created to visualize wish listing and key behaviors.
- The product needed reflow instructions for key pages for designers and dev to prototype.
- The final deliverable included a UI Kit for designers to systemize the comps for expansion, which assisted the team in making sure the shop could be extensible to other brands. The UI kit was road tested with 3 other brands.
Global Shop experience
Mattel is in the process of updating all brand websites to meet current technology. The explosion of mobile since the last redesign of key properties has made it mandatory to optimize for all devices. The interesting thing is that all Mattel sites follow a similar format, making it easier to control a single template, and update only certain style parts to create and maintain sites, so we decided to create a shop template. The new Barbie.com was the furthest along in its iterative process, so it was the first to use it. It also needed to be "global friendly" so they could use the same design for multiple countries.
The differing style of all the brands, plus the different implementations made it difficult to design a singular solution. The solution had to be self contained, yet easily integrated into the new sites in production. There were also many ways that users looked for product, (Price, age, character, etc), so categorial structure might prove problematic in product discovery.
The biggest design concern was how we were going to improve conversion, without favoring any one retailer. We pulled in prices, and used a comparison shop feature with direct links to purchase. Plus, we improved the wishlisting function to increase usage. We also had to devise a way the site could be maintained with minimal CSS sheets, so we defined what was editable and what was not.
The new solution features a responsive framework, and takes advantage of a tag structure versus a traditional categorical structure to make finding product easy. The solution is made of an extensible module system, whereby brands can add or subtract modules to create their own unique page.
Product definition/requirements, Interaction Design, Information Architecture