NERO

• 

  NERO Logo

About the Project

We started with a simple observation: most people don’t really know how hydrated they are. People often drink water reactively — when they feel thirsty, tired, or unfocused — but there isn’t a clear way to understand hydration in real time. We wondered what it would look like if hydration could become something people could see and understand instantly.

That idea led to NERO, a speculative hydration-awareness system. The concept pairs a small adhesive patch worn on the back of the neck with a mobile app that translates biosignal data into a simple visual representation. Instead of presenting complicated biometrics, the app communicates hydration balance through a character named Walter, whose color and energy change depending on hydration level. The goal was to turn something invisible inside the body into a simple, intuitive experience.

While designing the app, we focused heavily on clarity and usability. Health apps can easily become overwhelming with charts and numbers, so we aimed for a clean, wellness-focused interface inspired by apps like ClassPass. The Home screen is designed to communicate hydration status within a few seconds, while other screens provide forecasts, environmental insights, and device information. Throughout the app we prioritized readable layouts, clear hierarchy, and a calm design language.

From a technical standpoint, the prototype was built as a high-fidelity interactive mobile interface using modern web tools. The interface uses React for structure, Motion for animations, and Recharts for visualizing hydration trends and forecasts. Walter’s visual states were designed as animated variants that respond to hydration levels, which helped make the experience feel more alive and understandable during demo.

One of the biggest challenges was balancing simplicity with completeness. It’s easy to add many features to a health app, but doing so quickly makes the interface harder to understand. We spent a lot of time deciding what information actually matters to the user: current hydration balance, projected hydration, and the factors influencing it. Another challenge was designing Walter so that he communicated hydration levels clearly without becoming distracting or overly cartoonish.

Through this project we learned a lot about designing speculative products, translating biological signals into user-friendly interfaces, and building a prototype that communicates an idea clearly in a short demo. Ultimately, NERO explores the idea that wellness technology doesn’t always need to present more data — sometimes it just needs to make invisible signals easier for people to understand.

Video Link: https://www.loom.com/share/3625a295caac4d45b6061d62728a59a1

Built With

• chatgpt
• figma-make