Hot Takes (Hackathon)
At-a-glance
Upon completing the class "Intro to Digital Product Design", I plugged myself into a 2-week hackathon to test out my design skills. I also wanted to see myself function in a team environment with front & back-end developers.
My team was tasked with designing an app that could “wipe away quarantine boredom.”
After conducting user interviews and
extensive market research, we settled on
constructing a platform where users could
cough out their COVID-related stressors on their screens
by
Going into the project, I was aware of how everyone on our team was a tech newbie. We were all freshly introduced to coding and design over Intro to DPD. While we ended up greatly simplifying the features and design of the final product, this opportunity gave me great insights into how I could grow my own visual design skills, especially when it comes to being purposeful with color choices and spacing.
⏰ Duration: December 2020
💁 My Role: Sole Product Designer
⚒️ Design Tools: Figma
💻 Team: 2 Front-end Devs, 2 Back-end Devs, 1 Designer.
An outlet to vent, but minus the negativity
Ever heard of the “hot take” trend? The New York Times defines the idea of a “hot take” as a hastily assembled but perhaps heartfelt piece of incendiary opinionated content.
Here are some examples of what a hot take would look like:
While we have grown to be indolent and more prone to bursts of outrage due to COVID, there is no specific platform that encourages its users to wake their inner warriors and deliver one’s wildest thoughts without potentially offending someone. To solve this problem, our team decided to build a judgment-free war zone for users to speak their minds and be as radical as they desire.
User Persona
After interviewing 8 Twitter and TikTok users, we decided out that our target user group would be in their twenties to thirties, most likely carrying the ENTP MBTI type known as the debater personality.
Consider Matt, a rebellious college student who was once bullied out of Twitter for sharing his painfully blunt hot takes. He offends his friends on a daily basis without ever intending to. Matt would rather post his thoughts on an app solely designed for people who understand his out-of-the-box thinking rather than on Twitter or TikTok, where he feels unsafe after receiving numerous threats and attacks for being, well, himself.
Graphical visualization of status quo, user voice, and persona.
HMW boost peace and safety?
From my user research, I came up with the following takeaways:
Capping characters(Twitter enforces 280 characters max, while TikTok encourages a 60-second limit) is not a smart way to foster debate since it leaves room for misinterpretation and propaganda.
-> Increase character limit to 500 and encourage users to attach photos, videos, or data visualization snippets to back their hot takes with visuals.
TikTok is more of a passive space for viewers who don’t label themselves as “content creators.” The high barrier to entry discourages users from broadcasting their opinions. Also, celebrity users on Twitter and TikTok have an upper hand in acquiring better engagement rates.
-> Make everyone anonymous. Emphasize through design that all users are placed on equal standing and that all opinions deserve to be heard. Anonymity will also help with protecting user identity, keeping users out of potential dangers and threats.
👇 More findings & takeaways can be found in this infographic.
Organized pain points, insights, and solutions in a step-by-step format.
Constructing a successful homepage
Component mapping
Underneath is a list of key functionalities set in collaboration with my 4 developers. As the only designer on the team, I took initiative in conceptualizing our branding, copywriting, and interactions.
Due to the tight development schedule, we had to carve out all the unique features that made our app authentic. We ended up placing 1-2 buttons on each page and strictly restricted the number of possible interactions users could have with each screen.
Branding our app- buttons, colors, font, etc.
Moving into higher fidelity explorations, I experimented with colors, spacing, and font choices to further distinguish our app. Since we were lacking in distinctive features, I placed lots of focus on setting our app apart from its competitors by constructing a quirky, creative interface.
Development and Going Live
After going through a hefty prototyping phase, I held review sessions to determine what was technically feasible and handed my designs off to developers. This experience taught me the significance of design systems and how to better design reusable components.
Our developers built an Android app, and I am proud to announce that my team was awarded second place in the “Best idea” category.
