Screen Shot 2021-08-09 at 9.59.32 AM.png

Fondue Webapp

FRONTEND DESIGN + DEVELOPMENT

The 2020 quarantine revealed the need for long-distance relationship connection. A team of 3 developers and I made Fondue to solve that.

APRIL 2020 - NOVEMBER 2020

Screen Shot 2020-06-03 at 7.07.52 PM.png
 

Context

A friend came to me with an idea to create a platform for memorable virtual dates.

We thought: because of the pandemic, young adults have been stuck at home and eager for deeper connections online.

 
 
Screen Shot 2020-08-15 at 5.21.42 PM.png
 
 

We also saw a need for fun ways to have dates online,

not just match-make.

 
Screen Shot 2020-05-30 at 3.57.28 PM.png
 

Check out the Fondue web app here!

 

Brainstorm + Design

We spent time collecting inspiration and working out ideas on Figma.

 
 

After many long nights of calling and designing, we landed on a set of graphics, colors, and user flows for our web app game + landing page.

 
The main screen of the Fondue landing page.

The main screen of the Fondue landing page.

Round 3 of the Fondue game.

Round 3 of the Fondue game.

Use cases of Fondue on the landing page.

Use cases of Fondue on the landing page.

Promo for Fondue convos on the landing page.

Promo for Fondue convos on the landing page.

 
User flow from landing page —> create game —> game view.

User flow from landing page —> create game —> game view.

 

Building the code

Coding with a React frontend, Tailwind CSS, and Node + Firebase backend, we split the tasks on Trello and built the app.

 
Our Fondue Trello board.

Our Fondue Trello board.

Code for the mission statement landing page screen.

Code for the mission statement landing page screen.

Round 5 of the Fondue game, in feedback mode.

Round 5 of the Fondue game, in feedback mode.

Code for the Fondue end page, post-game.

Code for the Fondue end page, post-game.

Rendering of our mission statement screen on the Fondue landing page.

Rendering of our mission statement screen on the Fondue landing page.

Round 2 of the Fondue game, including timed cards to incite meaningful conversations.

Round 2 of the Fondue game, including timed cards to incite meaningful conversations.

 

Marketing + User Conversations

We posted in student meme Facebook groups and began segmenting through user conversations + interviews.

 
A mockup of what our Fondue Facebook post looked like.

A mockup of what our Fondue Facebook post looked like.

Some interesting comment threads in our Fondue post on Facebook.

Some interesting comment threads in our Fondue post on Facebook.

 

Iterating and Improving

And we’re still adding new features:

Fondue Date Map, end page survey, custom notes, etc…

 
Fondue Date Map: a collection of memorable virtual experiences for two.

Fondue Date Map: a collection of memorable virtual experiences for two.

A survey at the end of the Fondue game to learn more about the user.

A survey at the end of the Fondue game to learn more about the user.

The many different date options in the Fondue Date Map.

The many different date options in the Fondue Date Map.

A custom note-writing feature to make the Fondue experience a bit more memorable.

A custom note-writing feature to make the Fondue experience a bit more memorable.

 

Stay Tuned

Check out Fondue and stay tuned with updates!

 
Final Fondue game design.

Final Fondue game design.