Earth Hero IA Redesign
Sprint DEMO 8 : Feb 3, 2023
FINAL DEMO PRESENTATION
+
Introducing Earth Hero Mobile App
Earth Hero provide tools and ideas to empower all who want to reduce emissions, improve lives and care for our shared planet.
We believe a billion compassionate activists can restore healthy Earth where life can thrive. Therefore, we are motivated to inspire people and their communities to join the global climate movement. We help people to effectively respond to climate emergencies while strengthening their resilience and quality of life.
Problem Statement
The Earth Hero app's main navigation information architecture could be better organized and structured. It is an opportunity to increase user engagement and retention rate, especially for new users, since it currently sits at 46%.
Project Scope
Restructure the main navigation tabs and pages within the Earth Hero Mobile application to ensure an intuitive user flow and corresponds with UI standard mental models.
Project Road Map
Inventory
Sprint 1
Sprint 2
Sprint 3
Sprint 4
Sprint 5
Sprint 6
Sprint 7
Sprint 8
User Stories & Flows- Emissions
Figma here
Site map
Q&A
+
Research
User Research Report
Author: Wanbing, Alaisha, Shunit, Anna, Steve
Date: 01/03/2023
Confidentiality Notice: This document is a confidential document. Please be aware that disclosure, copying, distribution or use of this document and the information contained therein is strictly prohibited.
Earth Hero Mobile App Phase 2
Table of contents
Key Highlights
10 users in total, 5 new, 5 old, 8 tasks
Goals
Evaluate the success of the new design
Reveal
friction
points in key features
To assess which part of the new AI is successful and which not
Identify parts in the new page structure and design elements work and what doesn‘t work
To be able to prioritize action items
Test the
new IA
Methodology:
Our pool of 10 testers consisted of:
Participants were:
Of the 5 existing users:
Frequency of use varied weekly, every few months, to a few times per year.�
Specifically, our testers identified as follows.
P5
Participant Profiles
P21
P25
P24
P22
P12
P10
P9
P16
P23
New User
Existing User
Results & Recommendations�
Summary of Tasks Tested
TASK 0: Home page overview. What are your first impressions?
TASK 1: Check settings: Please show me where you would find the account setting.
TASK 2: Browse actions and find specific action.
TASK 3: Save an action: Please show me how you would save a specific action.
TASK 4: Check saved action: do you know where to see all your saved actions?
TASK 5: Add action to goals: Please show me how to add action to your goal and set a reminder.
TASK 6: Check your ongoing goals and mark action as achieved.
TASK 7: Update Emissions: Can you show me where you would update your emissions?
TASK 8: Interpret the graphs Relative Emission Graph / Emission Overtime / Emission Pie chart
Task 0 - Home Page overview
Errors | Iteration Update | Future Recommendations |
Users were unable to read yellow tags on cards, not consistent with accessibility standard | Changed tag position and color | |
A lot of information and text. There is no context for new users. Users didn't see clear CTA and were not sure what to engage first. | | Prioritize what should be the focal point on the homepage. Make it stand out in compare to other elements and reduce visual load. Make tutorials for new users introducing where to find stuff. |
“I am attracted by the four buttons under ‘What’s your impact today’ (6 users) and Action of the day (5 users)
“A lot of information, a lot of text and functions. Seems technical and complex.. my brain says 'no! do I want to read all that?
Where would you click first? What are your first impressions?
Ease of use
☹️ 1 <—> 5 😃 :
Task 1 - Check Account Settings
Errors | Iteration Update | Future Recommendations |
Weren't sure if they should click on the gear icon or the profile picture to find account setting | | Keep only one of them |
3.9
“Account Setting is very easy to find.”
“It was tricky because I wasn‘t sure whether I‘d find setting when clicking on the profile picture/name in the middle/the gear”.
Ease of use
☹️ 1 <—> 5 😃 :
TASK 2: Browse actions and find the action “Wash clothes on cold cycle”
Errors | Iteration Update | Future Recommendations |
“My Actions” was expected to be on the default page of “Actions” (instead of “Browse Actions”) | | Make "My actions" the default tab (rather than "Browse actions") when entering "Action" screen from navigation |
Make the back/exiting button more obvious on action cards | Moving the back arrow to the profile picture place and make it bigger | |
4.6
"In the action page, I would expect the default page to be my actions."
Ease of use
☹️ 1 <—> 5 😃 :
TASK 3: Save an action
Errors | Iteration Update | Future Recommendations |
The difference between “Actions in Progress” and “Saved Actions” is unclear. | | Problem in the naming "action in progress"- recommend to keep consistent line with the wording "goal". |
After saving, there is no indication where to go or access it later. | | Would like to see some sort of notification that indicates where to go for later. |
3.7
"I am not sure what the difference between add to goals and save is. They seemed the same"
Ease of use
☹️ 1 <—> 5 😃 :
TASK 4: Check saved action
Errors | Iteration Update | Future Recommendations |
User expected to find save actions under the profile picture/settings, not under “My Actions” as there are more personal and specific to the user. | | EH team can decide to include “saved actions” under profile or settings. |
3.8
Ease of use
☹️ 1 <—> 5 😃 :
TASK 5: Add an action to my goals
Errors | Iteration Update | Future Recommendations |
Cognitive overload - Prototype modified Reminder timing section, not in current app | | Place sub-text close to each header section Current app: place subtext closer to each section header to promote flow and readability |
“Great! Goal Added” does not stand out well, not as bold as current app | | Same as above |
3.9
“The Goal Added Confirmation screen has too much text/information.”
“Don‘t like to be transitioned to another screen.”�“Goal Added Confirmation screen is confusing as there is not confirmation that a goal was added.”
Prototype
Current app
Ease of use
☹️ 1 <—> 5 😃 :
TASK 6: Check your ongoing goals and mark as achieved
Errors | Iteration Update | Future Recommendations |
none | | |
3.6
“Easy to tell action is completed”
“ Likes better in the current app vs. the prototype: viewing actions completed and emissions saved in Homepage.”
“Some kind of animation would be nice"
Errors | Iteration Update | Future Recommendations |
Expected icons and graph sections to be clickable to reveal more info/options and update emissions. | | Adding styled links to the bar graph itself. |
Users were unclear about what the dotted line represent | | Meaning of dotted line needs to be clarified(e.g. Label, info icon, etc.) |
Ease of use
☹️ 1 <—> 5 😃 :
4.3
The user would expect to click on the icons or graph to update his emissions.
Task 7 - Update Emissions
User find it positive to have less information in current emission screen.
Can you show me where you would update your emissions?
Ease of use
☹️ 1 <—> 5 😃 :
Errors | Iteration Update | Future Recommendations |
Had trouble discovering additional graphs through horizontal swipe. | Add additional clues to indicate horizontal swipe option. | |
"Emissions over time" graph is found to be confusing and unrealistic. | Omit "Emissions over time" graph from the final wireframes. | Keep current version while ideating a new ways to track progress. |
The name "Gifts" for category that represents spending for consumer good is confusing. | Review the category: spending for consumer good propose and suggest more suitable name description. | |
Colors are not complying with accessibility standards. | | Review color styles to address accessibility issues. |
4.4
"As someone who does not know much about EH [the emissions pie chart is visually very interesting."
"I didn't notice right away there is an option to switch to more screens."
Task 8: Interpret the graphs
Relative Emission Graph / Emission Overtime / Emission Pie chart
Additional Observations & Recommendations�
Based on findings and insights during our project period and what was left out of scope, we noticed these were often pain points for users.
Potential Opportunities
Disclaimer
Appendix
Media
Documentation
Upon request to respect participants privacy. Contact Wanbing Zhang for details.
Q&A
+
Research-handoff Documents
Writing
UX Writing Handoff: Style Guide
https://docs.google.com/document/d/1H1ReNCDxO8q9v0WENhPZSF567bQdGeXzqKzzGJdFf4Y/edit?usp=sharing
Supplemental to the EH Language Guide
The style guide focuses more on the microcopy of the app, and is to be added to the EH Language Guide
UX Writing Handoff: Tech Fleet Phase 2 EH UX Writing Guidelines
https://docs.google.com/document/d/1OgiJYZu8Q-KU1Q7z4QzxGgVqDRko4_lAXq0Og4_R5eg/edit?usp=sharing
Writing Handoff Findings
Issues that Writing has found some issues that couldn’t be addressed this phase:
Content Inventory
New sheet in the Content Inventory containing a Country Demonym Spot Check some minor issues
https://docs.google.com/spreadsheets/d/1KvBdbNo5jKxmp4iLDeNCRsSaCWAbfoVS/edit?usp=sharing&ouid=106123562707554427046&rtpof=true&sd=true
Figma Handoff Final Copy
Reviewed the copy of the Design Figma Handoff to reflect the new writing changes
Writing-handoff Documents
Q&A
+
Design - Handoff documents
Homepage + Settings
Actions + Filter/Sort Overlay
Actions
Actions
Emissions
Design Up Next
Q&A
+
Final Q&A
+