The team and my role
- Julia - VP Strategy
- Tania - UI Designer
- John - Android Developer
- Drew - iOS Developer
- Tim - HTML 5 Developer
- Kayvon - Producer
- Carrie - Product Manager, Mattel
As the UX designer for Fashion Design Maker, I participated in concepting, product strategy, and research; developed plans and documented functionality and interaction design; led the UI design process with wireframes and prototypes; and worked with developers to address idiosyncrasies across devices.
- Design easy-to-use app that allows kids to design outfits for Barbie and print their designs onto fabric paper
- Elevate perceived value of the app through high replayability to encourage the purchase of additional proprietary fabric paper
Approach (or Problems Defined)
The primary goal of designing an app for which users could design and print outfits for their Barbie dolls was clear. But in speaking to key stakeholders to uncover potentially hidden goals, we discovered that the secondary goal of the app was two-fold: bolster the replay value of the app, and encourage users to design more outfits to drive additional sale of the proprietary fabric paper. My team and I regrouped, and given these goals, we brainstormed ways to address them and defined several problems that, when answered, would help us achieve them.
- How do we make this concept fun so that users keep using the app?
- How do we make it easy to design beautiful outfits?
- How do we make it easy to print?
Addressing the Problem: How do we make the concept fun so that users keep using the app?
Gamification was proposed as a means to promote a more invested experience for children using the app. The challenge laid in how to address and seamlessly join together a set of particular requirements: narrative must be convincing/on-brand; must encourage more play; must encourage the use of all features of the app; and must be simple enough for adolescents to follow.
Using the “fashion designer” concept that Mattel provided, we defined a narrative in which users progress through their career as Barbie’s fashion designer; starting out first as a student before officially starting their career at level 1 once they’ve completed their first design. This story was structured accomplishments and achievements that were unlocked by completing a multitude of tasks and performing specific actions-- ultimately encouraging users to explore the entire offerings of the app while feeling a sense of progress and advancement in the storyline. I created a point and scoring system that was implemented to track the user’s game progress, which also factored in the aforementioned milestones.
Addressing the Problem: How do we make it easy to design beautiful outfits?
My team and I understood that regardless of how enthralling the narrative and gamification component may be, if designing outfits isn’t enjoyable, then the user will get frustrated and lose interest, and the product would fail. With that in mind, we made sure simplicity was the fundamental basis in conceptualizing our solutions to designing the user interface.
We carried over the drag-and-drop concept from the prototype we had designed for Mattel to focus test the idea. Before we committed ourselves to refining our first solution, we sketched out and explored various menu styles that organize the multitude of design elements. Together we discussed the merits of each direction we came up with, weighing the pros and cons of each as a way to narrow down the selection.
The ‘Add Text’ screen was also among one of several key interfaces I designed; in the process, I grappled with how users could change fonts, and whether or not to show the font names. In the first iteration, font names were included as radio buttons to change the typeface, limiting font and color to preselected options.
While this was the more simple approach, we had to remind ourselves that customizability is critical to user engagement, so I revisited the feature. The solution was a singular interface for creating text; fonts and colors were now separate options.
Addressing the Problem: How do we make it easy to print?
Cloud Print and AirPrint were the obvious native solutions to printing on Android and Apple devices, respectively. However, at the time of design, wireless printing wasn't yet a prevalent technology-- so we made it so that users can email it to themselves to print it from their computers. We experimented between PNG and PDF as export formats and settled on the PDF for its consistency in printing within the designated area of the fabric paper. A straightforward interface with pictorial instructions was designed to guide users along the process and reduced opportunities for error.
Concept Validation: "Is this something Barbie would use?"
Despite creating clickable prototypes throughout the wireframing and visual design process and testing it with people within the office, we have yet to test our designs on actual users. After all the components of the app were completed and a working beta was created, we went to Mattel’s testing facilities to user test our app of children of ages 5-8 to assess the ease-of-use. Attention was also paid to the participants' level of interest in the game's narrative and gamification aspect. The multiple sessions yielded helpful insights that we used to refine the app afterwards.
- Among these insights were users’ affinity for pinch-and-zoom despite visual affordances to resize elements via grippy handles.
- Testing showed the need for more visual affordance to indicate that users should drag-and-drop; the users tended to double-tap to use items instead of dragging. Our solution was to make the draggable elements perform a bounce animation when they’re tapped, indicating that they’re movable.
- We tested whether users understood how get to the print screen from the design screen without an obvious print icon. Testing showed that children understood that the right arrow in the bottom righthand corner would take them to the “preview” screen where they would then be able to print their designs if they want to.
- Testers were inclined to scrap entire outfits when they were displeased with the direction that their design was going by creating a new outfit instead of "trashing" their current design. This subtlety prompted us to adust the symbol used to delete an outfit/start a new one from a trashcan icon to a "new dress" icon.
- In testing the key task of starting a new design, we also found that some of the users accidentally deleted their designs, and so we added a confirmation step to prevent this from occurring.
Barbie Fashion Design Maker launched in time for the Christmas holidays and was well received by those who purchased it. Unfortunately, we weren’t privy to the actual sales numbers, so we couldn’t tell if we succeeded in hitting the metric for fabric paper sales. However, many reviews on Amazon and popular app stores 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, which assured us that we did, in fact, achieve our primary goal of designing an easy-to-use app.
My only regret is that my team and I didn’t have the opportunity to validate our design solutions to the issues that arose in our user testing one more time.