Every group has that one friend who can't seem to stop using emojis. Or the one that sounds like they're writing a formal essay when they text. The point is, people are different, and friend groups are diverse. Ribbon takes inspiration from Spotify's immensely popular "Spotify Wrapped" feature to help you and your friends discover who you are as a group by analyzing your Facebook Messenger chat history.

What it does

Ribbon analyzes your group's individual and collective texting styles in order to determine a series of qualities, both quantitative and qualitative, that paint a picture of your group's conversation style. It begins with a presentation of some statistics describing the volume and frequency of your group's conversations, to give you a big picture overview of your collective habits. Next, prepare to be called out -- while analyzing your chat history, Ribbon assigns each member of the chat a unique "role" that describes their "niche" in the group. You could be The Reacter, who always reacts to others' messages; The Photographer, who never fails to share their new favorite photo; or even... well, I can't spoil it all – you'll have to see for yourself.

How we built it

We built Ribbon using React for our frontend web app (what users see), Django for our backend API, and AWS for our cloud computing & hosting. In order to develop the project, we decomposed it into 3 smaller subproblems: getting the chat data, analyzing the chat data, and displaying the results of the analysis. Within these smaller subproblems, we further decomposed each into smaller and smaller units, which helped us isolate and solve surprisingly difficult computational problems. After splitting the project up into small manageable chunks, we adopted a "bottom up" approach, building up from small chunks to bigger components to eventually our finished product. The final piece of the puzzle was deploying it for real-world users to enjoy, which involved some clever (and at times exasperating) maneuvering in AWS S3.

Challenges we ran into

Throughout development of Ribbon, our main challenge was in figuring out how to retrieve the chat data. Our main challenge in doing so was the fact that we had 3 flawed solutions, and were forced to weigh the pros and cons of each knowing that none were perfect. One option was to spoof Facebook's authentication view so that the user could provide their Facebook login credentials, which would then be used to retrieve their chat's contents using an unofficial Facebook Messenger API. Although we liked the comparative UX advantages that it offered, we couldn't justify coming so close to writing a phishing-like website for it. Our second option was to create a Messenger bot which, when invited to a chat, harvested the data in that chat for analysis. The main issue with this approach was legality: we found that it was a violation of Facebook's terms of service, so rather than risk the penalties associated with that, we were forced to abandon the idea. The option we chose was to read in a JSON file containing the user's Messenger data. While this approach presented the most challenging UX to develop, it also offered important benefits for privacy, by keeping the user's data on-device.

Accomplishments that we're proud of

One very specific technical achievement we're proud of is the algorithm we developed to assign roles to chat members. We designed and implemented an algorithm that basically kept "picking off the biggest winner", assigning each member to the role that best fit them when it was the best fit possible, in order to ensure that each member got a role that "made sense".

Another accomplishment we're proud of is the overall quality of the UI & UX. Given our approach to retrieving chat data, we knew it would be a challenge to create a website that still offered a pleasant user experience, and we're proud of the work we put in to meet that challenge head-on. By simplifying the user's experience where possible and choosing colors and fonts that complemented each other well, we're proud of the aesthetic quality of the finished product.

What we learned

Through developing Ribbon, we learned to start small and build big. As mentioned above, decomposing the ultimate problem of creating the website into 3 fundamental subproblems, and further splitting those subproblems into even smaller problems was a huge part of our development process, and was instrumental in allowing us to develop the website. It was an important reinforcement of the idea not to bite off more than you can chew -- rather than design the entire website from the start, we "modularized" it to reduce the overall complexity of each part, and combined the parts back into a finished product when we felt that we understood them well.

What's next for Ribbon

Ribbon is ripe for expansion following HackUCI. One obvious improvement is expansion to more chat platforms, especially iMessage and Discord. Keeping this potential for expansion in mind, we designed Ribbon to be extensible and chat platform-agnostic, to allow for easy expansion to new frontiers. Another big source of untapped potential is natural language processing. Most of Ribbon's original analysis is simply based on combinatorial properties of the chat data, rather than its natural language content; integrating natural language processing techniques such as sentiment analysis and keyword extraction would allow for completely new methods of chat data analysis.

Share this project: