Table of Contents

Table of Contents

Table of Contents

Table of Contents

ECOA

Sustainable Building Education through Interactive Learning

5 min read

Role

UX Designer

Duration

June 2024-August 2024

Tools

Figma, FigJam

Team

Justin Luu

Responsibilities

Product Design, User Research, Iteration Design, Wireframing, Prototyping, Testing

CONTEXT

Engaging the next generation in sustainable architecture.

ECOA is a project I developed at the University of Washington inspired by my passion for sustainable building practices. In collaboration with architects from Miller Hull, the firm behind the Bullitt Center, the world’s first self-sustaining net zero building, I aimed to create an educational tool that makes sustainability accessible and engaging for younger audiences.


The goal was to bridge the gap between innovative green architecture and public awareness. By combining AR and gamification elements, ECOA turns complex green building concepts into hands-on learning experiences. The ECOA app blends my architectural background with user-centric design to create a product that inspires environmental responsibility.

PROBLEM

Students want to learn about sustainability, but it feels abstract and unengaging.

Buildings are responsible for about 39% of global carbon emissions, with 28% coming from energy use and 11% from construction materials. Upgrading older buildings can significantly reduce this impact, potentially lowering emissions by up to 80%.

Despite the importance of sustainable practices, students often find them complex and disconnected from real life, leading to low engagement. Without peer involvement, learning about sustainability can feel isolating and unmotivating. Yet, 67% of students believe it should be a top priority in education.

Buildings are responsible for about 39% of global carbon emissions, with 28% coming from energy use and 11% from construction materials. Upgrading older buildings can significantly reduce this impact, potentially lowering emissions by up to 80%.

It’s crucial to involve younger generations in these discussions, as 67% of students believe that sustainability should be a top priority in education.

Buildings are responsible for about 39% of global carbon emissions, with 28% coming from energy use and 11% from construction materials. Upgrading older buildings can significantly reduce this impact, potentially lowering emissions by up to 80%.

It’s crucial to involve younger generations in these discussions, as 67% of students believe that sustainability should be a top priority in education.

Buildings are responsible for about 39% of global carbon emissions, with 28% coming from energy use and 11% from construction materials. Upgrading older buildings can significantly reduce this impact, potentially lowering emissions by up to 80%.

It’s crucial to involve younger generations in these discussions, as 67% of students believe that sustainability should be a top priority in education.

Project Constraints

A three-month deadline, tight project timeline restricted the number of user testing sessions conducted.

A three-month deadline, tight project timeline restricted the number of user testing sessions conducted.

Clarifying project goals, whether to prioritize education, user engagement or community impact/involvement.

Clarifying project goals, whether to prioritize education, user engagement or community impact/involvement.

Limited to current knowledge of sustainable practices, due to the evolving nature, adaptability to future advancements.

Limited to current knowledge of sustainable practices, due to the evolving nature, adaptability to future advancements.

Simplifying sustainability education topics for a younger audience while still providing valuable information.

Simplifying sustainability education topics for a younger audience while still providing valuable information.

SOLUTION

ECOA: Empowering students with sustainable knowledge

ECOA transforms sustainability education through AR exploration and gamified challenges. Students connect via app with their associated class at school to scan QR codes at green building landmarks to discover eco-friendly features while earning rewards and competing with classmates.

Interactive Quizzes and Lessons

Interactive Quizzes and Lessons

Interactive Quizzes and Lessons

Test your sustainability knowledge with quizzes and lessons tied to AP Environmental Science or AP Biology. Earn badges and points as you complete challenges.

AR Building Exploration

AR Building Exploration

AR Building Exploration

Scan QR codes at green building landmarks to discover sustainable features and learn how real-world architecture supports environmental responsibility.

Rewards and Social Challenges

Rewards and Social Challenges

Rewards and Social Challenges

The ECOA app is affiliated with school classes. Compete with classmates to earn rewards by completing challenges and quizzes. Climb the leaderboard and showcase your eco-knowledge.

RESEARCH

Understanding the problem

I conducted 5 user interviews with middle and high school students to learn about their sustainability awareness, motivations to take action, and preferred learning methods. The goal was to identify opportunities to make sustainability education more engaging and relevant.

I used affinity mapping in FigJam to cluster interview responses, revealing key themes and patterns that shaped the design approach.

Emerging patterns

My research revealed key patterns that guided the direction of my design.

#1

#1

I don’t really think about sustainability unless someone brings it up or I see it somewhere. If it was part of my day, I might pay more attention.

I don’t really think about sustainability unless someone brings it up or I see it somewhere. If it was part of my day, I might pay more attention.

Students are interested in sustainability but don’t actively seek out information. Finding ways to prompt learning through engaging formats can make sustainable concepts feel more relevant.

#2

#2

