Gamified Sustainability Portal: Empowering Town Residents Through Awareness & Action

A PROLOGUE

For my final year of Masters' Capstone project, I teamed up with four other like-minded individuals who shared my enthusiasm for sustainability. Our professor helped structure our group to ensure we balanced each other's strengths and experiences.

We had a range of topics to choose from. Sustainability has long been a passion of mine, so when I saw this project, it immediately caught my interest. Plus, the opportunity to gain insights into local government operations was a big draw for me. It felt like the perfect fit—a passion project that aligned with my interests and goals.

SUSTAINABILITY: A CONVOLUTED PROBLEM

In a world where sustainability is no longer just an option but a necessity, the challenge lies not only in spreading awareness of available initiatives but also in simplifying the complexities of sustainability itself.

University Park's sustainability committee faced this very dilemma. Despite their commendable efforts, they were unsure if their residents shared their enthusiasm or were actively engaged in sustainable practices.

Their answer came in the form of the "Landowner Sustainability Rating System." To realize this vision, we set out to construct a central hub for residents—a one-stop sustainability portal. Here, they could discover practical information, explore ways to lead sustainable lives, and understand the tangible benefits of their efforts. Also, the committee could track and monitor the town’s impact by resident ratings.

Is an information hub & tracking system enough?

Yet, as our project progressed, through research, client and user interactions, we uncovered a deeper truth: sustainability isn't just about information—it's about action. Thus, our portal evolved beyond mere education. So that the platform could motivate residents, we infused it with subtle gamification elements and community-building features to inspire residents to not only learn but also actively participate in sustainable living.

A SNAPSHOT OF THE DESIGN PROCESS

The project was divided into 5 sprints, each lasting around 5 weeks. Each sprint focused on a different part of the project and followed its own design process to meet specific goals and deadlines. This organized approach helped us tackle problems step by step and move the project forward smoothly.

SPRINT ROLES

The capstone project was structured in a way where in each sprint, we adopted distinct roles: Facilitator, Design Lead, Research Lead, Communication Lead, and Resource Lead. These roles allowed us to divide responsibilities effectively, ensuring that every aspect of the sprint was covered.

However, within our team, we functioned as equal partners, collaborating on all tasks regardless of our designated roles. While the roles were useful for scheduling and planning, we shared equal responsibility and contributed equally to the project's success.

INTO THE PROCESS

If you'd like to delve into the details of the story, scroll down to see our journey, or skip to see the Final Designs & Prototype!

Curious to see the final designs? Click here ->

Final Designs

What Did We Find in Our First Meeting with the Client?

In our initial meeting, we uncovered several insights. From our discussions, it became evident that the client's vision extended beyond a "Rating and Ranking" system. However, their primary goal was tracking of sustainability efforts among residents so we decided to start from there.

But how do we track sustainability if we didn't know what actions to track?

As we discussed our objectives for the first sprint, it became apparent that without a clear understanding of the sustainability initiatives available to UPark residents, our efforts to design the portal and conduct user research would lack direction and purpose.

We realized the importance of understanding the sustainability landscape and what sustainability meant for UPark Residents.

Let’s Understand the Sustainability Landscape

DOMAIN KNOWLEDGE RESEARCH

We did an extensive research across 4 categories to gain a comprehensive understanding of sustainability & compile a list of sustainable practices & rebate programs available.

EXPERT INTERVIEWS

2 interviews which helped us recognize that being sustainable on an individual level required internal initiative, community support, effort, financial investment, and time.

RESEARCH PROCESS

Out of 60+ Practices, Which Ones Are Important to UPark?

Based on the data we gathered, we presented it to our client and prepared an interactive visual aid for exploring our findings. Alongside our spreadsheet, we collaborated with the client to consolidate a list of 40 relevant practices for UPark residents. This process facilitated alignment between our team and the client, ensuring that we were all on the same page regarding the project objectives and the concept of sustainability.

What else did we discover during our research?

In addition to consolidating practices and programs, we also observed how towns incentivized their residents to engage in sustainable practices. We encountered numerous instances of neighbor competitions and various strategies to ignite residents' enthusiasm. This marked the initial realization that our portal would likely benefit from incorporating gamification elements.

Let's Do Some User Research!

Our next step was to talk to our users, understand their needs and motivations for using the portal. This insight would be crucial for organizing information effectively and identifying specific features beneficial for the system.

