💬 Introduction

This project originated as a research study on Brazil's obesity epidemic and the increasing prevalence of noncommunicable diseases—a growing public health concern.

Our challenge was twofold: to create a tool enabling stakeholders to access data effectively while simplifying the complexity of the obesity crisis for the general public.
To address this, we transformed the scientific paper into an accessible website.

• 💡 Concept
  Research study on the obesity epidemic in Brazil
• 🎯 Goal
  Present data in a format accessible to policymakers and the general public
• ⚠️ Considerations
  Diverse audiences with varying levels of expertise
  Complexity of the obesity crisis
  Limited time and resources
• ✅ Solution
  A website that simplifies the epidemic's causes and includes tools for data exploration

📐 Design process

📚 1. Understand

We worked closely with the client through collaborative exercises—including card sorting—to define the narrative structure of the project. While the original research paper focused heavily on the link between obesity and non-communicable diseases, we reframed the story to position obesity as a widespread epidemic with systemic causes, rather than individual failings.

This shift allowed us to explore shared risk factors across the population, making the issue feel more solvable and less stigmatizing. It also gave policy makers a clearer lens for proposing legislative changes that could lower long-term healthcare costs.

Initial co-creation meetings with client.

⛳ 2. Define

Simplicity was our guiding principle. Working remotely across three time zones and under tight deadlines, we prioritized clarity, focus, and efficiency in both design and collaboration.

The client needed the product delivered before a submission deadline, so we made all design decisions with implementation speed and feasibility in mind—balancing ambition with what could be realistically built in time.

After evaluating several options, we chose a website instead of a dashboard. This approach allowed to share the project with a larger audience. We decided to include a link to the data tools to let policy makers access that part of page directly.

We adopted a desktop-first strategy, as our primary audience was policy makers working on computers. To manage expectations, we added a clear banner encouraging mobile users to view the site on desktop for the best experience.

🔎 3. Research

We began by collecting a wide range of inspiration sources—from websites and editorial illustrations to public health reports and official government guidelines. To reflect the cultural context, we also drew visual references from Brazilian artists, ensuring the design remained grounded in the identity of both the research and its intended audience.

As we explored different storytelling formats, we aligned on a single-page scrollytelling approach. This allowed us to deliver a visually engaging narrative about the obesity epidemic while maintaining intuitive navigation for stakeholders who needed to access specific data points quickly.

📝 4. Propose

The goal was to create a visual style that felt friendly, inviting, and distinct. To reflect the diversity of Brazil’s population, I focused on abstract shapes and bright, saturated colors that brought energy to the overall tone.

Initially, we explored rounded design elements, but they felt too familiar and lacked visual impact. To push the direction further, we proposed irregular, asymmetrical shapes that added rhythm and personality to the layout.

We presented two visual styles with three different color palettes. After client review and discussion, we aligned on a bold palette and asymmetrical forms (B2, see below) —a choice that gave the project a vibrant, unique identity while staying rooted in accessibility and clarity.

🎨 5. Design

Visuals were not just decorative—they were integrated directly into the UI, serving both functional and storytelling roles. Throughout the process, cultural sensitivity remained important: the team advised against using Brazilian flag colors in clothing illustrations to avoid unintended political associations—an important consideration I appreciated as the only non-Brazilian on the project.

The color palette and fonts were carefully refined to support clarity in data visualizations. Since many charts condensed large datasets into a single view, we prioritized high contrast and visual differentiation to make key patterns immediately legible.

We explored color combinations and textural overlays to give the visuals a tangible, handcrafted quality. To represent people, I developed two illustration approaches: detailed figures for individuals and simplified, abstract shapes for groups. This dual system balanced emotional depth with narrative clarity.

To reinforce the project’s identity, I wove brand elements into even the most minimal visualizations. For example, in a chart illustrating obesity trends in the U.S., I added a country silhouette paired with an upward-pointing arrow to echo the rising data trend. These subtle illustrative cues in graph titles acted as visual summaries, helping readers interpret key insights at a glance while maintaining narrative cohesion.

♻️ 6. Iterate

Throughout the project, we held frequent meetings with the client to present progress, gather feedback, and make real-time adjustments. Due to a tight timeline leading up to launch, we weren’t able to conduct formal user testing, but the client and their team played a key role in refining the story and visuals. Their insight helped us anticipate and address the needs of the final user.

The landing section became a central focus during iteration, as it served as the entry point to the experience. It needed to:provide an overview of the project’s context and goals, offer direct access to the data tool for more experienced users, and introduce the scrolling functionality that guided the story

Initial concepts used illustrations of individuals and food, but they felt disconnected from the narrative. To improve clarity and impact, I used abstract shapes to represent 100 individuals, with color coding that visually depicted rising obesity rates over time. This helped users immediately grasp the scale and urgency of the issue, reinforcing the message that obesity is a shared public health challenge, not just an individual concern.

🚀 7. Protoype

The website was built on GitHub and structured into seven sections, featuring a total of eleven data visualizations. Each section was supported by additional visuals that helped explain key concepts without relying solely on text, reinforcing accessibility and comprehension.

We placed strong emphasis on interactivity to encourage user engagement. Features included scroll-triggered animations, click-to-highlight graphics, and filterable data maps—all designed to promote active exploration rather than passive consumption of information.

During implementation, I supported with front-end contributions. I helped build the navigation draft, structured content using HTML and CSS, and handled various updates directly within GitHub to streamline the design-to-development process.

All users could scroll and see the animations change as they accompanied the story.

Users who wanted to learn more about processed foods could click to filter and explore.

Policymakers could filter information by impact, helping them establish appropriate measures based on the severity of the epidemic in their state.

🌟 8. Handover

The team successfully delivered the final product within just a few weeks. Professor Leandro’s team received a complete communication package designed to simplify complex data and support policymaking efforts.

• An interactive website with data visualizations and illustrations that explain key concepts in a clear, engaging way.
  View the site
• Data exploration tools tailored for policymakers to interact with noncommunicable disease data.
• A friendly, distinct project identity that makes the topic approachable for a broad audience.
• Full brand asset package including iconography, illustrations, brand guidelines, data visuals, an email template, and a 1-minute promotional video.

If we had more time, we would have loved to make the website mobile-friendly, incorporate additional animations, and develop a full online marketing campaign to increase reach and visibility.

💭 Closing

This project pushed me to explore new techniques, tools, and visual styles outside of my usual work. It also motivated me to improve my Portuguese so I could better communicate with the client and connect with the team on a more personal level.

I learned a great deal about the obesity epidemic—and how for years, the conversation has centered around individual choices. By reframing obesity as an epidemic with shared societal factors, we can identify trends that help us care for the health of entire populations, not just individuals.

Thank you for reading!