EcoSteps — Your Eco Journey App

🌱 EcoSteps - Small Actions, Big Impact.

A mobile app that transforms sustainability into daily habit.

💡 Why I Chose This Field

I wanted to design something that combines purpose and behavior design - something that not only looks good but helps people do good.

The sustainability field is deeply relevant today: environmental degradation, pollution, and waste are global issues, yet most individuals feel their personal actions don’t matter.

I choose to design for conscious living - a mobile experience that helps users make eco-friendly choices through positive reinforcement and habit-building.

🌍 The Core Problem

• People care about the planet - but struggle to act consistently.
• Sustainable living often feels complex, abstract, or inconvenient.
• Existing sustainability apps either focus on data and carbon calculators or education, not daily behavior support.
• Users need a tool that helps them translate awareness into action - with simple, achievable habits and visible results

🎯 Design Goal

Create a mobile app that makes sustainable living feel simple, personal, and rewarding - not overwhelming.

EcoSteps turns environmental awareness into small daily actions that build into measurable impact.

The app encourages users to choose eco-goals, track their habits, visualize progress, and connect with a community of like-minded change-makers.

👥 Target Users

User mindset:

“I want to be more eco-friendly - but I don’t know where to start or how to stay consistent.”

User needs:

• Simple and achievable eco-habits.
• Motivation through visuals, streaks, and feedback.
• A calm, uplifting experience - not guilt or pressure.

🎨 Visual Direction & References

Before designing, I collected visual references of modern, nature-inspired mobile UIs that balance clarity, calmness, and optimism.

The goal was to create an interface that feels fresh, human, and environmentally conscious - not overly technical or corporate.

🌱 Logo Creation Process

The goal was to create a logo that visually expresses the idea of progress through sustainability - combining the concepts of eco (nature, growth, life) and steps (movement, habit, human action).

I collaborated with ChatGPT (GPT-5) to explore ideas and generate logo concepts using AI image design tools.

🎨 Design Iteration Process

To ensure consistency, usability, and visual harmony, I followed a three-step iterative process for every main screen of the EcoSteps app - from low-fidelity to final, production-ready design.

1️⃣ Step One - Wireframes (UXPilot)

I started by generating low-fidelity wireframes using UXPilot, focusing purely on structure, hierarchy, and functionality - without any color or decoration.

The goal at this stage was to validate the user flow and logic of each screen before moving into visual design.

2️⃣ Step Two - UI Design (UXPilot High-Fidelity)

I generated high-fidelity UI concepts in UXPilot using detailed prompts describing the app’s mood, style, and component hierarchy.

Prompt for page style:

Visual style:

• Inspired by modern eco apps (like “NeutralLife” or “Smarter Habit Tracking”)

• Use soft gradients in green tones (#DFF4E0 → #A4E6A1) with clean white space.

• Include a realistic, nature-inspired image (like a forest, leaves, or hands holding a plant) integrated subtly into the layout.

• Use rounded cards and soft shadows.

• Typography: Rounded sans-serif, bold title, medium subtitle, and light paragraph.

• Include gentle line, leaves or wave graphics in the background (like flowing energy).

Tone: Calm, optimistic, and motivational - feels like a friendly sustainability coach, not a corporate dashboard.

3️⃣ Step Three - Final Polish in Figma

In the final phase, I refined each UI design in Figma to achieve full visual and brand alignment.

Result: A clean, accessible, and emotionally engaging final product - consistent across all 10 essential screens.

🌱 10 Screen Design Prompts

1️⃣ Welcome screen

Purpose: To introduce users to EcoSteps’ mission and motivate them to begin their sustainability journey.

Prompt for Wireframe: Create a mobile wireframe for the onboarding welcome screen of an app called EcoSteps. Include a logo placeholder, a short welcome message, a large hero image area, and accent button - “Get Started” Arrange content vertically, centered, with focus on simplicity and balance.

2️⃣ Sign Up / Create Account

Purpose: To allow users to register quickly and begin tracking eco-habits.

Prompt for Wireframe (UX): Create a sign-up screen wireframe with a logo placeholder at the top, input fields for Email, and Password, add a “Continue” button below. Then add buttons for “Sign up with Google” and “Sign up with Apple.”

Below all buttons text link for “Already have an account? Sign in.”

3️⃣ One of steps of Onboarding - Personal Goals Setup

Purpose: To let users choose their main eco-goals to personalize the app experience.

Prompt for Wireframe: Create a wireframe for a goal selection screen with a title (“Choose Your Eco Goals”) and progress indicator at the top. Show five selectable goal cards in a vertical or grid layout, each with an icon, title, and checkbox.

Include a “Continue” button fixed at the bottom.

4️⃣ Home Dashboard

Purpose: To provide a daily overview of eco-habits and progress tracking.

Prompt for Wireframe: Create a home dashboard wireframe showing a header with greeting (“Good morning, [Name]”), a circular progress indicator for today’s goal completion, and a vertical list of eco-habit cards with titles and short descriptions.

Add bottom navigation bar with four icons: Home, Progress, Community, and Profile. A floating action button (+) centered above the bottom nav for adding a new habit.

5️⃣ Add New Habit

Purpose: To allow users to create and customize new eco habits.

Prompt for Wireframe: Create a wireframe for an “Add New Habit” screen with a title, input fields for Habit Name, Category dropdown, Frequency selector, and Reminder.

Add a “Save” button fixed at the bottom.

6️⃣ Habit Detail / Progress

Purpose: To display a user’s progress for one selected habit.

Prompt for Wireframe: Create a wireframe for a habit detail page. Include a header with habit name and back arrow, a progress visualization (chart or ring), a stats section (streak, CO₂ saved, days completed), and a “Mark as Done” button at the bottom.

7️⃣ Impact Dashboard

Purpose: To visualize the user’s overall environmental impact.

Prompt for Wireframe: Create a wireframe for an impact dashboard showing total CO₂ saved, water saved, and waste reduced. Include simple graph or visual comparison (“Equivalent to planting 3 trees”). Add navigation from dashboard

8️⃣ Challenges & Community

Purpose: To engage users through social participation and motivation.

Prompt for Wireframe: Create a screen wireframe with two tabs: “Challenges” and “Community.” At top show user level and point. Under Challenges tab, show cards with title, progress bar, and number of users joined, also status. Add navigation from dashboard

9️⃣ Profile & Achievements

Purpose: To show the user’s eco-identity, badges, and personal stats.

Prompt for Wireframe: Create a profile screen wireframe with a profile photo, username, and eco-level. Add a grid of achievement badges and buttons to go to settings. Add navigation from dashboard

🔟 Settings

Purpose: To manage user preferences, notifications, and theme options.

Prompt for Wireframe: Create a settings wireframe with a title (“Settings”), followed by toggle switches for Notifications, Reminders, and Dark Mode. Below, include buttons or links for Edit Account, Privacy, and About.

🌟 Conclusion

Designing EcoSteps was a deep exploration of how UX and visual design can inspire positive behavior change. My goal was to create more than just another tracking app - I wanted to design a calm, intuitive experience that helps people feel capable of making small, meaningful contributions to a more sustainable world.

AI tools like UXPilot and ChatGPT played a crucial role in speeding up ideation and iteration.

They helped me:

• Rapidly generate wireframes and layout ideas.
• Explore multiple visual directions with descriptive prompts.
• Save time on repetitive setup tasks - allowing more focus on creative decisions, hierarchy, and emotional resonance.

AI acted not as a replacement for creativity but as a collaborative design assistant - extending my workflow and helping me focus on what matters most: the human experience ❤️