Fishhook:
A Figma Dating Game
Team: Trini Rogando, Adam Golomb, Leo Sui, Annabelle Choi
Timeline: 3 weeks
Skills: Figma, team-developed experience design, sketching, wireframing, style guide creation, pixel-art drawing
Challenge: Design an experience on Figma that “dispenses dreams”.
Approach: Our team set out to create a humorous, entertaining game showcasing our understanding of Figma interactions and branching experience design. We headed each of the four paths separately, but unified common interactions and visual asset aesthetics (pixel-art). We implemented valuable feedback from two rounds of user/peer testing of our in-progress prototypes.
Play me!
Initial Ideation
Team-generated Figma brainstorms, and a few of my concept sketches:
After mutually deciding on our theme (there’s plenty of fish in the sea!) we set out to draw initial brainstorms of character and backgrounds. We decided on unifying our styles through pixel art. I headed the Clownfish pathway, then drew these assets (and more).
Wireframe and
Lo-Fi Prototype
To unify our planning, our team created a Lo-Fi wireframe detailing simple choice trees.
An example of one decision tree in our wireframe:
We then converted this into our first Lo-Fi prototype, using a few assets and entirely point-and-click interactions.
Background drawn by Leo Sui
Style Guide
Next, we created a Style Guide to unify inconsistencies (animation speed, color palette, visual style, pixel-art assets, dialogue colors) seen in our Lo-Fi prototype.
Final Figma Interactions
After user feedback suggesting that we diversify our point-and-click interactions, we created new combinations of timed changes, drag interactions, key presses, and cursor-lift transitions to make a dynamic and playful experience.
Final Project
In an in-class demo, we presented our final project to graduate reviewers from Stanford’s d.school and the teaching team. You can click to play it here!
“The navigation is very cohesive and easy to follow. The design is high quality and very consistent. […]
Your project has a very strong aesthetic that is cohesive throughout different characters, background scenes, and props. You also incorporate a sense of humor throughout all of your storylines. It is very engaging and makes the user want to learn more and keep playing! […]
You create a variety of compelling novel interactions that engage the user in different ways while also pushing the storyline forward. Great work!”
— Design 11 Teaching Team, Spring 2024 (Grade: 99/100)
What We Learned
Best practices for collaboration and communication
Constant communication was incredibly important. Our team would have frequent real-time check-ins (whether in-person or on zoom) to unify our ideas and decide on design aesthetics and changes to implement. We also co-worked together which helped us make progress!
Methods of planning and repeated ideation
Early planning was essential to avoid redundant work. Early on, we decided on our design aesthetic which guided the rest of our teamwork-based process. However, early phases of the process (sketching, wireframing) and testing smaller, bite-sized pieces of the project before building the final product allowed us to focus on successful choices and avoid larger mistakes later.
User feedback is at the center
We received valuable feedback about usability and clarity of interaction from our peer testers, such as the need for a small direction (“click to progress” / dialogue selection tutorial) to guide the user to an interaction. This feedback was incredibly helpful through the process of testing and refining!