Project Details
Project Details
Nov 27 - Dec 1, 2024
Nov 27 - Dec 1, 2024
Group Hackathon Project: 2 Frontends, 3 Backends, 1 Designer
Group Hackathon Project: 2 Frontends, 3 Backends, 1 Designer
Role: UX/UI Designer
Role: UX/UI Designer
The design presented here is the full Figma prototype, not what was submitted as our team's submission for the Hackathon. The submitted project is accessible at the link above with our video pitch.
The design presented here is the full Figma prototype, not what was submitted as our team's submission for the Hackathon. The submitted project is accessible at the link above with our video pitch.
Problem
Problem
Most users of social media and streaming platforms utilize more than just one app. However, it is difficult for users to find the content they want to see because there is so much content dispersed across platforms, resulting in users wasting their time through doom scrolling across them.
Most users of social media and streaming platforms utilize more than just one app. However, it is difficult for users to find the content they want to see because there is so much content dispersed across platforms, resulting in users wasting their time through doom scrolling across them.
Solution
Solution
Media Dash
Media Dash
An AI-powered personalized media dashboard to consolidate your favorite content from multiple platforms into one space and deliver personalized recommendations to each user.
An AI-powered personalized media dashboard to consolidate your favorite content from multiple platforms into one space and deliver personalized recommendations to each user.
Won 3 awards!
Skibidi ai swag (yes, this was the name)
Headstarter AI/ML prize
This Project is Awesome (TPIA)
Won 3 awards!
Skibidi ai swag (yes, this was the name)
Headstarter AI/ML prize
This Project is Awesome (TPIA)
The Design Process
The Design Process
Information architecture
Information architecture
Our project lead had a clear vision for the project from the start. The core issue we were aiming to resolve was to decrease the time users wasted searching for content. This resulted in a dashboard-style home page with personalized recommendations. To make searching for content approachable, we placed the search bar at the top of the screen and in the navigation bar. Lastly, we agreed a My page in which users will access crucial personal information that would alter the user experience would be necessary.
Our project lead had a clear vision for the project from the start. The core issue we were aiming to resolve was to decrease the time users wasted searching for content. This resulted in a dashboard-style home page with personalized recommendations. To make searching for content approachable, we placed the search bar at the top of the screen and in the navigation bar. Lastly, we agreed a My page in which users will access crucial personal information that would alter the user experience would be necessary.
Low-fi iterations
Low-fi iterations
Mid-fis
Comments & revisions
Add comments to the personal rankings for users to record their true thoughts in a more detailed way outside of 5 stars
Considered other selection formats for selecting platforms the user uses during the onboarding process because it is not common, but stuck with a circular selection as X (formerly Twitter) utilizes the same selection format
Account creation & Sign in process completed through Clerk, an external system installed within the app - onboarding flow will go from the carousel, Clerk sign in, and choosing used platforms and favorite genres, which would lead to the home page upon completion
UI kit
The app was designed in dark mode because using a darker color as the background allows the content on the screen to stand out more to the users while using a brighter color may strain their eyes. Blue was then determined as our brand's color because it is a color that does not strain the user's eyes and is not used often in the media platforms we prospect to include.
Final Design
Onboarding flow
Search
My - User personal information
Log in/onboarding
Home dashboard, Search, Individual content screen
My pages (my platforms, ratings, and saved media)
Mid-fis
Comments & revisions
Add comments to the personal rankings for users to record their true thoughts in a more detailed way outside of 5 stars
Considered other selection formats for selecting platforms the user uses during the onboarding process because it is not common, but stuck with a circular selection as X (formerly Twitter) utilizes the same selection format
Account creation & Sign in process completed through Clerk, an external system installed within the app - onboarding flow will go from the carousel, Clerk sign in, and choosing used platforms and favorite genres, which would lead to the home page upon completion
UI kit
The app was designed in dark mode because using a darker color as the background allows the content on the screen to stand out more to the users while using a brighter color may strain their eyes. Blue was then determined as our brand's color because it is a color that does not strain the user's eyes and is not used often in the media platforms we prospect to include.
Final Design
Onboarding flow
Search
My - User personal information
Reflection
Joining the Brainrot Hackathon over Thanksgiving break was an impulsive decision yet a valuable experience. Not only was this my first hackathon, but it was also my first time working with frontend and backend developers from such diverse backgrounds so directly. Our team consisted of people at various education levels (university, new grad, graduate school, and high school) and time zones. Despite these differences, we were able to create something, which is what matters the most.
I learned it is necessary to know what elements to prioritize and what to drop when given such a short amount of time to create a project from scratch. The final submitted design did not exactly portray the Figma prototype I created due to coding challenges. If we had more time, I would conduct user interviews prior to identify specific issues users face while watching or choosing what media to watch and align the design to real user insights.
Reflection
Joining the Brainrot Hackathon over Thanksgiving break was an impulsive decision yet a valuable experience. Not only was this my first hackathon, but it was also my first time working with frontend and backend developers from such diverse backgrounds so directly. Our team consisted of people at various education levels (university, new grad, graduate school, and high school) and time zones. Despite these differences, we were able to create something, which is what matters the most.
I learned it is necessary to know what elements to prioritize and what to drop when given such a short amount of time to create a project from scratch. The final submitted design did not exactly portray the Figma prototype I created due to coding challenges. If we had more time, I would conduct user interviews prior to identify specific issues users face while watching or choosing what media to watch and align the design to real user insights.