Ecosphere UI

The Concept

Ecosphere is a calm, nature-inspired companion that helps people understand, track, and improve their carbon footprint. It begins with a simple questionnaire about daily habits. From food choices to transportation, each answer contributes to a clear, meaningful estimate of the user’s environmental impact.

Instead of presenting this impact through numbers alone, Ecosphere expresses it visually through a dynamic 3D model of the Earth that evolves based on the user’s lifestyle. This world becomes a personal reflection of their habits. It can grow healthier as progress is made or show areas of concern that need attention. The user’s Earth is not just a data point. It is a living, shareable representation of their footprint.

Sharing the world is a central part of the experience. With one tap, users can show their own Earth to friends, encouraging conversations around sustainability and motivating others to begin their own journey. A single visual can communicate impact far more effectively than raw metrics alone, and sharing makes progress feel communal rather than solitary.

Users can set a goal for themselves, track improvement over time, and retake the questionnaire whenever their habits change. Ecosphere supports them along the way with personalized tips tailored to their lifestyle. These tips appear as gentle cards that highlight simple, realistic steps they can take to reduce their footprint, offering guidance rather than judgment.

The UI draws heavily from nature. Soft forest greens and gentle depth effects create the feeling of a quiet forest. Buttons and surfaces float lightly on top of blurred organic textures, reinforcing a sense of calm rather than urgency. The visual language encourages reflection and awareness rather than pressure.

A defining part of the interface is a custom translucent material that powers the buttons and cards across the app. This material was created entirely in SwiftUI, and it became a signature element of Ecosphere. The effect is lightweight, responsive, and organic, giving the UI a modern feel while staying rooted in the natural theme.

Ecosphere brings together data, 3D visualization, and thoughtful interface design to make sustainability feel personal, approachable, and meaningful. It transforms environmental awareness from an abstract number into something users can see, understand, and share.

The Experience

Ecosphere guides the user through a calm, structured journey, beginning with self-assessment and ending with visual insight and actionable guidance. Each screen is designed to feel grounded, gentle, and rooted in nature.

The Questionnaire Flow

The experience begins with a lifestyle questionnaire. Each question is presented with a clear title and a supporting subtitle. The title states the question directly. The subtitle explains how that specific aspect of the user’s life influences their carbon footprint, helping them understand the why behind every choice they make.

Below the text, users choose from a set of large, glassy option buttons. These options are easy to tap and blend naturally with the forest-inspired background. At the top of the screen, a slim progress bar advances with each answer, giving users a sense of momentum without adding pressure.

This flow sets the tone for the entire app - calm, informative, and focused on awareness rather than judgment.

The Home Screen and 3D Earth

After completing the questionnaire, users arrive at the home screen. Here they see two things:

a. Their current carbon footprint score, displayed prominently.

b. 3D Earth generated from their answers.

This world reflects their lifestyle and provides a visual interpretation of their impact. It becomes a personal symbol of their habits, changing depending on how they live.

Beneath the Earth is a Share your world button. It invites users to share their unique model with friends, helping them stay motivated while also encouraging others to begin their own sustainability journey.

Swiping to the next page reveals a set of personalized tips based on the user’s questionnaire responses. These are actionable, specific cards that highlight steps the user can take to reduce their footprint. The card layout mirrors the glass-material aesthetic, keeping the guidance approachable and visually calm.

The Profile Section

A profile button at the top of the home screen takes users to the profile area.

Here, the user sees a circular progress indicator surrounding their profile photo. The ring shows how close they are to achieving their carbon footprint goal, offering a quick, intuitive view of their progress.

Below the indicator, there are two cards: one displaying the current footprint and the other showing the target footprint.

These values are displayed simply and clearly, reflecting the app’s commitment to transparency and ease of understanding.

Further down are settings and customization options that let users tune the app to their preferences, along with a dedicated option to retake the questionnaire whenever their habits change. This keeps the entire experience flexible and adaptive over time.

Breaking down the UI

This section looks at the core components that define the Ecosphere interface and explains how each one contributes to the overall experience. The goal is to show how visual choices, interaction patterns, and technical decisions all work together to create an atmosphere that feels calm, organic, and grounded in nature. Every element was crafted with intention, both aesthetically and technically.

The Background

The background of the app sets the tone immediately. Inspired by the Apple Home app, it uses a softly blurred image combined with additional modifiers to create a gentle, natural ambiance. The blur helps the UI feel calm and atmospheric, while also giving depth to the foreground elements. This treatment supports the nature theme without distracting from the content.

