Barbie Fashion Design Maker

Desktop & Tablet App Case Studyby Wilson Tu

The Barbie Fashion Design Maker app was originally a product idea brought to our studio from Mattel, who asked that we flesh out the interactive concept and produce the tablet and desktop apps that go along with the physical product. The concept of this product is that children can design design dresses and outfits on their desktop computer by visiting Barbie.com or by downloading the free companion app, and then print out their designs onto fabric paper.

Focus Testing Prior to beginning work on the app, our team was tasked with producing clickable prototypes that allowed Mattel to focus test the overall concept on a group of children. The prototypes served as a proof-of-concept for the designing and printing of Barbie’s clothing, and the children were overwhelmingly receptive of the idea of product.

Various user flows were created once a basic structure for the app was in place. Here are finalized flows that incorporate UI elements for extra clarity.

Ever-changing Requirements Once production officially began, I set out to gather a comprehensive list of requirements for the app by interviewing stakeholders from Mattel’s product team. The first round of interviews yielded straightforward requirements and I used the learnings to create basic app structure and user flows that would go on to dictate what screens were required to design. The client continued to revise their product requirements over the course of the project, insisting that additional features be added in, gamification being the most complex change to incorporate.

Gamification was a crucial feature in the app. I established a point system and created a list of tasks and achievements that were the primary component of the app's gamification.

Gamification My team and I brainstormed ideas on what aspects of the existing design process that could be gamified, and that resulting list became the foundation for which achievements and awards were based. In order to encourage repeat use of the app, many of the achievements focused on quantity of designs the user creates and saves, as well as variety of design elements that are used. The “fashion designer” metaphor was a recurring theme in the app that was also applied in gamification in the form of levels that users could achieve, starting with the “student” level. As they create more designs and complete more achievements, they are awarded points that count towards their levels. Leveling was designed to be exponentially difficult as users progressed.

User testing ensured that the user experience was optimal for children ages 5 to 8. Kids that tested the app demonstrated a higher proficiency with touch devices than was anticipated.

Printing The viability of the FDM product hinged on the ability of users to accurately print their designs onto fabric paper. This was complex due to the fact that printing differed depending on the device the user is playing with the app on (iOS, Android, desktop). Our solution was to utilize the printing tools native to the each respective platform, but to also supply users with an alternate means to print by emailing PDFs of their designs to themselves should they not have access to wireless printing (such as AirPrint). Printing, as was demonstrated in user testing, was a step prone to user error. As a result, the print screen dialog necessitated clear messaging and simple infographics and icons to instruct users on how to print their designs.

Prior to user testing, elements were resized using grippy handles attached to the edges. We removed those and allowed kids to use natural touch gestures to resize after testing.

Design and Validation The design process began first with preliminary sketches between the user experience team that included myself and my boss, and our visual designers. These meetings served between the two teams served to establish the foundational vision that would be used by both moving into the next steps-- UX would begin creating wireframes of the app while the visual designers would start by creating a style guide. Once basic wireframes were created, we created clickable prototypes to quickly validate the overall flow and structure of the app. We worked with the designers to translate the experience into fully fleshed out comps while additional features of the app were being worked on simultaneously.

The app received a lot of positive reviews on iTunes and Amazon from both parents and children saying it’s fun and easy to design new outfits with the app.

Designs continued to evolve as we received client feedback and adjusted elements based on quick user testing. When a beta was created, we were able to user test the entire app with children ages 5-8. While the concept and overall design were well received amongst the kids, there were various minor usability problems that arose from the testing. Some were an information architecture issue that concerned the way in which design elements were arranged and displayed to users. The more notable issue involved the way in which users manipulated said design elements on touch devices; the kids who tested the beta resoundingly used pinching gestures to resize elements.

Results Barbie Fashion Design Maker launched in time for the Christmas holidays and was well received by those who purchased it. Many reviews lauded the app as the best part of the product and praised it for its easy-to-use interface and the hours of fun their children had in designing outfits for their Barbie dolls.

☕

About the author

Wilson is an experience designer who considers his skillsets rooted in user centered design, product development, and digital strategy. He has created many iterations of his UX portfolio but finds this current iteration the most “charming.”
Contrary to the perspective he employs in his writing on this site, he does not like to refer to himself in third-person, and never rarely has full conversations with himself.
Wilson is open to new career opportunities. Check him out on Linkedin.