r/politics Dashboard
A comprehensive dashboard of Reddit politics
Project Overview
Challenge
Create a project that aims to increase the political awareness and engagement of citizens and communities.
Problem Statement
As access to news become increasingly dependent on algorithms designed to hold our attention, consumers become enthralled in "epistemic bubbles" or "pipelines," where users will only come across information that is given to them.
The division between those on both sides on the political compass is growing each day, and people are unaware about how much their or others' ideologies are being spoken about.
Project Scope
Software program, Website
Tools
Figma
Role
UX Designer (Visual Design)
Team
5 members
Objectives
-
Design a webpage that is user-friendly and with a simple design
-
Convey necessary information to inform the user about different political views
Duration
2 days (36 hours)
Design Process
1. Data Collection
Research and figure out what types of data would be provided on the dashboard
2. Wireframe
Create several wireframes and styles to convey the information effectively
3. Design
Finalize the design and implement the front-end aspect on a website
Data Collection
Method
We decided to scrape through data on different Reddit boards. Subsequently, we employed a machine learning model from the OpenAI API to assess the degree of association between posts and political parties, as well as to determine the overall sentiment expressed.
Once the data was collected through the scraper, we conducted thorough analysis to extract different data points that we wanted to display on the dashboard. This process involved identifying key metrics and insights that would provide valuable information to users, allowing them to gain a comprehensive understanding of the trends and dynamics within the Reddit communities being studied.
Wireframe
Sketches
After finalizing the selection of data to be shown on the dashboard, I started on sketching out various dashboard ideas. This process enabled me to iteratively refine and adjust the design before reaching a finalized version. Sketching allowed for flexibility and creativity, ensuring that the dashboard effectively communicated the desired information while remaining visually appealing and user-friendly.
​
Opting for a bento box design was a strategic choice, driven by our goal of creating a user-friendly and visually engaging dashboard. With only a few key data points to showcase, the bento design proved to be the most effective solution. Its compartmentalized layout allows for clear organization of information, ensuring that users can easily digest and interpret the data. Additionally, the simplicity of the design enhances user experience, making it intuitive to navigate and understand at a glance. Overall, the bento box design aligns perfectly with our objective of delivering a functional and visually appealing dashboard.
Mid-Fidelity Wireframes
Once the initial dashboard ideas were sketched out, the next step was to transition to mid-fidelity wireframes. These wireframes provide a more refined representation of how the data will be presented, offering a clearer picture of the layout and visual elements. By moving to mid-fidelity wireframes, we aimed to further iterate on the design, incorporating feedback and making adjustments to enhance usability and aesthetics.
Design
Style Guide
Opting for a darker color scheme, we strategically employed various shades of grays, blues, and purples to craft a modern and simplistic dashboard. Additionally, the cohesive use of complementary colors ensures a harmonious and visually pleasing composition, contributing to an overall polished and professional appearance.
For the font, we sought to enhance simplicity by selecting a clean, readable typeface. This decision not only aligns with our goal of achieving a sleek design but also ensures optimal legibility for users interacting with the dashboard. By prioritizing readability and simplicity in our font choice, we further enhance the user experience and maintain focus on the data and visual elements presented on the dashboard.
High-Fidelity Wireframes
After finalizing the color palette and font selection, the next step was to create the high-fidelity wireframe. This crucial stage in the design process enabled us to refine the layout and visual elements, resulting in a polished appearance for the dashboard. By incorporating the chosen color scheme and font, it ensured consistency and cohesion throughout the design. The high-fidelity wireframe provided a detailed blueprint for the final implementation, capturing the essence of the dashboard's aesthetic while also facilitating seamless navigation and interaction for users.
Product Implementation
Front-end development by Jimmy M.
Final Notes + Read More
Final Notes
This project was developed for JumboHack 2024, where 19 teams and over 100 individuals participated in. I was fortunate to collaborate with an amazing team of individuals. Despite never having met each other prior to the event, we quickly formed a cohesive unit and leveraged our diverse skills and perspectives to bring the project to life. Under our management, we organized into three distinct groups: the Data Scraping, Machine Learning, and Design Teams.
​
Over the course of 36 intense hours, we worked tirelessly to create a responsive and functional website. Despite facing time and financial constraints, we made significant progress, although we were unable to fully implement all aspects of the data and design elements as planned. However, given more time, we are confident that we could further develop our website to its full potential.
​
Achievements: Runner-up in the Political Awareness and Racial Advocacy Track
Read More
Feel free to scroll through our Devpost or Google Slides presentation, which includes the explanation of the processes and the various parts we developed, in order to create this project. If you want to learn more about the event itself, check out the JumboHack link and the link to my certificate of participation.