Mattel:
Premium e-Commerce Brand Alignment


Role

Lead UX / UI Design
• Establish flexible template framework
• Direct and coordinate with freelance/vendor designers
• UX documentation and deliverables (personas, wires, UI comps)

Objective

Unify 4 disparate Mattel brand properties around a common e-commerce (IBM web sphere) user experience.

• Articulate unique brand per property
• Provide features aligned to brand


project collaboration plan

• 4 workstreams to accommodate and align the 4 brands
• 3 month design cycles w/ documentation 
• Daily Mattel/Accenture standups
• UX team managed the relationship between 3rd party vendors and Accenture
• Handoff and Design QA for bugs and design discrepancies

product Team

Client (10):
eCommerce Director, Brand Managers, UX Director, IT Director

Accenture/ Business Analysts and IT (8):
System Integration & IT Managers, US & Costa Rica Dev teams, Customer Experience Managers

UX Team (3):
UX Director, UX Designer, UI Designer

Brand Agency (3):
Project Manager, Designers

 

Understanding the customer

Primary Persona

Through interviews, personas were created to help identify the primary user and their journey, pain points, and areas of opportunity for improvement of the experience. Attending events like the annual Barbie Collector Convention, gave the UX team a better understanding of the community as a whole and how the e-commerce site would fit into the larger collector eco-system. Armed with this understanding of the user along with the insights and metrics gathered via Foresee (previously engaged by the client), the team was able to inform their designs with some concrete data.

 

Refining the requirements

It was important to understand how the different brand sites would share common functionality and platform, but also be able to accommodate unique requirements in service of each brand. An analysis of deltas between brand properties was done and discussed with the cross-functional team so that there was agreement on what would be developed and released for each brand.

With each 3 month cycle, the UX Team created annotated wire frames in Axure — working a few sprints ahead of the dev team. Sprints included checkout flow, index to product page, category landing pages, and in some cases, editorial templates for historical or informational background on the brand.

 
 

Barbie Collector example

After wireframes were evaluated by the product team, each property received a unique visual UI, taking into consideration the characteristics of the brand while also making sure it could integrate with the e-commerce platform and content management system.

 

Styleguide documentation

A styleguide was developed for each brand with specifications detailing styling, spacing, interaction and behavior.

Next Steps

All 4 brands were established on the WCS platform successfully, on time, and within budget. Specifically for Barbiecollector.com, the client saw a reduction in cart abandonment by 15%.

Because the UX team was engaged after the release date had been locked, there was very limited time to conduct evaluative research during the process. The recommendation to the client team post MVP was to continue usability testing (and include A/B testing) as well as implement surveys to gather feedback on how to iteratively improve the experience on this new platform.