Global Vibe Check — Award-Winning Design for Simplifying Global COVID-19 Data
At a glance
Role: Led UI/UX design as the sole designer in a team of 4 during a 36-hour Hackathon.
Core Feature: Designed an interactive globe map for intuitive COVID-19 data exploration.
Impact Visualization: Used color-coded markers to display severity levels and ease comparisons.
Clean Interface: Developed info cards with quick links for detailed stats, balancing clarity and depth.
Award-Winning Project: Won Best UI/UX Design Award for delivering a visually engaging platform that simplified complex data visualization
At a glance
Role: Led UI/UX design as the sole designer in a team of 4 during a 36-hour Hackathon.
Core Feature: Designed an interactive globe map for intuitive COVID-19 data exploration.
Impact Visualization: Used color-coded markers to display severity levels and ease comparisons.
Clean Interface: Developed info cards with quick links for detailed stats, balancing clarity and depth.
Award-Winning Project: Won Best UI/UX Design Award for delivering a visually engaging platform that simplified complex data visualization
Role
Role
Sole UI/UX Designer
Tools
Tools
Figma
Design Team size
Design Team size
4
Project Duration
Project Duration
36-Hour Hack-A-Thon @ UC-Irvine
Project Overview
Project Overview
Project Overview
Global Vibe Check is an award-winning web application developed during a 36-hour Hack-A-Thon at UC-Irvine in early 2021. The project aimed to simplify the presentation of complex COVID-19 data through an intuitive, visually appealing interface. By leveraging interactive design elements, Global Vibe Check provided a clear, user-friendly experience for tracking the pandemic’s impact across different countries. The project won the Best UI/UX Design Award for its innovative approach to visualizing global data, combining ease of use with powerful insights.
Global Vibe Check is an award-winning web application developed during a 36-hour Hack-A-Thon at UC-Irvine in early 2021. The project aimed to simplify the presentation of complex COVID-19 data through an intuitive, visually appealing interface. By leveraging interactive design elements, Global Vibe Check provided a clear, user-friendly experience for tracking the pandemic’s impact across different countries. The project won the Best UI/UX Design Award for its innovative approach to visualizing global data, combining ease of use with powerful insights.
The Problem: Making Complex COVID-19 Data Understandable and Accessible
The Problem: Making Complex COVID-19 Data Understandable and Accessible
The Problem: Making Complex COVID-19 Data Understandable and Accessible
When the COVID-19 pandemic began, the surge of information was often overwhelming and difficult to interpret. Many platforms presented COVID-19 statistics in formats that were too complex for users who needed quick and clear insights. Our challenge was to present this vast amount of data in a manner that was both informative and engaging, allowing users to easily understand the severity of the pandemic in different regions.
When the COVID-19 pandemic began, the surge of information was often overwhelming and difficult to interpret. Many platforms presented COVID-19 statistics in formats that were too complex for users who needed quick and clear insights. Our challenge was to present this vast amount of data in a manner that was both informative and engaging, allowing users to easily understand the severity of the pandemic in different regions.
Why We Chose This Problem
Why We Chose This Problem
Why We Chose This Problem
Reliable, real-time information was crucial during the pandemic. Many users felt overwhelmed by the raw numbers and charts presented daily. Our goal was to deliver a product that not only provided comprehensive data but also excelled in visual design and usability. As the sole designer, I led the visual layout and interactive elements, while the team contributed to brainstorming ideas and making key decisions collectively.
Reliable, real-time information was crucial during the pandemic. Many users felt overwhelmed by the raw numbers and charts presented daily. Our goal was to deliver a product that not only provided comprehensive data but also excelled in visual design and usability. As the sole designer, I led the visual layout and interactive elements, while the team contributed to brainstorming ideas and making key decisions collectively.
Key Design Features and Rationale
Key Design Features and Rationale
Key Design Features and Rationale
Interactive Globe Map
The interactive globe map served as the primary feature, providing users with an engaging, intuitive way to explore COVID-19 data across different countries. Unlike traditional charts and tables, the globe offered a more dynamic experience, reducing cognitive load and making it easier for users to see global trends and navigate to regions of interest.
The interactive globe map served as the primary feature, providing users with an engaging, intuitive way to explore COVID-19 data across different countries. Unlike traditional charts and tables, the globe offered a more dynamic experience, reducing cognitive load and making it easier for users to see global trends and navigate to regions of interest.
Rationale: The globe format allowed users to explore data spatially, providing a visual overview of trends across continents. This approach made interpreting the global impact more intuitive and less overwhelming.
Impact: The interactive globe encouraged users to engage with the data, resulting in positive feedback for its ease of use and visual appeal.
Rationale: The globe format allowed users to explore data spatially, providing a visual overview of trends across continents. This approach made interpreting the global impact more intuitive and less overwhelming.
Impact: The interactive globe encouraged users to engage with the data, resulting in positive feedback for its ease of use and visual appeal.
Color-Coded Severity Markers
Color-coded markers visually represented the severity of COVID-19 in different countries, making it easy for users to understand the pandemic’s impact at a glance.
Color-coded markers visually represented the severity of COVID-19 in different countries, making it easy for users to understand the pandemic’s impact at a glance.
Rationale: Using a color gradient to show severity levels helped users quickly interpret risk levels without reading complex statistics. This method leveraged a visual cue that is universally understood.
Impact: The consistent use of colors reduced cognitive load, simplified regional comparisons, and allowed users to identify high-risk areas at a glance.
Rationale: Using a color gradient to show severity levels helped users quickly interpret risk levels without reading complex statistics. This method leveraged a visual cue that is universally understood.
Impact: The consistent use of colors reduced cognitive load, simplified regional comparisons, and allowed users to identify high-risk areas at a glance.
Information Cards with Quick Links
Information cards appeared when a user clicked on a country, displaying detailed statistics like cases, deaths, and recoveries, along with quick links to relevant resources
Information cards appeared when a user clicked on a country, displaying detailed statistics like cases, deaths, and recoveries, along with quick links to relevant resources
Rationale: Providing detailed information only when requested prevented the main view from becoming cluttered, while quick links offered direct access to authoritative resources for more detailed information.
Impact: This approach maintained a minimalist design, improved the user experience by offering contextual information, and enhanced credibility through verified external links.
Rationale: Providing detailed information only when requested prevented the main view from becoming cluttered, while quick links offered direct access to authoritative resources for more detailed information.
Impact: This approach maintained a minimalist design, improved the user experience by offering contextual information, and enhanced credibility through verified external links.
Design Process: From Initial Sketches to Final Prototype
Design Process: From Initial Sketches to Final Prototype
Design Process: From Initial Sketches to Final Prototype
Ideation and Team Collaboration
I brainstormed and sketched different layouts, opting for a minimalist design approach that emphasized interactivity. I translated these concepts into initial sketches that laid the foundation for the design.
I brainstormed and sketched different layouts, opting for a minimalist design approach that emphasized interactivity. I translated these concepts into initial sketches that laid the foundation for the design.
Wireframes and Prototyping
I created low-fidelity wireframes to establish core user flows, followed by high-fidelity prototypes in Figma. I incorporated team feedback to refine the design and interactions.
I created low-fidelity wireframes to establish core user flows, followed by high-fidelity prototypes in Figma. I incorporated team feedback to refine the design and interactions.
High-Fidelity Prototypes and Iteration
I developed high-fidelity prototypes, focusing on smooth animations and a cohesive user experience. These prototypes were shared with the team for final feedback and adjustments.
I developed high-fidelity prototypes, focusing on smooth animations and a cohesive user experience. These prototypes were shared with the team for final feedback and adjustments.
Challenges and Adaptations
Challenges and Adaptations
Challenges and Adaptations
Designing for Data Complexity
Displaying complex data like COVID-19 statistics can easily overwhelm users, especially when each country has varying levels of information detail. The challenge was to create a design that could accommodate different data points without becoming visually cluttered or confusing.
Displaying complex data like COVID-19 statistics can easily overwhelm users, especially when each country has varying levels of information detail. The challenge was to create a design that could accommodate different data points without becoming visually cluttered or confusing.
Adaptation: I designed flexible layouts that could scale based on the amount of information available for each country. By using expandable information cards and consistent visual hierarchies, I ensured that each country’s data was presented clearly, whether it had minimal or extensive details. This approach prevented information overload while maintaining clarity and usability.
Adaptation: I designed flexible layouts that could scale based on the amount of information available for each country. By using expandable information cards and consistent visual hierarchies, I ensured that each country’s data was presented clearly, whether it had minimal or extensive details. This approach prevented information overload while maintaining clarity and usability.
Time Constraints
The 36-hour timeframe required us to make rapid design decisions without compromising quality. This meant prioritizing the core experience while ensuring that the visual design remained impactful and cohesive.
The 36-hour timeframe required us to make rapid design decisions without compromising quality. This meant prioritizing the core experience while ensuring that the visual design remained impactful and cohesive.
Adaptation: I focused on key features like the interactive globe and severity markers, iterating quickly and gathering feedback from teammates to refine the design in real-time. This allowed us to deliver a polished product within a limited timeframe, while still incorporating crucial feedback
Adaptation: I focused on key features like the interactive globe and severity markers, iterating quickly and gathering feedback from teammates to refine the design in real-time. This allowed us to deliver a polished product within a limited timeframe, while still incorporating crucial feedback
Results and Impact
Results and Impact
Results and Impact
Global Vibe Check successfully addressed the problem of presenting complex COVID-19 data in an accessible and visually engaging format. The interactive design and usability features were praised by both judges and users, leading to our project being awarded Best UI/UX Design at the UC-Irvine Hack-A-Thon
Global Vibe Check successfully addressed the problem of presenting complex COVID-19 data in an accessible and visually engaging format. The interactive design and usability features were praised by both judges and users, leading to our project being awarded Best UI/UX Design at the UC-Irvine Hack-A-Thon
Impact Highlights
Impact Highlights
Simplified how users interact with global COVID-19 data, making it easy to explore different regions and understand severity levels.
Successfully combined visual design with data accessibility, creating a platform that excelled in both usability and aesthetics.
Personal Growth and Learnings
Personal Growth and Learnings
Working on this project allowed me to enhance and sharpen my skill set in various areas:
Leading the Design Process
As the sole designer, I led the design from concept to final prototype while integrating team feedback throughout the project.
Designing Under Pressure
I developed the ability to make rapid design decisions and prioritize critical features within a limited timeframe.
Visualizing Complex Information
I enhanced my skills in using color, animation, and interactivity to present complex data in a user-friendly format.
Personal Growth and Learnings
Working on this project presented several growth opportunities for me:
Team Leadership
Leading a team of eight designers for the first time taught me the value of creating an inclusive environment and encouraging open communication. This experience strengthened my ability to foster a collaborative and supportive team culture.
Adapting to Change
I learned how to effectively manage task redistribution and maintain project momentum, even when facing fluctuating team sizes and shifting requirements.
Expanding Skillset
The project allowed me to refine my problem-solving abilities by balancing technical considerations and user experience in every design decision.
Importance of Setting Boundaries
Establishing clear boundaries and managing client expectations helped me prevent scope creep and maintain focus, a lesson I’ve carried forward to subsequent projects.
Mentorship and Personal Fulfillment
Supporting designers who were new to Figma through workshops and hands-on guidance was one of the most rewarding aspects of the project. Observing the team’s growth and development reaffirmed my belief that mentorship is about nurturing confidence, building skills, and creating a safe environment where everyone can learn and contribute meaningfully.
Reflection and Future Opportunities
Reflection and Future Opportunities
Reflection and Future Opportunities
Keep the website up to date. The current state of the website is not updated to show accurate data for individuals to use. We hope to have the photos included in the information cards be more representative of the respective city [Either improve fetch calls or use another API], make the web-app responsive in addition to mobile-view, create a more consistent vibe in design throughout each page and extend the information provided about each country’s COVID statistics.
Keep the website up to date. The current state of the website is not updated to show accurate data for individuals to use. We hope to have the photos included in the information cards be more representative of the respective city [Either improve fetch calls or use another API], make the web-app responsive in addition to mobile-view, create a more consistent vibe in design throughout each page and extend the information provided about each country’s COVID statistics.