Case Study File No. 01

Multiple Sclerosis

Interactive infographic of the degeneration of the myelin sheath & its affects on the human nervous system.

Project Timeline

Tools

6 Weeks, Fall 2025

HTML/CSS, Figma, Adobe Suite

Prototype Video

Initial Development

01 / Definition

Infographics serve as a visual to guide a user through a collection of information, but I wanted to take that idea a step further. I wanted to expand my own knowledge on the degenerative disease Multiple Sclerosis, while also creating something visually engaging enough for a user to want to become more knowledgeable about it as well. By making an interactive infographic, it gives users the chance to influence the visuals, and to be prompted to dive deeper into what the graphic has to offer.

02 / Project Direction & Research

Through vibe coding, I was able to build a user friendly interface and visual style. It was an interesting learning curve to use AI in a way I hadn't in the past. Blending this method with my previous knowledge of HTML/CSS made way for an interactive experience that presents the information in an interesting way.

With this being an infographic, I wanted to be sure the provided information was accurate and useful. I went through peer reviewed medical sites and scholarly articles that specifically focused on the causes and effects of this disease. The information was collected into three sections that broke down the details to be easily read and understood by any user.

iterations

The Process

03 / Process Work

In the early stages of prototyping, I was still getting the hang of vibe coding. The initial focus was on getting the information down, worrying about the UI and visual design after. Later iterations incorporated the 3D modeled brain into the code, while the earliest trials were done with a simple oblong shape to serve as a placeholder.

Eventually, I started to nail down what I wanted the UI to look like. The first step to establishing this was by making a styleguide in Figma. By the third iteration, I had my research completely finalized. The previous structure was then reworked, which adjusted how the viewer engages with the information being presented.

Final Designs

Afterword

04 / Reflection

When I first started prototyping, I just had the overall idea and I told myself I would jump each hurtle as I got to it. This project was a lesson in vibe coding for me, and I think the experience this project has given me has helped to expand my knowledge of coding and its capabilities. Vibe coding is very tedious and time consuming. While it's a lot of troubleshooting, I also found that there was also a great deal of waiting and thinking. The AI is there to help and assist, but it got to a point several times where I took it completely into my own hands and used the knowledge of HTML/CSS I have.

This project has expanded the umbrella of programs I can work with to produce certain projects. While I don't think I will continuously rely on vibe coding and AI to make extensive projects, it's still a helpful tool to have the ability to utilize should the opportunity arise.

← Back to Selected Works