Visitor Tracker .button-1-4 { --text-style: "button 1-4"; font-size: 1.15rem; /* Slightly adjusted for the 2-line layout */ font-weight: 600; /* Made semi-bold to match the screenshot */ font-family: "Walter Neue Variable", -apple-system, sans-serif; font-style: normal; line-height: 1.3; /* Comfortable spacing for stacked text */ letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: rgb(255, 255, 255); background: #0079ff; /* Perfect vibrant blue match */ display: inline-block; border-radius: 1.1rem; /* Increased for those smooth, rounded corners */ padding: 1.0rem 2.0rem; /* Fixed padding to give the button its size */ text-align: left; /* Left-aligned text like the image */ min-width: 13rem; /* Ensures the button is wide enough */ } /* Ensure the link inside takes up the whole button area and stays white */ .button-1-4 a { color: #ffffff !important; text-decoration: none !important; display: block; } /* Smooth hover state */ .button-1-4:hover { background: #0066d6; /* Subtle dark blue shift on hover */ cursor: pointer; } .button-1-4 a.active { color: #ffffff !important; text-decoration: none !important; } .button-1-9 { --text-style: "Tomorrowland button "; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: rgb(255, 255, 255); background: #2971b2; display: inline-block; border-width: 0.0rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; border-style: solid; border-color: rgba(188, 59, 59, 0); } .mobile .button-1-9 { font-size: 0.50rem; } .button-1-9 a { color: #ffffff; text-decoration: none; } .button-1-9 a:hover { font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; font-variation-settings: 'slnt' 0; } .button-1-9 a.active { color: #ffffff; text-decoration: none; } .button-10 a.active { color: #ffffff; text-decoration: none; } .button-11 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-12 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-13 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-14 a.active { color: #ffffff; text-decoration: none; } .button-15 a.active { color: #ffffff; text-decoration: none; } .button-1-10 { --text-style: "button 1-10"; font-size: 1.20rem; font-weight: 400; font-family: "IBM Plex Sans"; font-style: normal; line-height: 0.5; letter-spacing: 0; color: rgb(255, 255, 255); background: #027aff; display: inline-block; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 0.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; } .mobile .button-1-10 { font-size: 0.5rem; } .button-1-10 a { color: #ffffff; text-decoration: none; } .button-1-10 a:hover { } .button-1-10 a.active { color: #ffffff; text-decoration: none; } .button-10 a.active { color: #ffffff; text-decoration: none; } .button-11 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-12 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-13 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-14 a.active { color: #ffffff; text-decoration: none; } .button-15 a.active { color: #ffffff; text-decoration: none; } .button-1-11 { --text-style: "button 1-11"; font-size: 0.50rem; font-weight: 400; font-family: "Optician Sans"; font-style: normal; line-height: 1.35; letter-spacing: 0.059em; color: rgb(255, 255, 255); background: #027aff; display: inline-block; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 0.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; } .mobile .button-1-11 { font-size: 15.00rem; } .button-1-11 a { color: #ffffff; text-decoration: none; } .button-1-11 a:hover { } .button-1-11 a.active { color: #ffffff; text-decoration: none; } .button-10 a.active { color: #ffffff; text-decoration: none; } .button-11 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-12 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-13 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-14 a.active { color: #ffffff; text-decoration: none; } .button-15 a.active { color: #ffffff; text-decoration: none; } .button-1-12 { --text-style: "button 1-12"; font-size: 0.9rem; font-weight: 400; font-family: "Optician Sans"; font-style: normal; line-height: 1.35; letter-spacing: 0.059em; color: rgb(255, 255, 255); background: #027aff; display: inline-block; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 0.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; } .mobile .button-1-12 { font-size: 15.00rem; } .button-1-12 a { color: #ffffff; text-decoration: none; } .button-1-12 a:hover { } .button-1-12 a.active { color: #ffffff; text-decoration: none; } .button-10 a.active { color: #ffffff; text-decoration: none; } .button-11 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-12 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-13 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-14 a.active { color: #ffffff; text-decoration: none; } .button-15 a.active { color: #ffffff; text-decoration: none; } .button-1-13 { --text-style: "button 1-13"; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.35; letter-spacing: 0.059em; color: rgb(255, 255, 255); background: #d78a14; display: inline-block; border-color: rgba(0, 255, 188, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; font-variation-settings: 'slnt' 0; } .mobile .button-1-13 { font-size: 15.00rem; } .button-1-13 a { color: #ffffff; text-decoration: none; } .button-1-13 a:hover { } .button-1-13 a.active { color: #ffffff; text-decoration: none; } .button-10 a.active { color: #ffffff; text-decoration: none; } .button-11 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-12 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-13 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-14 a.active { color: #ffffff; text-decoration: none; } .button-15 a.active { color: #ffffff; text-decoration: none; } .image-caption-home-page-descrip { --text-style: "image caption home page descrip"; font-size: 1rem; font-weight: 400; color: #858585; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; display: block; font-variation-settings: 'slnt' 0; } .mobile .image-caption-home-page-descrip { font-size: 0.50rem; } .image-caption-home-page-descrip a { color: #e9e3e4; border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: none; } .image-caption-home-page-descrip a:hover { color: rgb(252, 163, 17); font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; display: inline-block; font-variation-settings: 'slnt' 0; } .button-1-14 { --text-style: "button 1-14"; font-size: 1.20rem; font-weight: 400; font-family: "IBM Plex Sans"; font-style: normal; line-height: 0.5; letter-spacing: 0; color: rgb(255, 255, 255); background: #027aff; display: inline-block; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 0.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; } .mobile .button-1-14 { font-size: 0.5rem; } .button-1-14 a { color: #ffffff; text-decoration: none; } .button-1-14 a:hover { } .button-1-14 a.active { color: #ffffff; text-decoration: none; } .button-10 a.active { color: #ffffff; text-decoration: none; } .button-11 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-12 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-13 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-14 a.active { color: #ffffff; text-decoration: none; } .button-15 a.active { color: #ffffff; text-decoration: none; } .rooted-button { --text-style: "Rooted button"; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: rgb(255, 255, 255); background: #8f4f29; display: inline-block; border-width: 0.0rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; border-style: solid; border-color: rgba(188, 59, 59, 0); } .mobile .rooted-button { font-size: 0.50rem; } .rooted-button a { color: #ffffff; text-decoration: none; } .rooted-button a:hover { font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; font-variation-settings: 'slnt' 0; } .hunger-strike-button { --text-style: "Hunger Strike button"; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: rgb(255, 255, 255); background: #5d9251; display: inline-block; border-width: 0.0rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; border-style: solid; border-color: rgba(188, 59, 59, 0); } .mobile .hunger-strike-button { font-size: 0.50rem; } .hunger-strike-button a { color: #ffffff; text-decoration: none; } .hunger-strike-button a:hover { font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; font-variation-settings: 'slnt' 0; } .vera-button { --text-style: "Vera button"; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: rgb(255, 255, 255); background: #12948c; display: inline-block; border-width: 0.0rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; border-style: solid; border-color: rgba(188, 59, 59, 0); } .mobile .vera-button { font-size: 0.50rem; } .vera-button a { color: #ffffff; text-decoration: none; } .vera-button a:hover { font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; font-variation-settings: 'slnt' 0; } .amanecer-button { --text-style: "Amanecer button"; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: rgb(255, 255, 255); background: #333537; display: inline-block; border-width: 0.0rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; border-style: solid; border-color: rgba(188, 59, 59, 0); } .mobile .amanecer-button { font-size: 0.50rem; } .amanecer-button a { color: #ffffff; text-decoration: none; } .amanecer-button a:hover { font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; font-variation-settings: 'slnt' 0; } .sdg-button { --text-style: "SDG button"; font-size: 0.9rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: -0.002em; font-variation-settings: 'slnt' 0; color: #ffffff; background: #74337b; display: inline-block; border-width: 0.0rem; border-radius: 24.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; border-style: solid; border-color: rgba(188, 59, 59, 0); } .mobile .sdg-button { font-size: 0.50rem; } .sdg-button a { color: #ffffff; text-decoration: none; } .sdg-button a:hover { font-size: 1.35rem; font-weight: 400; font-family: "Walter Neue Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; font-variation-settings: 'slnt' 0; }

Well-Being in Latin America & the Caribbean

Project Overview:
This project explores the state of well-being in Latin America and the Caribbean by examining the intersection of mental health, economic conditions, and government intervention. Using key SDG indicators, such as poverty rates, unemployment, suicide rates, government spending on health and social protection, and homicide rates, the project visualizes the region’s social and economic landscape in comparison to global figures.




















Project  Visually depicting a data visualization that transforms heavy, somber data into a more accessible and visually engaging experience.

Role 
Interaction Designer, Information Designer and UX Researcher
Deliverables
Interactive Infographic

Prototype
Link



























Goal: The goal is an interactive data visualization that simplifies key social and economic indicators in Latin America and the Caribbean. By filtering data by section and year, users can easily explore trends in poverty, mental health, crime, and more, with a bright interface and optional dark mode for accessibility. This design makes complex data clearer and more engaging, while aligning with relevant SDGs.

















































Data OUTCOME:
The data suggests that Latin America and the Caribbean's social and economic landscape is shaped by crime rates, unemployment, poverty, and government spending, which influence overall well-being and development. High crime and unemployment could hinder economic growth and social stability, while increased government spending may help alleviate poverty but could also strain national budgets. Compared to global averages, these factors might highlight disparities or progress in the region, shaping future policies aimed at improving economic opportunities and social welfare.





















 Process













moodboard: Through my mood board I looked for different ways to combine multiple types of data in a single half circle graph.




























Phase 1: Phase 1:

  • My original idea was to filter the data by indicator and possibly by year as all the other sections of data fade out while making the other data. more visible.

Critique Notes
  • Colors are too close together
  • Needs a focal point, 
  • Try filtering data by year as well,
  • Try colors from the countries 
  • Add a dark mode option maybe

























Phase 2: Version 2:

  • Staying with my original idea I changed the colours to better align with accessability compliance to allow all users to experience the data. After noticing that some users preferred the data shown in an almost darkmode, I created a dark mode version to give users the option

Critique Notes
  • Adjust the colors in the center (some of them get lost)
















Design Challenge: Throughout the design of the graph, the main challenge was grouping and visually organizing the information in an interesting and aesthetically pleasing way. However, while prototyping in Figma, I found it extremely difficult due to the software being slow and uncooperative.










    Link to Prototype

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

     Lets Connect! 

                     

    Designed by Me (Daniel Santos) 2026