Custom Translucent Elements

Almost all the elements in Ecosphere are made from a custom translucent material, created from scratch entirely in SwiftUI. This material forms the visual identity of the app. It has the right amount of translucency to feel light and modern, while still remaining readable against the forest-inspired backgrounds.

This material became a core building block for the UI. It carries the app’s personality across the questionnaire options, action buttons, tip cards, progress indicators and profile interactions.

Progress Indicators

The app uses two kinds of progress indicators using the same translucent material as the buttons with necessary modifications, each tuned to its context.

a. The questionnaire features a simple linear progress bar at the top of the screen to show how far the user has advanced.

b. The profile section uses a circular progress indicator wrapped around the user’s profile photo. This ring animates smoothly to reflect progress toward the user’s carbon footprint goal.

Both indicators use a glowing neon green effect achieved through experimentation SwiftUI’s LinearGradient. As the indicator fills, the gradient creates a sense of energy and life without feeling aggressive. The glow contrasts well with the earthy background, reinforcing the idea of growth and improvement.

Tips Cards

The personalized tips are presented as custom cards designed to match the mood of the app. They use the same translucent material as the buttons, but with additional modifications to make the content easy to read. These cards play a significant role in the experience, so their design is intentionally calm and approachable.

The 3D Earth and Carbon Footprint Display

The 3D model of the Earth is rendered using SceneKit and placed prominently on the home screen. It updates based on the user’s answers, giving them a visual representation of their carbon footprint that feels alive and personal.

Below the Earth, the carbon footprint number uses a glowing effect similar to the progress indicators created through experimentation with linear gradients. The glow makes the number stand out without breaking the app’s soft aesthetic, and it reinforces the idea that the user’s “world” is active and evolving.

Profile Section

The profile section continues the app’s visual consistency but introduces a subtle shift in depth. It uses the same blurred background as the rest of the app, but with a darkened overlay. Presented as a full-screen cover, it creates the feeling of a translucent layer being placed over the main interface.

Inside this space, the circular progress indicator surrounding the profile photo animates into place. Two translucent cards display the current footprint and the user’s goal, and below them are tailored settings options and the control to retake the questionnaire. Every component in this screen is styled to preserve the calm, nature-inspired tone of the app.

Typography

The app uses SF Pro Rounded throughout the interface to keep the design clean, gentle, and approachable. Its rounded forms fit naturally with the calm, nature-inspired theme of the app, bringing a sense of friendliness to every screen. All typography uses a white foreground style, which maintains clarity and contrast against the blurred forest backgrounds without ever feeling harsh.

Ecosphere also incorporates italicized SF Pro to work alongside SF Pro Rounded. This combination appears prominently in the questionnaire, where a bold SF Pro Rounded title is paired with a smaller italicized SF Pro subtitle. The contrast in weight and posture creates a clear hierarchy and adds a subtle editorial feel, inspired by the design of book covers. This helps each question feel thoughtful and intentional, guiding the user through the flow with ease.

Exploring Alternate Design Language

While building Ecosphere, I also explored an alternate illustrative design direction inspired by apps like Monument Valley and animated films such as Pixar’s Soul. This approach leaned into a more playful, whimsical aesthetic, similar to stylized cartoon worlds.

In this variation, the background shifted to a bright sky blue in light mode and a deep night sky in dark mode. The 3D Earth sat against this open backdrop, giving the screen a lighter, more imaginative atmosphere. The carbon footprint text remained consistent, but visually it took on a Soul-like quality, reminiscent of character 22 glowing softly in the night sky.

The Share button used a clean white capsule with a dark label, echoing classic iOS visual patterns while still fitting the illustrative feel.

Why explore it?

Experimentation is a core part of good interface design. Trying alternate styles opens new perspectives, even if you eventually return to the original approach. The more you explore, the more likely you are to find a detail, a technique, or a feeling that strengthens the final result.

SwiftUI made this exploration effortless. Its declarative structure makes it possible to prototype entirely new visual directions quickly, compare them side-by-side, and refine them without heavy re-architecture. For anyone interested in using SwiftUI as a design and prototyping tool, Apple shared a great explanation in a WWDC23 session on the topic.

This exploration helped reinforce confidence in the final nature-inspired design, while still expanding the creative vocabulary of the project.

Try it yourself

You can explore this project yourself by running it directly from the source.

View the project on GitHub

Since the purpose of this project is to focus on the UI and interaction design rather than shipping a complete production app, some features may be simplified or unavailable in this build.