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.

Annahi Paez © 2023.

Annahi Paez © 2023.

Annahi Paez © 2023.