If something looks fun and interesting, I'm way more likely to check it out. I’m drawn to things that feel playful or unique.

If something looks fun and interesting, I'm way more likely to check it out. I’m drawn to things that feel playful or unique.

Students appreciated incoporating playful, inviting, visuals to help capture attention and build/retain initial interest.

#3

#3

Connecting concepts to places I know, like my school or buildings around me, would make it stick more. It feels more relevant that way.

Connecting concepts to places I know, like my school or buildings around me, would make it stick more. It feels more relevant that way.

Although students have an interest in the educational topics, linking concepts to the real-world makes learning feel more relevant and practical to them, especially when incorporating familiarity to their lives.

Key Takeaways

Key Takeaways

From this I concluded that…

Active Learning

Students struggle to stay engaged with passive content and prefer hands-on, interactive methods.

Prompted Interest

Students don’t seek out sustainability topics unless prompted, making learning feel distant.

Real-Life Connection

Linking concepts to familiar places makes sustainability feel relevant and easier to understand.

Visual Appeal

Students are drawn to playful and inviting visuals, making them more likely to explore and stay interested.

DISCOVERY

How might we make sustainable building concepts engaging and relevant through real-life connections and active participation?

From the research insights, it was clear that students struggle to engage with sustainability concepts and rarely seek them out. They prefer interactive and visually appealing content that feels relevant to their lives. After reflecting on these insights and synthesizing the feedback, I decided to focus on this How Might We question to generate ideas.

IDEATION

Brainstorming and Iteration

Exploring Feature Ideas

I used Crazy 8s to brainstorm and sketch learning features. Ideas focused on active participation, visual appeal, and connecting concepts to real-life contexts.


After selecting a couple ideas I tried storyboarding scenarios and potential user flows that would apply to each idea.


Ideas Included:


  • Sustainability News Feed

  • Community Projects App

  • Interactive Construction Site Visits

  • Building Facts

  • Virtual Field Trips & Lessons

  • Virtual Mascots/ Pets



After evaluating each idea, I prioritized concepts that felt the most approachable and motivating for students. I considered how each feature aligned with user feedback, focusing on ideas that encouraged active learning and real-world connections. The final features included quizzes, mascots, and AR building exploration, all which stood out as the most engaging and practical ways to teach sustainability.

IDEATION

Features Decision

Gamification: Quizzes & Lessons

During the design phase, I decided on making sustainability concepts more engaging with interactive quizzes linked to school classes. Feedback showed passive content wasn’t effective, so gamified challenges would boost attention.


Other options considered:

  • Video Content: Straightforward information but lacked interactivity and engagement.

  • Story Driven Challenges: Highly immersive but risked feeling too lengthy and disconnected.

Mascots: Visual Motivation & Guidance

Students shown to be drawn to visually appeal and friendly designs that make learning approachable. To meet this need, I decided the app should incorporate playful mascots as visual guides, making sustainability learning feel less intimidating.


Reasoning:

  • Visual Appeal: Bright, colorful characters draw users in and make learning feel inviting.

  • Guidance: Mascots serve as companions, offering hints and encouragement.

AR Learning: Real World Exploration

Sustainability concepts often feel abstract and disconnected. AR technology bridges this gap by letting users explore real buildings through QR code scanning, learning about eco-friendly practices in familiar places.


Why:

  • Hands-on Learning: Active engagement with real-world practices.

  • Context Relevance: Makes concepts tangible and relatable for learning students.

IDEATION

User Flow

I created the main user flow to visualize how students would navigate the ECOA app, from starting the app, connecting to a class, discovering sustainable buildings through AR to completing quizzes and earning rewards. This flow introduces them to the key features while maintaining engagement and motivation.

IDEATION

Low-Mid Fidelity Wireframe Exploration

Following the previous user flows, I created low to mid fidelity wireframes to explore different layout ideas and interactions. This iterative phase helped visualize how each path would function, and the overall flow of the ECOA app.

USABILITY TESTING & DESIGN DECISIONS

Quick test to guage user perception.

I conducted 5 user tests with middle and high school students, as well as peers, to gather feedback on usability and flow. Their insights revealed key pain points, leading to the below design changes that improved clarity, engagement, and alignment with user needs.

Rethinking the nav bar

Rethinking the nav bar

Rethinking the nav bar

I tested a few different nav setups including split tabs, icon-only, even putting AR front and center.

After feedback, I landed on a version that felt the most clear, simple, and focused for students.

Removing scavenger hunt within the AR exploration

Removing scavenger hunt within the AR exploration

Removing scavenger hunt within the AR exploration

Users found the building hunt tedious and showed little interest in exploring physical features in detail. They preferred quicker, simpler information on arrival, so I removed the feature due to low engagement and feasibility, potential legal constraints, and challenges in achieving realistic implementation in the app.

SOLUTION

