Try out our app HERE


Whenever the Hopper Hangout team wanted to meet, we found the process of creating a hangout plan tedious. There were too many factors to consider: the itinerary had to suit everyone’s interest and the destinations needed to be accessible. On top of that, there were also too many hangout types and locations to choose from. It was often difficult to settle down on an option that everyone could agree on. Time was wasted making hangout plans that ultimately never came to fruition.

What it does

Cue Hopper Hangout, an app that lets you create hangout plans as quickly as a bunny! Users of the app can rank their interests with a slider from “Hate it” to “Love it” and create hangout plans (or “hops”) immediately. Features such as the friend group profiles allow users to receive personalized hop recommendations for a specific group of friends and view past hops. With Hopper Hangout, we can all eliminate the time wasted deciding on an itinerary and ensure everyone’s interests are considered when making plans.

How we built it

Behind the scenes, we put a lot of effort into creating a meaningful product that has a place in today’s app market. First, we brainstormed several ideas, narrowing it down to a handful we thought were most important. We considered creating an app to teach young children how to take care of themselves, a to-do list that gamifies tasks, and finally, a planner to manage and create hangout plans. After careful deliberation and personal anecdotes, we chose Hopper Hangout. Once we finalized our idea, we began working on brainstorming features and pages. To connect our ideas and to map out the app, we used a state diagram, which ended up being crucial in communicating our ideas. Past the ideation step, we were able to process and create mockups from low to high fidelity. Finally, we finished a complete working prototype.

Challenges we ran into

We experienced a few hardware and software challenges throughout the development of Hopper Hangout. One of our graphic designers lost her stylus and thus had to draw all her graphics with her finger. One of our UX designers spent considerable effort to use the simple tools in Figma's FigJam to create a clear and concise state diagram.

Accomplishments that we're proud of

  • Custom graphics — we spent a lot of time curating user avatars and other graphic elements to match the theme of Alice in Wonderland!
  • Using the complete design process to create our project

What we learned

  • How to use Figma
  • How to make more efficient and effective prototypes on Figma
  • How to create state diagrams to communicate the flow of our project more clearly
  • Factors to consider when creating graphics for a mobile app

What's next for Hopper Hangout

  • Hopper Hangout plans to incorporate AI to provide users with written reviews (from sources like Google Reviews, Yelp, etc.) on certain locations and determine whether the reviews are legitimate and give any insight into the experience
  • We also hope to offer more user avatar options and friend group profile options. This can be done through collaborations with brands that have existing characters or universes we can use as inspiration for the avatars

Built With

Hopper Hangout was made from the ground up with Figma. We used its suite of features, including FigJams, local styles, and components to create a fully-functioning prototype fit for demonstration and future development.

Built With

  • figma
+ 4 more
Share this project: