💬 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 collaborated with the research team to transform the paper into an accessible website. By developing a clear narrative, we guided users through extensive information in an intuitive way.

In this project, I contributed by designing engaging visuals and supporting front-end development to ensure a user-friendly experience.

💡Concept
A 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

🔎 Research

We worked very closely with the client to learn how talk about health and obesity. Through card sorting exercises we managed to define the story and visuals for the project.

Simplicity was our guiding principle throughout the project.
We had to be very mindful of the time constraints and the team’s abilities, all while working remotely across 3 different timezones.

We gathered lots of sources of inspiration to define what the team could do. From websites to illustrations, from government guidelines to reports. We also used Brazilian artists as reference to reflect that this was Brazilian research study intended for a Brazilian audience.

After analyzing our options, we chose a "scrollytelling" approach for the website. This format allowed us to craft a visually engaging story about the epidemic while offering straightforward navigation for stakeholders to access data directly.

🧩 Co-creation Meetings
Collaborative sessions with the client to define the story and visuals

📚 Resources + Inspiration
Guidelines and reports
References from Brazilian illustrations and design styles

📣 Competitive Analysis
Explored possibilities to determine the best website format

🔑 Key Learning
"Scrollytelling" website: a simple UI with intuitive storytelling and quick data access

📝 Sketching

The goal was to develop a style that felt friendly, inviting, and distinctly unique. I focused on abstract shapes and bright colors to reflect the diversity of Brazil’s population. Rather than using rounded shapes, which felt overly common, we explored irregular, asymmetric edges to create dynamic and vibrant visuals.

We experimented with color combinations and physical textures to give the design a tangible, handcrafted feel. To represent people, I conceptualized two approaches: detailed illustrations for individuals and simplified shapes to depict groups. This dual style ensured clarity while adding depth to the visuals.

To make the website as engaging as possible, we integrated visuals into the UI itself, using illustrations as functional and aesthetic elements. The team also advised against incorporating the colors of the Brazilian flag in clothing illustrations, as it could unintentionally suggest political bias—a blind spot they kindly brought to my attention as the only non-Brazilian on the project.

📑 Initial Sketches
Style: friendly, inviting and unique

🕹️ Website Interface
Integrated illustrations as functional elements of the UI

🔑 Key Learning
Color combinations to avoid

🎏 Design Highlight

The color palette was carefully selected to enhance data visualizations. Summarizing large amounts of data in a single image required strong contrast to ensure the audience could easily differentiate between variables.

To reinforce the project’s identity, I incorporated branding elements into even the simplest graphs. For instance, to illustrate obesity prevalence in the USA, I added a silhouette of the country with an upward-pointing arrow that mirrored the data trend. These small illustrative details in graph titles provided readers with a quick, visual summary of the information.

✈️ Prototype

We built the website on GitHub and periodically presented it to the client for feedback. The website was divided into 7 sections with 11 data visualizations. Each section included additional visuals to explain concepts without relying on words.

The team placed special emphasis on interactive elements to encourage users to explore the information. Features included simple animations during scrolling, click-to-highlight graphics, and filterable data maps. Our goal was to promote active engagement with the material rather than passive scrolling.

During the implementation of the website I supported the team with front-end code. I helped developing the draft version of the navigation system, setting up classes in CSS, adding HTML content and making small updates in Github.

🖥️ Website
7 sections + 11 data visualizations

📊 Visualizations
Illustrations, Animations, Data Visualizations, Iconography


🔑 Key Learning
Let the user explore the information

🎏 Design Highlight

The website’s welcome is a critical touchpoint, as it determines whether users continue exploring or leave the site. The team recognized that this section needed to:

1. Provide an overview of the project

2. Allow direct access to the data tool

3. Introduce the scrolling functionality

Initial sketches featured illustrations of individuals and food, but they lacked a strong connection to the accompanying text. To address this, I developed a concept using abstract shapes to represent 100 individuals, with color coding to show how obesity prevalence increased over time. This design allowed users to quickly understand the severity of the issue and frame it as a major public health concern.

🌟Results

The team was able to successfully deliver the final product in a span of a few weeks. Professor Leandro’s team received:

• An interactive website with data visualizations and illustrations explaining complex concepts
  https://rezendelfm.github.io/obesidade-e-as-dcnt/

• Data tools specifically designed for policy makers to explore the noncommunicable disease data

• A project identity that is friendly, unique, and inviting.

• Brand materials and assets including: iconography, illustrations, brand guidelines, individual data visualizations, email template and a 1 minute promotional video.

If the team had more time we would have loved to make website mobile friendly, add more animations and develop an online marketing campaign.

🎯 Deliverables

Interactive website
Data tools for policy makers
Project identity
Brand materials and assets

☀️ Wrap up

Personal lessons