Masquer-aide- The Costume App for Costume Creatives

Nichole Tyler

My Role: UX Researcher | Duration: 2 Weeks | Project Status: Completed

Project Overview

Our team believes modern day costume shoppers have a choice: buy a complete lower-quality costume from a retailer, such as Walmart, or put together a higher-quality costume with clothing items and accessories from different retailers and just pray they look good when put together.

We decided to focus on people that create costumes from different costume pieces. Before we actually dove into talking to our target audience, we wanted to acknowledge what we assumed their needs would be. We assumed they will want to be able to visualize the pieces of their costume put together, they would want to know where other people bought their costume pieces from, and that they will want to be able to buy the costume from the same place that they put idea together.

To validate our assumptions, we conducted user interviews with five costume creators that we selected only after they completed a screener survey ensuring that they put their costumes together, not buy them from a store. We asked costume creators questions about their process for creating a costume, where they get their materials from, and how long it generally takes to create a costume. From the interviews, we used affinity mapping to translate interview observations into target user insights. We learned that costume creators want visual inspiration and feedback from other people when designing a costume, they want a way to maintain overall costume consistency while buying across multiple websites, and they feel that they have to visit several different retailers to get all the materials they need for their costume. Utilizing the insights, we created a persona (a representation of our target audience) and journey map (a tool to visualize the user’s current experience) to fully empathize with our user. With our persona in mind, we revised our problem statement to be: How might we provide costume creators with as single destination that provides them with costume inspiration, a way to build a cohesive costume, and resources on DIY costumes?

As we entered the design phase, we did a MoSCoW map to determine what were “must-have” features/functionalities for our costume app and what would be tabled in the scope of this project. Secondly, we did a design studio as a team to envision how our costume app would visually manifest by ideating sketches of different screens as a team. From the two methods of ideation, we aligned on the four following app screens: upload/add links screen, costume builder tool, DIY/How-To, and a search function. This led us to the creation of Masquer-aide, a social media app for costume enthusiasts that should serve as the one stop shop for costume inspiration, ideation, and purchasing.

We created a mid-fidelity version of the prototype ran a round of usability testing users across five tasks centered on the three main functionalities of the app: searching for a costume idea and adding to costume builder, searching for DIY idea and adding to costume builder, and uploading a picture of a past costume and adding links for an item in the picture. We quickly learned that users wanted to go to “explore” section of app before starting to build an actual costume. We also realized users were struggling to understand the difference between posting a photo from their costume library within the app and uploading a picture to post from their phone.

We took the feedback and designed a hi-fidelity clickable mobile prototype and ran another round of usability testing. Task success decreased from round one to round two so our team had to really evaluate where our users were getting stuck within the site; ultimately, we learned that we had created tasks that were a little too lengthy and left users struggling to remember what they were supposed to do.

Lastly, our team was asked to identify a business partner that aligned with our app. We chose Pinterest, an image sharing and social media service designed for the discovery of new information. We provide value to them by providing value to their target user from discovery (where Pinterest currently provides the most value) to checkout (where Pinterest is trying to reach). Pinterest provides value to us in the access of their large, engaged user based that is comfortable searching for inspiration on a mobile app and believes in searching for an idea over a specific brand.

Going forward, the next steps are to re-write usability test script so tasks are shorter and easier to understand. Then we are going to build out full prototype where all links on every page are clickable and run another round of usability testing. Long term, the next steps are to add functionality to the app in the form of: a multi-retailer cart (allowing users to buy costume pieces from different retailers all at one time), a order status page for costume pieces being shipped, an avatar based on body measurements inputted by the user, and a random costume generator.

Scope of Work

Costume creators struggle to compile costume pieces from different retailers into a unique and recognizable costume; from not being sure how different items will look together to losing track of what all they have purchased or how much they have spent, the process is long and disjointed.

Process (Explaining the UX Framework at a High-Level)

