Wanting to do a side project for Valentine's Day and showcase WebGL, Fancy Pants Group tasked fellow designer Olivia Obin and I to concept an idea to produce. Fancy Match is a simple parody dating mobile site in which users are asked a series of "serious" questions to then be matched with their perfect steamy single, a slice of pizza.
With ideas ranging from a music visualizer to utilizing flowers and candy hearts, we always came back to the idea of wanting to build something that everyone, single or in a relationship, could appreciate on Valentine's Day. Pizza is a popular food, and people often joke that it's their "one true love." Wanting to play off of this idea and after stumbling upon the article 41 Reasons Eating Pizza Is Better Than Being In A Relationship by Sam Stryker from Buzzfeed, we knew we had something.
With such a short timeline, the team had to work fast. The final reveal was the punchline, so we had to make sure it didn't take the user a long time to get there, or else the joke would be lost. The challenge was to keep the user engaged. By doing so, we had to craft a series of questions that were just serious enough, yet not too intrusive, to get the user to not only complete the quiz, but to think we were really going to match them with a "steamy single."
Because this was a faux dating site, we started researching dating sites/apps to get an idea of how they presented and asked for information. Finding these dating tools using short questions, we knew that was key for our mobile site as well. The quiz format was to be friendly and light, so we used these dating tools as a reference on the kind of questions to ask. With a limited number of questions to ask for our mobile site, we asked the basic age and gender preferences in the beginning, with two dating questions to follow.
A common element among the dating apps we researched had fluid animations and rewarding interactions (such as the swipe action on Tinder). We brought this element into Fancy Match by making the age selector an interactive slider and making the additional questions very visual, accompanying the answers with custom icons illustrating each. I drafted basic wireframes to illustrate how the general layout should be, and worked with the designers to make sure each question was properly conveying the message it was asking. Pagination was also include in the quiz process to show the user's progress in the quiz, and to reassure the user that it was a short quiz before the final results.
The final HTML5 mobile site result included an opening introduction page, inviting the user to find their perfect match, 4 question pages, and a final result, consisting of 4 different pizza slice variations. Web GL and accelerometer was used in the presentation of the pizza slices on the result page, allowing the user to view their perfect slice at all angles. An accompanying music selection was found for the quiz process, and corresponding music personifying each pizza slice on the result pages.