Client - What questions can we ask residents if we don't have anything tangible to present?

Despite our efforts to persuade them, the client remained firm in their vision: a portal that residents were required to use as part of town policy.

Team - No problem! Let's design an MVP to secure buy-in for user research!

We proposed designing an MVP to demonstrate the value of user research. We wanted the clients to understand that while residents would ultimately need to use the portal, it was equally important to ensure it was intuitive, user-friendly, and aligned with both user and client needs.

How would designing an MVP help us?

Get client support for engaging with users in future sprints Offer visual representations of our features that would confirm our understanding and the client’s

How Do We Determine the Features for the MVP?

We outlined the basic pages - Home, Programs, Profile needed for the MVP and determined the IA for presenting practices. With numerous practices to include, we aimed to prevent user overwhelm while ensuring effectiveness in information delivery.

But were we designing based on assumptions?

Initially, we categorized practices by energy, land, water, etc. However, we realized that without knowing our users, these categories might not be effective. To address this, we opted for the Card sorting research technique to help us understand how users would perceive and categorize information, ensuring our IA aligns with user expectations.

Since direct user access wasn't available, we utilized proxy users—individuals matching our target audience criteria of homeowners within the DMV region.

Recognizing that this process would take time, we ran this activity concurrently throughout the sprint. Consequently, we decided against implementing practice categorization in the MVP. Later in Sprint 3, our findings led to 5 categories: Waste Minimization, Water Management, Habitat & Biodiversity, Garden Management, and Energy & Renewables.

TESTING WITH CLIENT

Once we built our MVP using the Google Ventures Design Sprint, we showcased our screens to the client, elaborating on our features and inviting open feedback during our conversation.

Client Meeting Success!

We not only gained the client's approval for future user testing but also saw their excitement as their idea came to life. The insights from our questions laid a solid foundation for refining features in our upcoming designs. We requested the client to engage with the developers as our feature designs prompted us to consider technical feasibility and constraints.

How Do We Integrate Motivators Within the Portal?

Throughout the process, we recognized the potential for gamification to serve as effective motivators within the portal. But there can be numerous ways of conducting gamification.

Each time we discussed a gamification plan together, we found ourselves in extensive discussions leading to no conclusions.

COMPLEXITIES IN GAMIFICATION

SIMPLIFYING OUR UNDERSTANDING

I recognized that we all need to gain a deeper understanding of our practices, as they formed the foundation of our portal. Specifically, we needed clarity on their frequency, tracking mechanisms and how many points they hold. We also verified these with our client, and gained their insights on each.

FINDING GAMIFICATION INSPIRATION

Since access to users was limited, we aimed to reach out to users for user testing once we had our prototypes ready. To ensure that our gamification strategy was well-informed, we conducted the following research.

MY IDEATION

Each team member develop their own version of the gamification system, including existing MVP features and any additional ideas, followed by a collective decision on which aspects to gamify.

FINAL GAMIFICATION PLAN

What did the developers say?

Our meeting with the current developers from CivicPlus, who manage UPark's website, confirmed that their CMS couldn't accommodate the technical requirements for our ideas, especially regarding gamification.

Despite this limitation, our client expressed a preference to retain the gameplay ideas as they were and suggested seeking other developers capable of implementing them. As a result, we proceeded to design our screens without altering the gamification features.

Varying views of 5 - A Visual Design Consensus Dilemma

Throughout sprints 3 and 4, our team of five encountered difficulties in aligning on the visual system for the project.

CHALLENGES IN VISUAL CONSENSUS

The complexities stemmed from the unique nature of the portal, which blended sustainability and gamification, unfamiliar territory for us all. Additionally, the absence of clear references and the client's openness to diverge from their existing website's style added to the dilemma. Our varying views are evident in our moodboards below.

NAVIGATING THE DILEMMA

To address these challenges, we explored numerous design iterations, allowing each team member to express their creative vision.

I took charge of designing the Specific Practice & Event pages. I experimented with two color schemes:

featuring a Green & Yellow palette with a governmental template, and
the other exploring energetic colors, albeit with a rougher concept.

Decisions Amid Constraints

