What is Costume Smash?
For the General Assembly Hackathon held on October 19-20, 2017, we were tasked with creating, in just over 24 hours, a mobile or web app with an e-commerce element. Because of the time of year, we were also encouraged to make something with a Halloween theme.
To my team, I proposed an app that allows users to choose a character that they want to dress as for Halloween, and get recommendations of products, found on Amazon, that they can use to create their desired costume. My team liked the idea, and Costume Smash! was born.
Each team was made up of two UX designers and two developers. We split up the design tasks so that I was responsible for interaction design and visual design, while the other designer performed research, created aclickable prototype, and crafted our final presentation.
What
Halloween E-Commerce App
Where
General Assembly
My Role
Interaction and Visual Design
Timeline
26 hours
Problem Statement
When selecting a costume for Halloween, someone who wants to be a specific character has a few choices available to them:
- Buy a pre-packaged costume, which are generally either prohibitively expensive or of poor quality.
- Craft their own costume from materials, which requires skill, know-how, and the proper tools.
- Assemble a costume from higher-quality, individual compontents.
The third option can result in costumes of a higher quality for the price paid, but requires a lot of shopping around to find the best costume pieces. With that in mind, we created a problem statement:
Trick-or-treaters and partygoers who want a costume that impresses don’t have their quality needs met by the typical costumes available at costume shops, but don't have the time or skills of a dedicated cosplayer.
Proposed Solution
The goal of Costume Smash! was to give users a resource to quickly plan a costume that was uniquely theirs. We had three key points in this strategy:
Reduce time spent planning a character costume.
Provide high-quality options that are not the low-quality, bagged, all-in-one costumes found at big box stores and costume shops.
Let users move immediately from selecting their costume components to purchasing them via Amazon.
Success would be measured through user engagement and, ultimately, in affinity payments earned through directing users to Amazon or other online retailers.
Concept Sketching
To kick off the project, we met as a group and pitched ideas for the app. Once we'd settled on the idea for Costume Smash!, we did some initial whiteboarding as a group, before splitting off to tackle our respective roles. While the other UX designer focused on a competitive analysis, I went to work on the whiteboard, sketching out a variety of page layouts.
Through critique and feedback from my teammates, we settled on a layout style we wanted to pursue. I then drew up some higher-fidelity whiteboard screens, so that prototyping would be able to begin immediately the next morning.
Product Research
So that the developers could begin setting up our product "database" on Friday morning, I spent Thursday night collecting product information on two example characters: Marvel's Thor and Disney's Moana. We picked these characters because we figured they'd be especially relevant this Halloween.
Below are some examples of product images I found for Thor:
And for Moana:
I conducted these product searches on Amazon, finding costume parts, (but trying to avoid complete costumes,) that fit each of our two characters, and filling out a database spreadsheet that had been created by our developers. After downloading images from these products I used a tool called FastStone Photo Resizer to crop and resize them all as a batch. It saved me hours of time, as otherwise I'd have been editing each image individually to resize it.
Wireframing
Working off of the whiteboard sketches I'd made the day before, I started on wireframes first thing on Friday morning. By noon the first version of them was complete, and the other Designer on the project completed his prototype and subjected it to user testing. There was some minor iteration as a result of that testing, resulting in the final wireframes you see below.
Style Guide
While user testing was in progress, I threw together a quick-and-dirty style guide to use for the high-fidelity mock-ups. I made up the names for the colors; it seemed appropriate for the project.
I also assembled a logo for our team. It was literally just three pieces of clip art stacked on top of each other, with some color correction in Photoshop, but other teams were impressed by it anyway!
Stylistically, I was aiming for a Halloween theme, but not necessarily by being grim and scary. Bangers ended up working really well as a choice of display font, since it gave the site a spooky, comic-book feel.
Mock-Ups
Using the wireframes as a base, I began replacing temporary text and images, and converted the grayscale in the wireframes to full color. This started immediately after lunch and ended about 15 minutes before 4:00 pm, when the Hackathon was over. I came in just under the wire!
Presentation and Results
We had just five minutes to present our project to the class. The other Designer on the project had assembled the slide deck, so it was just a matter of adding my content to the necessary slides. We tore through the deck quickly, touching briefly on each step of the way, so that our Developers could present the actual working web app.
When all presentations were finished, the results came back, and Costume Smash! had won the hackathon by unanimous decision. We were thrilled with the result, and had a great time working on the app.
A few people from other teams commented to us later that they wished our app was real, to help them plan their own costumes. Maybe that's the next step....
From left to right: Chase Deger (Developer), Ralf Wiebeck (Designer), me, Brian Connor (Developer)