G7: Digital Prototype
G7: Digital Prototype
Recap: the problem and target audience
The most “authentic” connections might come from when you’re anonymous. A lot of social media has a focus on who a person is, and not what they say. I wanted to create a platform where the focus is on what people say rather than who they are.
The target audience is for people seeking spontaneous, random connections online, but may be afraid of using traditional social media to meet new people because a lot of it is connected back to you as a person. On bottled notes, you don’t ever have to disclose your identity to anyone.
About the final prototype
From a design perspective
Some of the usability requirements I planned on were:
- Design doesn’t pressure the user into always being on it.
- Design has intuitive flow.
- Design has a gamified view and imagery to create a journaling-like, calming experience.
I tried to implement game-like graphics with a 3D animated island scene. I chose to use an island for this because of the metaphor of writing notes to put in bottles from an abandoned island. Hopefully, this will make users feel more understanding of a delayed interaction with people because of the random matching that needs to occur.
I also wanted to provide an intuitive experience for first-time users. I originally had the app set so that there were 2 options a user could click on: write a note or view notes. I changed that so that it starts on “write a note” to encourage people to answer the question. I also added a help modal for first-time users.
This is the screen a user is first presented with upon logging in.
A user can type their response to the question of the day.
A user can pick whether to keep their message public or private to strangers.
Then, they can send the bottle out to match with a stranger.
When they click “view notes,” they will get prompted with a screen to come back later to chat with a stranger and see how they answered the question.
A couple minutes to hours later, the user can see a stranger’s answer to the question and chat with them.
From a technical perspective
Details about implementation
This web app was created mostly with React and Firebase. The frontend is created completely with React and HTML/CSS. The animated background scene was created with Spline, a web-based 3D design tool. The backend database is created with Firebase’s Firestore database. Authentication/user accounts are managed with Firebase Authentication. The cloud functions run at scheduled times using Google Cloud’s Cloud Scheduler.
The Firestore database is structured so that every user has the fields alreadyMatched, answeredToday, isPrivate, todaysAnswer, todaysMatchId, and todaysRandom.
- alreadyMatched (boolean) sets whether the user has already been matched with a stranger, so that they don’t get matched again.
- answeredToday (boolean) sets whether a user has already answered the question of the day. This is used to see if a user should get matched with someone random.
- isPrivate (boolean) sets whether a user chose to make their note public or private to strangers. This is used to see if a user should get matched with someone random.
- todaysAnswer (string) stores the user’s answer to the question of the day.
- todaysMatchId (string) stores the matched user’s ID after a user gets matched with a stranger.
- todaysRandom (int) stores a random integer from 1-1000 that generates every day. This value is used to match pairs of people together.
One thing to note is that because I focused mainly on the features for this prototype, this app currently doesn’t have measures to filter out troll responses. Also, security-wise, this app is not secure due to how the userId is stored.
Issues during implementation
The hardest part of implementation was designing and implementing the random matching function. Currently, how it works is that every user is assigned a random integer from 1-1000 from a cloud function that runs at midnight every day. Then, all the users that answer the question within every 4 hours are pooled together, then matched based on users who have the most similar integers. Depending on the number of users, the number of hours to pool together users can be adjusted.
If I had more time to work on this project, I would make the app responsive so it’s possible to use on phone screens. I’d also implement the sticker book feature and the ability to view responses to past questions.