In the “discover” part of our project — during which we set out to better understand our problem by gathering user research — we prepared and conducted the following:

• Screener survey for interviews: Tool used to find users that create their own costumes to talk to for interviews
• User Interviews: Learned that most costume creators both buy the pieces of their costume and attempt some form of DIY
• Affinity Mapping: Learned ten insights from user interviews, the three most actionable of which are that our solution needed to allow costume creators to get inspiration from other users, compile a costume visually, buy costume pieces from different retailers all in one place
• Persona: Created Sarah, a representative tool created by combining data from our five interview participants
• Journey Map: Visualized Sarah’s journey through creating a costume to understand pain points that served as an opportunity for our app
• Revised Problem Statement: How might we provide costume creators with as single destination that provides them with costume inspiration, a way to build a cohesive costume, and resources on DIY costumes?
• Business Model Canvas: Tool used to evaluate Pinterest as a business partner and ultimately conclude that they were a good match for our app

Methods (cont.)

Once we had defined a more pointed research problem, we were able to enter into the the design phase of our project which led to the creation of a social media app for costume creators, Masquer-aide:

• MoSCoW map: We defined the five following features as necessary for our MVP: A way to upload a picture of a costume and include links for the items in it, build a costume tool, DIY/how to videos, visual search feature
• Design studio: Envisioned the way the app would look and combined design ideas so we could start prototyping
• Mid-fidelity wireframes/prototype: Used for testing the intuitiveness of Masquer-aide after the first round of design
• Hi-fidelity wireframes/prototype: Used for testing the intuitiveness of Masquer-aide after branding, images, and color was added
• Usability testing: We tested users successful completion, time on task, and easiness rating of the following major activities of our app: 1) Browsing costume inspiration and starting to build a costume with an item from another user’s post 2) Browsing DIY and adding an idea to user’s costume build 3)Uploading a picture of a past costume and linking a specific item with where the user bought it from

Problem Space Statement

Hypothesis: Costume creators that make their costume with items from different retailers need a single place to view all their items and get inspiration from other people.

Assumptions: 1) Costume wearers will want to be able to visualize their costume all put together 2) Costume wearers will want to know where other people bought their costume pieces from 3) Costume wearers will expect to be able to buy the costume from the same place they compile the costume

Initial Problem Statement: How might we provide costume shoppers with a tool that allows them to create and purchase totally customizable costumes while viewing other people’s costumes for inspiration?

RESEARCH PHASE

Goal of Research

Our goal for user research was to validate our hypothesis about costume creators needing a single place for costume inspiration and building and purchasing a costume.

Methodology

Our research methodology was to conduct short, qualitative interviews with five costume creators to learn more about their process, sources, and timelines for building a costume. We asked open-ended questions such as “How did you get into making your own costumes?” and “What is the most difficult thing about putting a costume together?” to draw meaningful observations from our interviewees about their current needs, goals, and pain points.

Synthesis » Affinity Mapping

We wrote the observations we gathered through user interviews on sticky notes and grouped them in like categories to see if any natural patterns presented themselves. We then took those themes and turned them into insights that we used to create a persona and a revised problem statement.

Affinity Map

Actionable Insights

Contextual Insights

Persona

We applied the insights from our user interviews to create a persona, a representative tool created by compiling user feedback. The persona, Sarah, allows us to make sure that our insights are valid in a real-world setting and also allows us to constantly align our research and design around our target user. For example, Sarah is a 26 year old costume enthusiast that cares about having an impressive and unique costume and loves to be creative, but struggles to know how different costume pieces will look together. She also longs to be more crafty but doesn’t have the knowledge or skill to do so.

Revised Problem Statement

SCENARIO: Costume creators have a long and disjointed journey that involves different retailers/resources for every step in the process.

PERSONA/PROBLEM: Sarah has a Halloween costume contest coming up this year and has decided to go as Ginger Spice from the Spice Girls. Just to create this costume, she will have to visit Pinterest, Amazon, Walmart, Etsy, a craft store, and Youtube and still may end up with an outfit that isn’t cohesive.

