We have become an increasingly global society. We have easy access to thoughts of people around the world, yet often we don't know our neighbors, the people in our town, or the people in that café we often visit. How can we bring back that sense of knowing your community, and the people around you?
Babble is a location-based social network that you can use to leave public messages at a location for others to find, share and comment on.
My Role
I was part of a 3 member team for this semester long project as part of the Advance Social Computing course. I was involved in all stages of the process including ideation, design of the concept, and high fidelity mockups. I also developed the working prototype of Babble. Although I had worked on a large scale web application before, I had never completely implemented a working system with session management from scratch. This project was a great learning opportunity.
Fall 2017, 12 weeks
UX Research
Interaction Design
Full-stack Development
Paul Suvansupa
Ruta Gokhale
Inspiration
Design
As a team, we were interested in connecting people around us. We were fascinated by the concept of Geocaching, where people hide a box of trinkets, and strangers can find them, replace one of the trinkets, and hide the box again for others to find. It does not matter that we don't know each other, except these things and the ritual of finding the cache bind us as a community.
However, Geocaching is not very popular, probably because it is inconvenient, and those who do try it loose interest after finding a few caches. We wanted to take the concept of Geocaching and combine it with the convenience of mobile apps. We imagined an online social network that would show posts around your location, and you could engage with your local community through your own posts and comments. We gave it the codename: Strange Encounters.
Scenario
Sam is at Mani's Osteria waiting for her friend to arrive. She starts Babble on her phone, and swipes through a myriad of posts shared by those who visited Mani's.
She sees someone's sketch, a few notes, many photos, and a couple of videos. Then she comes across a prompt that asks her to describe something interesting that she observed during her day. She starts describing the saxophone player she saw on the street, a few blocks away. Her thoughts are now part of Mani's, available for anyone at Mani's to read.
Persona and Survey
We started by creating 2 preliminary personas to help us create questions for a survey. We wanted to know under what circumstances was information discovered on social network considered worth their time, and what would make users comfortable to interact with strangers online.
We visualized our survey results, and found that a profile picture, real name, and mutual connections make people comfortable when interacting with strangers online, and information that seems important, interesting or relevant is considered worth their time. They also wanted the ability to like/upvote, share what they found, comment on posts, and save what they consider interesting. Since most of our respondents were in the age range of 18-25, we decided to focus on this age group for our primary persona.
Design Iterations
We then iterated on the design through sketches, wireframes, and high fidelity mockups. At every stage, we discussed details, but stopped each other when we were diverging from our vision. We are also grateful to our peers and instructor who gave us valuable feedback, when we presented our iterations every other week.
We used the metaphor of postcards, as the primary social object.
- Any given postcard can only discovered at a specific location
- Users can create a postcard with any type of media (ie. photos, videos, etc.) at a location
- Users can indirectly interact with each other via comments on the back of postcards
Features
Babble is a mobile application that:
- Gives location relevant feed
- Enables people to generate their own content
- Helps people at the same location to connect with each other through content
Prototype
We created a working prototype web-application based on Flask for back-end, PostgreSQL with PostGIS plugin for database, and VueJS for front-end. We used MapBox for the map functionality, and Now UI for Bootstrap 4 theming. For the demo, we deployed the application on Digital Ocean, using Nginx as reverse proxy.
Reflection
I initially used ReactJS for the front-end, and was able to create a working register-login workflow using React—Redux—React Router combination. However, I found it to be convoluted and very restrictive for prototyping. It did not play well with existing UI toolkits and JS libraries, and required the use of a bundling system like Webpack. By switching to VueJS, I was able to simplify the development process, the code was readbale and beginner friendly, and I was able to use Now UI kit for theming.
To build an ideal version of Babble, we would also consider what should be the lifetime of a postcard, how can we empower the community to moderate and flag posts, how can we help visitors discover the vibe of a place through feeds that help you discover a place, and should we allow users to visit a place virtually to explore postcards.