Global Vibe Check

Global Vibe Check is an award-winning UI/UX Design web application designed to empower users with easy access to global COVID-19 data in an informative and user-friendly way. Conceptualized during a Hack-A-Thon at the University of California - Irvine in early 2021, the project aimed to address the critical need for readily available and understandable COVID-19 information at a global scale.

Role

Role

UI/UX Designer

Event

Event

36-Hour Hack-A-Thon @ UC-Irvine

Tools

Tools

Figma

Awards

Awards

Best UI/UX Design

Inspiration

The initial app idea was a travel website that used the same globe for users to find their destination. We decided to combine this idea with COVID-19 API’s to better represent the time we’re living in and how realistic it is to travel around the globe. In addition to being a user friendly site to allow ease when it comes to the statistical side of the pandemic.

What our Website Offers

01

Interactive Globe Map

The centerpiece of the application, the interactive globe map allows users to explore COVID-19 data visually. This intuitive interface enables users to spin and zoom the globe for seamless navigation across different countries.

02

Color-Coded Severity Levels

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

03

Information Cards

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

04

Up-to-date Data

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

01

Interactive Globe Map

The centerpiece of the application, the interactive globe map allows users to explore COVID-19 data visually. This intuitive interface enables users to spin and zoom the globe for seamless navigation across different countries.

02

Color-Coded Severity Levels

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

03

Information Cards

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

04

Up-to-date Data

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

01

Interactive Globe Map

The centerpiece of the application, the interactive globe map allows users to explore COVID-19 data visually. This intuitive interface enables users to spin and zoom the globe for seamless navigation across different countries.

02

Color-Coded Severity Levels

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

03

Information Cards

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

04

Up-to-date Data

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

Design Process

User-Centered Inspiration

The initial concept stemmed from a travel website idea that utilized a globe for destination exploration. This concept was ingeniously adapted to address the urgent need for a COVID-19 data visualization tool, showcasing a keen ability to identify user needs and translate them into innovative solutions.

Sketching Design

The design journey for Global Vibe Check began with low-fidelity sketches that explored ideas and layouts for the landing page, interactive map, and information cards. These initial sketches established a strong foundation for the user experience (UX) flow.

Mid-Fidelity Mockup as Development Launchpad

The next step involved translating those initial sketches into mid-fidelity mockups. These more detailed mockups provided a clearer picture of the user interface (UI) elements and their functionalities. Having these mid-fidelity mockups served two key purposes:

  1. Solid Foundation for Development: The developers could leverage these mockups as a solid reference point to begin coding the website's core functionalities.

  2. User Testing and Feedback: The mid-fidelity mockups became valuable tools for user testing within my team. This user feedback played a critical role in refining the design for optimal usability.

Refined User Interface based on User Feedback

Following the initial mid-fidelity mockup that provided a solid foundation for development, we conducted user testing to gather valuable feedback. This feedback specifically focused on the home page layout, where the placement of the image alongside the informational text appeared unbalanced.

In response to user feedback, I refined the high-fidelity mockup by transitioning to a single information box on the home page. This streamlined approach ensures the user receives a clear and concise message about the website's purpose upon arrival.

Try it out

Try it out

Challenges we ran into

Challenges we ran into

The API we initially planned to use had some internal errors that we could not fix on our end, so we had to find new less popular API's to use in its place. Also, country names did not exactly match between the API’s that we used, so we had to make adjustments to get rid of any errors related to that.

The API we initially planned to use had some internal errors that we could not fix on our end, so we had to find new less popular API's to use in its place. Also, country names did not exactly match between the API’s that we used, so we had to make adjustments to get rid of any errors related to that.

Future Opportunities

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.

Personal Growth and Learnings

Personal Growth and Learnings

Time Management in a Hackathon Frenzy

Time Management in a Hackathon Frenzy

The 36-hour Hackathon pushed my time management skills. I juggled user-friendly design efficiency with building a strong development team. This fast-paced environment honed my ability to make swift, intentional design choices while collaborating effectively. It highlighted the importance of resourcefulness and adaptability in achieving goals under pressure.

Prioritizing User-Centered Design

Prioritizing User-Centered Design

To ensure the designs were user-centered and addressed our target audience's needs, I actively sought feedback from my teammates throughout the design process.

Expanding Problem-Solving Skillset

Expanding Problem-Solving Skillset

Identifying a user need (easy access to global COVID-19 data) and creating a successful design solution (Global Vibe Check) to address it.

Importance of Information Visualization

Importance of Information Visualization

Presenting complex data like COVID-19 statistics in a clear, concise, and easy-to-understand manner through the interactive globe map and information cards is essential to keep users informed and less confused.

Annahi Paez © 2023.

Annahi Paez © 2023.