GOAL: How might we provide costume creators with as single destination that provides them with costume inspiration, a way to build a cohesive costume, and resources on DIY costumes?

INTERSECTION OF RESEARCH & DESIGN

Our team ideated app functionality/features for our app using a method called MoSCoW mapping, which allows teams to prioritize what must be included in the MVP, what should be, what could be, and what won’t. From mapping we determined the following functionalities needed to be included in our app: upload/add links screen, costume builder tool, DIY/How-To, and a search function. Then

MoSCow Map: From mapping we determined the following functionalities needed to be included in our app: upload/add links screen, costume builder tool, DIY/How-To, and a search function.

Design Studio: Sketching our team’s vision for the four different screens allowed us to quickly align on the design before we moved into prototyping.

DESIGN PHASE

MVP Reveal

A space for our users to discover new eco-tech and track the savings and impact from the eco-tech already in their home.

Mid-Fidelity Screens

Mid-Fi Prototype: https://bit.ly/2HjIea9

Initial User Testing: First Round

High-Level Insights

Our users struggled with the first task which was to start building a costume and then explore inspiration from other users. A few of our test subjects said that they expected to explore costumes before jumping in to building one.

When trying to complete task four, in which users were asked to upload a costume to their profile, test subjects didn’t realize they were supposed to be uploading a photo from their phone instead of one already in their profile. Our team realized we needed to clarify between uploading photo to costume profile and posting to the app’s feed.

• Change button label from “add completed costume” to “add photo from camera roll”
• Add notification requesting permission before accessing user’s camera roll
• Add some more descriptive language on costume page to clarify difference between saved and past costumes
• Change “Past Costumes” to “Posted Costumes- thanks for sharing” to clarify that those have already been uploaded to your profile
• Increase visibility of important buttons by making them larger and colored so they are easy to distinguish

Final Hi-Fidelity Screens (Mobile)

Final Hi-Fi Mobile Prototype: https://bit.ly/37y9lcE

User Testing: Second Round

We then ran a second round of usability testing on our hi-fi prototype to see how our design changes affected results. We saw an overall decrease in tasks success and through analyzing the results of the test, determined the following insights:

Key Takeaways- From Testing

• Remove Brand Names and add abbreviated item names on costume builder pages
• Make button colors consistent depending on action they perform
• Create informational hierarchy on page by making subheadings/feature names smaller text size and a different color

Key Takeaways- About Testing

• Usability tasks were a little long and hard for users to remember. Going forward
• For task actions that don’t require a specific choice, build out all pages user could choose as to not negatively skew the data

KPIs

Our team identified key performance indicators we wanted to track through the Google Heart Framework to make sure we were making progress towards our user experience related goals. Overall, the way we will measure success in our application is if people see enough value to sign up for an account, continue to use the account for multiple costume creations/purchases, and if they enjoy themselves while using the application.

Business Partner- Pinterest

Why We Chose Pinterest:

1. Large and engaged user base (our target market)
2. Personalized curation of user generated content (aligned with our app)
3. Pinterest users are not searching for a specific brand, they are searching for an idea (aligned with our app)
4. 85% of pinners use mobile app (aligned with our platform)

Why Pinterest will Choose Us:

1. Pinterest currently provides most value to its users during the discovery phase but as a company is trying to expand to being present at every stage of the customer journey. Our app provides value from discovery to checking out and will help Pinterest more comprehensively address the needs of their target user.

Next Steps

Changes to Prototype

• Apply changes from Usability Test 2

Third Round of Usability Testing & Design

• Break out lengthy tasks into smaller, simpler tasks that are easier for users to understand
• Usability Test
• Synthesize Results/Make Design Changes

Features to consider implementing going forward:

• Way for users to save individual costume items to a “library” instead of specific costume
• Increased functionality of costume builder tool to allow couples or groups to design together