Designing a Cohesive Sustainable Experience

The ECOA branding is all about making sustainability feel approachable and fun. I used playful mascots, bright colors, and clean typography to keep a welcoming energy while still delivering an impactful learning experience.

SOLUTION

Final Design

Test your Eco-Knowledge with Lessons and Quizzes.

Test your Eco-Knowledge with Lessons and Quizzes.

Test your Eco-Knowledge with Lessons and Quizzes.

ECOA challenges you with quizzes on topics like Green Building, Solar Energy, Water Conservation, and Building Materials to test your eco-knowledge. Get instant feedback, with helpful explanations to boost your learning!

Discover Green Buildings with the AR Exploration Feature!

Discover Green Buildings with the AR Exploration Feature!

Discover Green Buildings with the AR Exploration Feature!

ECOA helps you find local sustainable green buildings using its AR feature. Select a mascot or highlighted area to uncover key sustainability features in categories like Energy Efficiency and Sustainable Building Material!

Collect & Share Eco-Stickers Earned through the ECOA App!

Collect & Share Eco-Stickers Earned through the ECOA App!

Collect & Share Eco-Stickers Earned through the ECOA App!

ECOA lets you unlock unique Eco-Stickers as you explore sustainable building practices through its AR feature. Collect them in your profile and share them with classmates in text messages to spread the word about sustainability!

REFLECTION

Conclusion

ABOUT THE PROJECT

ABOUT THE PROJECT

The ECOA project represents my commitment to making sustainability education engaging and accessible for younger audiences. It also served as a bridge between my architectural background and my growing passion for UX design. It challenged me to think critically about how to make complex topics engaging, approachable, and motivating through thoughtful design choices.

Within 2 months, I went through the end-to-end process of designing a product. After getting valuable feedback from an interviewer and several design mentors, I decided to iterate on visual explorations, solutions, and features I didn’t have time for before.

The ECOA project represents my commitment to making sustainability education engaging and accessible for younger audiences. It also served as a bridge between my architectural background and my growing passion for UX design. It challenged me to think critically about how to make complex topics engaging, approachable, and motivating through thoughtful design choices.

Within 2 months, I went through the end-to-end process of designing a product. After getting valuable feedback from an interviewer and several design mentors, I decided to iterate on visual explorations, solutions, and features I didn’t have time for before.

The ECOA project represents my commitment to making sustainability education engaging and accessible for younger audiences. It also served as a bridge between my architectural background and my growing passion for UX design. It challenged me to think critically about how to make complex topics engaging, approachable, and motivating through thoughtful design choices.

Within 2 months, I went through the end-to-end process of designing a product. After getting valuable feedback from an interviewer and several design mentors, I decided to iterate on visual explorations, solutions, and features I didn’t have time for before.

SUCCESS METRICS

SUCCESS METRICS

Daily Users

How often users engage on the app and for what duration each session was, monitoring feature usage.

Knowledge Retention

How well users perform on lessons and quizzes to track user and knowledge retention and development.

Feature Engagement

Monitor how many users use the AR functions of the app, frequency of users within the locations.

User Feedback

Gauge user feedback on how the app performs and whether classes that implement the app show success.

NEXT STEPS

NEXT STEPS

Moving forward, I see opportunities to enhance ECOA by:

  • Exploring ways to integrate community challenges or group learning to increase motivation.

  • Experiment with reward systems and streak-based challenges to keep users coming back.

  • Enhance the visual quality and interactivity of AR features for a more immersive experience. I think there is a lot more we can do with the development of AR and how users interact with the app/space.

Moving forward, I see opportunities to enhance ECOA by:

  • Exploring ways to integrate community challenges or group learning to increase motivation.

  • Experiment with reward systems and streak-based challenges to keep users coming back.

  • Enhance the visual quality and interactivity of AR features for a more immersive experience. I think there is a lot more we can do with the development of AR and how users interact with the app/space.

Moving forward, I see opportunities to enhance ECOA by:

  • Exploring ways to integrate community challenges or group learning to increase motivation.

  • Experiment with reward systems and streak-based challenges to keep users coming back.

  • Enhance the visual quality and interactivity of AR features for a more immersive experience. I think there is a lot more we can do with the development of AR and how users interact with the app/space.

Moving forward, I see opportunities to enhance ECOA by:

  • Exploring ways to integrate community challenges or group learning to increase motivation.

  • Experiment with reward systems and streak-based challenges to keep users coming back.

  • Enhance the visual quality and interactivity of AR features for a more immersive experience. I think there is a lot more we can do with the development of AR and how users interact with the app/space.

Next Project

NETFLIX CASE STUDY

FEATURE

MOBILE APP

CASE STUDY

New feature for Netflix, allowing users to reset watcher preferences. Improved personalization control and enhanced user experience.

SEE CASE STUDY