In one crucial discussion, we deliberated sacrificing the development of admin screens to allocate more time to refine the visual design. However, recognizing the importance of completing all features within the given timeframe, we opted to proceed with building all functionalities, albeit with less polished designs. This decision, driven by time constraints, ensured progress towards our project goals despite the visual design challenges.

It Was Time to Validate Our Designs with Our Users

TESTING TWO VISUAL DESIGN DIRECTIONS

To tackle this, we created two different design styles. One had a polished and elegant vibe, fitting for sustainability themes, while the other leaned towards a fun and playful look typical of gamified platforms. We tested two user flows with one design and the other three flows with the second design to see which one worked best.

PROTOTYPING

We aimed to develop robust prototypes featuring our gameplay features to gather comprehensive feedback on the user experience. These prototypes were based on the 5 flows we intended to test.

CONDUCTING USER TESTING

We tested remotely on Zoom with a total of 6 users of varying demographics.

What Were the Findings from Our User Testing Sessions?

AFFINITY MAPPING

We recorded our observations on sticky notes, aiming to identify recurring patterns across our findings. These were categorized into positives, negatives, questions, and neutral aspects for each screen. Subsequently, we collectively voted on the suggested improvements, and updated our screens.

KEY USER TESTING FINDINGS

We got a ton of helpful feedback on our designs—some of it validated our decisions, while other bits really helped us fine-tune them to better fit user needs. Here are some key insights we gathered from our affinity map that significantly influenced our final designs:

UPDATING IA

Our 5th user test was to test our Information Architecture. We realized that all users were confused between “Habitat & Biodiversity” and “Garden Management”. So we re-structured these to be “Native Plant Gardening” and “Habitat-Friendly Gardening”

This also led to customization of categories for the Admins so that they could restructure the categories as the practices changed on the portal.

FINALIZING VISUAL DESIGN

Our users didn't demonstrate a clear preference between the two design directions. Recognizing strengths in both approaches, we collectively agreed to merge the gamified idea concept into the refine designs so that we would save time and bring the best of both.

Ultimately, while none of us were completely satisfied with the final design, we recognized the need to prioritize working on building the admin functionality over refined aesthetics for the MVP stage.

How Do We Help Our Client Secure Funding for Development?

Our client expressed a strong interest in the development of the portal, prompting us to pitch our project and gain visibility across different organizations.

SUSTAINABLE MARYLAND

Sustainable Maryland is a certification program for municipalities in Maryland that want to go green, save money and take steps to sustain their quality of life over the long term.

THE DO GOOD INSTITUTE

Our project was spotlighted on the social media platforms of the "Do Good Institute" to increase visibility and potentially attract funding opportunities.

The Do Good Institute is a bronze-certified member of the University of Maryland's Green Office Program through the Office of Sustainability. The program supports and promotes offices that are taking steps toward reducing their environmental footprint.

Designing a Robust Backend for Supporting the Portal

With our features finalized for the admin portal and our component library established, this phase was swiftly completed. We promptly presented it to our client for feedback and incorporated their suggestions into the final version. Our admin features consisted of high-level and detailed visibility, support for user-side content and admin management.

How to Streamline Design Handoff for Development?

FOUNDATIONS

We established the fundamental elements of our system for future consistency.

COMPONENT LIBRARY

We assigned a code to each of our components, facilitating reference in our documentation.

DEVELOPMENT DOCUMENTATION

Utilizing Figma’s "Development mode" feature, we provided detailed explanations of our designs alongside the screens and user flows, ensuring clear insights into functionality even without direct developer involvement.

FINAL DESIGNS & FEATURES

How can we effectively inform homeowners about the various sustainability initiatives and resources available to them?

Many Initiatives, Complex Terminology & Abundant Information

How do we simplify these complexities and ease the burden of sustainability for residents?

A platform that has a comprehensive list of all actionable and trackable practices.
Provides residents with all necessary information that is simplified and presented in a easily digestible form.
Residents can also receive daily, easy-to-follow tips for sustainable living, offering practical ways to integrate sustainability into their daily routines.

Informed by extensive domain research

Simplifying the Simplified

How can we enable easy & intuitive findability within this platform?

Segregating Practices & Events.
Categorizing practices according to homeowners pattern of thought.
Tagging all practices and events to increase discoverability.

Informed IA by card sorting & user testing

Ensuring Platform Scalability

How will the sustainability committee maintain the resident portal?

