peaches&cream

• 

  Mobile mockup showing questions with increasing levels of "depth"

• 

  Desktop mockup

Inspiration

I have a hard time opening up to people. As much as I want to talk about my problems with my friends, something about showing vulnerability just really scares me, but I think deep down everybody wants to feel heard and valued. The times I've felt most comfortable sharing my thoughts with people are almost always when they share their's first, and I really believe there's something about reciprocity that makes the vulnerability much more approachable.

What it does

Peach&Cream generates increasingly intimate questions to help guide people through meaningful conversations. This increase is determined in two ways: the number of questions answered, and the amount of time spent talking. Our initial goal was to build a tool that would help two people fall in love, almost like a modern version of Arthur Aron's 36 Questions. However, after trying it out ourselves, we quickly realized that Peach&Cream can be used for so much more than just romantic connection. Whether it's strangers meeting for the first time or old friends catching up, insightful questions help foster bonds that simply cannot be replicated any other way.

How we built it

Everything was built using HTML, CSS, and Javascript. We first researched questions and sorted them into arrays, with each array increasing in "depth" and "meaning". We then built a timer to account for the amount of time elapsed, using that information to output questions ensuring the conversation would progress at a reasonable pace, while still giving the users ample time to comfortably ease into deeper topics.

Finally, we wireframed some layouts for the UI on Figma and used CSS grid to make the site responsive.

Challenges we ran into

Since both of us have never really built anything before, everything was quite a bit of a challenge. Particularly, we wanted to implement animations into the transition between questions. However, the animations would only happen when we reloaded the page, and not when we were changing the questions with javascript. We ended up figuring out a workaround using DOM manipulation to change the class tag on the "question" element every time the "next" button was clicked.

Another huge challenge for us was learning how to use github. We felt like it was important to learn, but we ended up spending 4+ hours trying to get everything set up and understanding all the git commands.

Accomplishments that we're proud of

We're both incredibly happy with what we were able to make this weekend. To be completely honest, we weren't expecting to actually build much of anything at all, since neither of us has actually coded anything on our own before. I'm excited to actually use this tool with my friends, and knowing I can just go in and tweak everything to my own liking just feels so powerful.

What we learned

• Wireframing
• CSS Grid
• CSS Transitions
• Responsive web design
• Importing fonts from Google
• Git commands
• DOM Manipulation
• About each other

What's next for peaches&cream

• Although this initial version of peaches&cream is aimed towards romantic interactions, the same concept can be used for normal conversations as long as we tweak a few of the questions. Our next steps are to add a screen where you can choose different scenarios to tune the questions to your needs.
• Elements aren't behaving the same way on FireFox and Chrome, so we definitely need to fix that.
• Our question bank can use some more variety and volume, there's a lot of room to be more quantitative with the types of questions we have.

Built With

• css
• html
• javascript