Fantastic Fours:
A lightweight, homebrew prototyping exercise for mobile wireframing

Published 05/07/18 by Josh Kim, Project Manager and UX Designer

The “Fantastic Fours” Exercise was a little bit of a creative accident to address the needs of this project. It was originally planned as a Crazy Eights exercise, but due to human resource, time and other restrictions I made a more casual and mobile version for the UX’er on the go. Obviously this exercise was specifically tailored for the needs of my project, but it may be useful for anyone else who finds themselves in a similar situation.

Who is this for?

This is perfect for small teams (3-5) that may not have access to a UX war room or need to quickly create a design solution for a heavier lift on a mobile screen. As long as there is one UX facilitator, design experience is not necessary for the other team members making it approachable and accessible for everyone.


What you'll need

1. Set Up the Activity

Before the activity, simply trace outlines of a mobile phone you are designing for onto the sketchpad to create a presentation board. Once you have gathered the materials, find willing participants from a variety of roles on your project. Ideally one visual designer, one functional/business analyst, one developer, and one UX designer can create the perfect synergy necessary. Gather everyone to a conversation-friendly location that has a table; I chose to do this at De Clieu to provide a contextual atmosphere for my team.

2. Explain the Rules

Start the session off by explaining the rules of the game. Each participant will be given 4 wide sticky notes and 5 minutes to create rapid designs using markers/pens of possible design solutions to a problem. Before the timer begins, explain and emphasize to the team to relax and focus on just getting ideas onto a page rather than creating one perfect solution. It is good to also note that no one is going to be judged for their artistic abilities, and that the focus of the first round of drawings is for extracting ideas- not architecture or design. Be sure that the entire team is familiar with the primary persona this solution will be catered to; I would recommend having a laptop open or poster of this persona available in plain sight throughout the session to encourage designing from the persona’s POV rather than the individual.

3. First Round of Fantastic Fours

The first iteration to create a menu for the Perfect Brew. Each team member came up with very different kinds of designs with their own unique quirks. Ideas we pulled from the first round included: progressive disclosure, featured images, and a filter/search.

After the first session’s time runs up, use the sketchpad as a presentation board for each member to explain their favorite ideas. It is critical to make it clear during this part of the exercise that no technical, design, or any other possible restrictions are to be considered at this time. This is an opportunity to look for and synergize ideas, not Titanic iceberg roleplay. After each participant presents her or his sketches, encourage the group to look for and verbalize the unique strengths of each design; there is always a purpose behind an idea.

4. Second Round of Fantastic Fours

Our second round of sketches began evolving based off of the identified strengths from the round prior. This gave the team a chance to begin forming functional and architectural relationships.

Similar to the cheesy name of the exercise, it’s time to capitalize on the unique strengths of the superpowers (sketches) of the team and conduct a second round of Fantastic Fours. Encourage the group to leverage the ideas of the other team members to create new sketches and concepts. I timed the second session at seven minutes to give team members a little more time to brainstorm. At the end of the second round of sketching, have the team present their ideas once again using the sketchpad as a presentation board.

5. Talk It Out

final design

From left to right: the team collaborated together as a group to come up with a "final" decision that was drafted into a mid-fidelity wireframe.

By the end of the second round of discussions there will be some clear design patterns emerging from the combined strengths of everyone’s ideas. The facilitator can now open up the floor to discussion. Let the team sand off any confusions and focus on promoting a positive and constructive conversation. If a discussion falls off track, pause the session and point back to the persona this solution is being designed for. Any immediate restrictions that can be identified by the team can be addressed here and resolved as a group through new alternative design solutions as long as they are answering the same goals that prompted the original idea. As a team, pull together the components to collaboratively come up with a quasi-final design decision. The UX designer can then take this to create mid-fidelity wires!