Committee can add new content as new initiatives get introduced, with intuitive WYSIWYG formats for the Committee to effortlessly create content, allowing them to visualize the content layout and placement on the screen.
Modify content to reflect newly available information.
Enable admins to make global changes like adding new categories, activity types that would sustain the platform as information changes.

Informed by client (admin user) interviews & meetings

What motivates homeowners to utilize the resources available to them?

Introducing Gamification to the Platform

How can we instill a sense of motivation within the platform?

Earn points by completing practices and events to level up.
Earn badges by completing combination of practices & events to keep trying something new.
Complete town challenges to participate in town promoted initiatives and earn bonus points.

Informed by neighborhood town initiatives research & habit-tracking apps

Gamification Strategy

How do we ensure a fair gameplay?

A system that avoids biases based on effort, time, and monetary investments.
Eliminate the negative competition that comes with leaderboards.

Informed by research papers & personas

Gameplay Design Scalability

What happens when the resources on the platform are exhausted?

Add more levels as residents earn more points.
Unlimited town challenge badges to have a sense of continuity at all times.

Informed by gamification strategy & need for long-term adoption

How can we track homeowners' sustainability efforts?

Monitoring resident activity

How do we know when a resident has completed a practice?

Introducing simple proof of submission mechanisms that make the approval process easier for residents and the sustainability committee.

Informed by client needs & admin design references.

Townwide Performance Dashboard

How can administrators gain insight into the overall performance of the town?

Provide real-time insights into various areas of the town, highlighting both strengths and weaknesses in the sustainability plan.
System also proactively sends updates to enhance residents' experience and keep the platform dynamic and engaging.

Informed by gamification strategy & clients need for alignment with Sustainable Action Plan

Granular Data Exploration

How can administrators delve into specific house, practice, event and challenges datasets for a detailed analysis?

Maintain datasets for all the metrics we’re tracking that can be analyzed individually when needed.
Provide real-time insights into various areas of the town, highlighting both strengths and weaknesses in the sustainability plan.
System also proactively sends updates to enhance residents' experience and keep the platform dynamic and engaging.

Informed by dashboard data visualizations techique & client needs

How can we shift sustainability from relying solely on external motivation to nurturing intrinsic motivation?

Visualize Impact

How can residents see the impact of their actions to drive intrinsic motivation?

Residents can track their sustainability journey over time, observing their progress through the history of sustainable practices they've engaged in.
Witnessing their impact on the overall sustainability of the town further inspires them to contribute.

Informed home page design by user testing

Creating a Community

What happens when motivation through a reward system eventually fades?

Creating an empowering community where people with varying levels of understanding about sustainability can come together to share their ideas and insights.
Enable residents to pursue their sustainability goals and aspirations, fostering a sense of accomplishment and belonging.

Informed by client meetings & studying user motivation through domain research

Adaptable Engagement

How can we ensure that the community accommodates diverse users with differing levels of sustainability knowledge?

Residents utilize the portal to pursue diverse aspirations, and the design accommodates their preferred level of engagement.
Experts have the opportunity to share their knowledge and assist their neighbors, while novices can learn from the experiences of others in the community.

Informed by designing for diverse user groups & Personas within UPark community

My Learnings From This Project

Key Lesson: Project goals can evolve, which is natural. While our original objectives remained intact, they expanded beyond our initial vision. This expansion was possible due to deep exploration of the problem domain and thorough research, laying a strong foundation for our designs and client interactions.

Accepting Constraints: Not every brilliant idea can be realized within constraints. For example, our concept of virtual plant avatars for each house, showcasing a community garden for UPark, was compelling but too complex to implement given time constraints. Thus, we prioritized building core features of our system. Similarly, we had to make decisions like locking visual design, even if we weren't entirely satisfied, due to time constraints.

Client Engagement: Proactively seeking feedback from our client became essential. Despite their general satisfaction with our work, their minimal input prompted us to actively involve them in our process, ask more questions, and express our concerns during discussions.

Collaborative Work: Working in a team brought both benefits and challenges. Diverse perspectives enriched our decision-making, but also led to prolonged discussions without clear resolutions. We learned to divide work more efficiently based on roles and empower leads to make final decisions or vote on contentious issues.

I genuinely enjoyed every moment of working on this project. I'm eager to continue exploring and contributing to more sustainability projects in the future.