The Discover feed
Dashboard.Earth
Mobile app
Dashboard.earth helps users take local, direct action to combat climate change.
The environmentally-focused app allows people to find local, city-based initiatives, manage actions, and track impact.
My Role: Product Designer. Responsible for end-to-end product design, ideation, user research, design system foundation, prototypes, and usability testing.
Team: Product manager, Software manager and CEO
Tools: Figma
Technology: React native
Context
PROBLEM
Climate change can feel overwhelming. If NGOs can't prompt individuals to take direct action, the movement will lose momentum.
If communities don't know how to make a difference, they'll miss opportunities. If they can't see how individual actions contribute, they could lose the motivation to act.
GOALS
Address climate change locally, one action at a time. By prompting actions and rewarding users for efforts. Everyone can feel good about making a difference.
To design an app for folks to discover green initiatives and manage environmental actions. All while tracking their impact, both individually and collectively.
TARGET AUDIENCE
Planet defenders: People committed to climate action.
This persona is mindful of their carbon footprint, is environmentally conscious, follows and loves nature.
They want to do more for the planet and endeavour to be the change.
Solutions overview
The Discover feed
Main features
DISCOVER FEED
Everyone can combat climate change.
Knowing you're not in the fight alone is a huge part of the battle.
This section is both scrollable and colourful. Users see opportunities to take action, combined with their friends' updates.
The Discover feed allows users to explore new projects and be inspired by others.
The To Do list
Main features
ACTION MANAGEMENT
Getting projects done: the Do list.
Nothing feels better than checking things off. With the Do list, users can find committed actions, view their project's history, get reminders, and mark tasks as complete.
They can also view saved events and receive reminders.
Impact
Main features
IMPACT TRACKING
Progress is motivating: Getting inspired by the big picture.
When users track their direct impact, they can see how this affects the collective, too. They're not siloed and can see how their actions matter.
Relatable metrics help to visualize this impact and allows users to easily understand the metrics.
Process
DISCOVERY
Stakeholder interviews: Getting a varied perspective.
I started with stakeholder interviews to understand Version 1 of the app.
For varied perspective, I included everyone from Product managers to the CEO, plus external advisors and partners.
Findings: With the first release, user engagement was low.
Process discovered: The product team had interviewed NGOs, potential users, and friends and family.
Research about how to affect behavioural change had been undertaken.
Planet defender
PERSONAS
Based on user interviews, the product team identified three different personas, with planet defenders being most relevant to their business.
Heuristic evaluation of version 1
Map v1
Heuristic evaluation
FINDINGS
After conducting a deep analysis of the app, user pain points, user goals, and business goals, I identified the following issues:
Version 1 was designed with features that primarily met the needs of NGOs. A map displaying users' actions was meant to convey community; however, it primarily helped NGOs measure the impact of each neighbourhood.
RECOMMENDATION: Focus on users' needs. My hypothesis was that users want to see their friends and their actions in a visual manner. As a feed, localized actions could be accomplished with an action-based proximity prompt.
Actions v1
Heuristic evaluation
FINDINGS
Actions were divided in separate tabs: completed actions were on the map, while opportunities were in a separate tab.
RECOMMENDATION: Creating one feed to display both past and present. This would reinforce social proof and make it easier to find new actions. The unified feed could also be searchable and filterable.
My Dashboard v1
Heuristic evaluation
FINDINGS
Social recognition, like claps or kudos, is great. But it's not enough to keep users engaged.
RECOMMENDATION: Results are what's motivating. Displaying ‘your individual impact’ and ‘the collective impact’ would increase user engagement.
The redesign
New Information Architecture
INFORMATION ARCHITECTURE
I tackled the Information Architecture based on issues identified in the heuristic evaluation, personas, and research completed.
My main goal was to increase motivation by giving users more control. This, in turn, would generate more engagement.
During this process, The Do list feature for recurring actions emerged, allowing users to manage their projects.
White boarding
IDEATING SOLUTIONS
Both User Stories and User Flows were created as a base to ideate and design the wireframes. Workshops with the remote team were conducted via Fig.Jam.
The interactive wireframes clarified the flows for the team, and helped validate our hypothesis with external advisors.
This resulted in clarified functionality and specs, which confirmed feasibility with the dev team.
Foundation
UI DESIGN
Building the style guide: the team library foundation.
Creating new typography, along with a colour palette and icons, were the basic foundations for building a team library.
I created UI components in tandem with designing the HD mocks, -- all one screen at a time.
PROTOTYPE
Maximizing usability and the user experience.
Once the screens were completed, I worked on some basic transitions. Most importantly, I focused on reducing friction in the user flows.
Both the 'Do' screen and the 'Impact' screen were simplified during this process. The list and map views were de-scoped from those tabs.
Interviews and testing
Interviews + Usability Testing
USER INTERVIEWS + USABILITY TESTING
Once the HD prototype was approved, I conducted user interviews and tested the proposed new features.
I conducted 12 interviews:
8 women, 4 men (Age range 22-45).
8/12 were planet defenders.
We wanted to understand:
If the new structure was invisible, yet clear.
What new features were helpful.
If adding an action to the To Do list was clear.
Which new features resonated.
How they'd describe the app to a friend.
What would motivate them to return.
Insights from interviews
Expectations for customization:
Most participants assumed and wanted personalization: My interests. My friends. Our impact.
The basic expectation for this is high.
Individual plus collective:
All participants liked seeing their own impact and the impact at a city level. Tracking this was most relevant to them. It made the app feel meaningful.
Participants were also interested in meeting new people with similar interests. This would motivate them to return.
The interviews gave the team confidence to move forward with tracking the Impact of actions. With this feature, they want to create more engagement.
Version 1 of the Impact screen was released as a first test.
Accessibility tests
Colour contrast
Based on WCAG guidelines, I adjusted the color contrast and created a new typography and color style guide.
I simulated 8 different forms of colour blindness during this process, to ensure accessibility.
Implementing touch target size standards
Sizes were corrected based on the following criteria:
Apple touch devices
Android touch devices
WCAG
Established Alt Text generator practice
The following information was added to generate Alt Text:
Whether the image is informative / decorative
Image title
Image description
Final screens
Closing thoughts
Start with a stakeholder-informed processes
I started with stakeholder interviews, giving them a role in design processes and decisions. From participation in working sessions to collaborating on design reviews and sprints, they have been active participants.
Balance design and high-level priorities
Being the first designer in a start-up is exhilarating and challenging. As an early member of the team, I have a great amount of influence and ownership of the business successes and failures.
I have been educating stakeholders about my role and responsibilities and that of the Product Manager. Contributing to the company vision is a privilege, but can distract from the actual design. Focus is paramount when there are so many competing priorities.
My responsibilities also include setting-up design processes and best practices, such as design sprints, weekly design reviews, design documentation, workflow in the Product team, and setting up Figma / the team library for future designers.
Ensure user-centric language
Every organization has their own terminology. In this case, the initial language and the product strategy are related to the NGO’s perspective. It has been a challenge to speak from a user perspective and define a language that speaks to the end user, rather than to the NGO partners.
However, the challenge starts with the message at the NGO level. A communications and marketing team is being created to address this challenge and support the NGOs.
Engaging with users to create environmental change
Ultimately, while Dashboard.Earth is a tool for users to feel more engaged in making environmental change, it is also platform that provides tools for NGOs to reach their constituents. Their message has to be compelling and consistent across all channels, while being mindful of its users.