III. Developing the Detailed UX
“Pixel perfect” sounds like a Pitch Perfect remake about coding
Okay never mind, I just remembered that Pixel Perfect was that 2004 Disney Channel original movie with the guy from Phil of the Future whose dad creates a secretly holographic singer to help his friend Samantha’s band gain more popularity…Where was I going with this? Oh yeah, I feel like designers are always talking about “pixel perfect” creations. I definitely can’t guarantee that the UI of Pears to Pairs is perfect, but I can explain how I designed it. Keep in mind, the UX/UI portion of this project was worked on individually over the course of a week, almost two years after the service design course was completed.
Wait, they don’t love you like I love you…maaaaps
My service design course left me with a crude list of some MVP features to include in Pears to Pairs’ design. In order to fully flesh these out and define their functionalities, I created a product feature roadmap. The map details the various features of the game along with their functions, justifications, and priorities, and set the foundation for creating the user wireflow map for Pears to Pairs (seen above.) These maps, however, do not contain the standard Facebook Messenger games hamburger menu that allows players to share the game, report a problem, favorite the game, or enable Messages as it is present in all Messenger games.
Through the wire[frames].mp3
Ok, I’m allowed to reference Kanye again because he’s dumped the Trump stuff. Plus, you can’t deny that it’s incredibly impressive he was able to record “Through the Wire” with his jaw wired shut. So, through the user wireflow map, I was able to create the wireframes for Pears to Pairs. These wireframes could be separated into two key user flows: onboarding and the game experience, with the latter having subcategories of making your choice, justifying said choice, listening to others’ justifications, and the conclusion of a round. Like all great designers, I originally started by quickly sketching on paper before translating them onto the screen — I just didn’t include them to save you some scrolling time. The digital wireframes were then converted into a clickable prototype in order to test certain aspects of gameplay.
“I got two versions. I got twooo versions.”
I was able to conduct small user testing sessions with groups of 3 to 4 players in order to determine whether the wireframes were intuitive. Refining the digital game mechanics will require additional testing as the clickable prototypes could not incorporate user inputs, randomize pop culture cards and political prompts, or tally player scores (using shake to praise or airhorn features.) My findings included:
- Players liked the second version of the view cards screen because the layout and animations made it feel more like a card game
- The game needed an animation or screen in between submitting card and going to justification or listening screen when waiting for everyone to submit their pairings
- The game might need a way to end the justification session sooner if someone doesn’t need the full 2 minutes
- The invite friends screen in creating a new game was a bit confusing because it was unclear who were just Facebook friends vs who were friends that played Pears to Pairs
Just tryna change the color on your mood [board]
I promise that was my last Kanye reference. After finalizing some details on the wireframes, I created a combined mood and audit board in order to draw some inspiration for the colors and style of Pears to Pairs’ UI. Many Facebook Messenger games tend to lean towards detailed skeuomorphism while Cards Against Humanity employs a minimalist approach that only uses black, white, and Helvetica — I wanted Pears to Pairs to meet somewhere in the middle while still appealing to its target user group: college students.
Thank u, next
The UX portion of this project was completed over the course of a week. Some next steps would be:
- Conduct further testing with the fully developed game to see whether people like choosing a winner at the end, having the designated judge choose (rotates each round,) or having the game decide by tallying points
- Determine if there is a need to have a way to end the justification session quicker if someone doesn’t need the full 2 minutes
- Explore rankings for players (perhaps in the form of A, B, C, D list celebrities)
- Regulate news headlines to ensure that no fake news is used in the game