The Design of Lorax: Helping Communities Tackle Climate Change

The Lorax product design demo.
  1. If an individual reduces their own carbon footprint to 0, that’s a total impact of 0.0000000003% on global carbon emissions (The Nature Conservancy & Our World in Data, 2021), which is negligible.
  2. Individuals still have the power to create chain reactions that impact the ways their friends, communities and governments react to the climate crisis, which is crucial to solving the climate crisis.

User Personas

So who does Lorax target? These personas indicate the spectrum of users on the environmentally-aware scale.

Jessie Perez: Ultimate Environmental Activist

24-year-old climate activist, Female, Single, Brooklyn NYC, Degree in reporting and environment

  • Actively lives sustainably (commuting, vegetarian, zero-waste)
  • Runs meetings and organizes protests to bring about climate awareness
  • Runs a podcast, YouTube, and Ted Talk series where she reports on climate change solutions

Joanna Simpson: Learning about sustainability, asking how to help

32-year-old marketing specialist, Female, In A Relationship, San Francisco CA

  • Expanded knowledge through podcasts and books recommended by climate activists
  • Trying to live sustainably (plant-based diet, reduced personal waste, shopping locally)
  • Would like to involve people in her circles to live more sustainably

Bill Irving: Interested, but not sure where to start

36-year-old automotive salesman and father, Male, Single Parent, Calgary AB

  • Limited knowledge about climate change, but scared about what will be left for his daughter
  • Motivated by his daughter to learn more about what he can do to live sustainably
  • Unsure where to start or what to change first

Sam Choi: Nonchalant, minimally tries to be “green”

21-year-old student, Female, Single, Waterloo ON

  • Rarely thinks about the environment because she prioritizes more immediate concerns
  • Always picks the most convenient options (driving > transit, one-time use > reusable)

Delon Wright: Indifferent about environmental issues

26-year-old IT Technician, Male, Single, Sacramento CA

  • Unaware of climate change
Empathy map describing Sam Choi’s values and mindset.

User Interviews

We interviewed 6 unique users during the first few weeks of the project. The most important demographic factor we considered was how environmentally aware the user was and the extent of their involvement in environmental justice. Some interviewees aligned with solving these environmental issues, while others rejected climate change almost entirely. Our interviewees spanned the age group between 20–50 which allowed us to understand the values and needs of a variety of age groups.

Coming Up with Interview Questions

Each of our interviews took 30 minutes and we created a plan to ask questions related to 3 general themes:

  1. The user’s community
  2. The user’s sources of news and information
  3. The user’s daily lifestyles

Affinity Diagramming

Affinity Diagram from our initial interviews, notes are clustered into groups that fall into the same theme. The different colours represent the following; green: high-level themes, red: key issue(s), blue: inferences, and yellow: literals.
  • Individuals are aware of human impacts on the planet — but only in terms of directly observable actions like littering and polluting. There is much more to the climate crisis than the visible issues our interviewees knew about, and this interesting insight pushed our product to provide more transparency and knowledge about the crisis.
  • There was a lack of community within our interviewees’ local neighbourhoods. This was a crucial, non-obvious discovery because it highlighted early on that a community-driven approach to sustainability may encounter additional hurdles if neighbours do not interact with each other in the first place.
  • Interviewees felt helpless in their ability to make a positive impact on the environment and believed that corporations hold the key to solving the climate crisis.

Work Models

We focused on creating two different work models, a Sequence Model and a Cultural Model.

Sequence model focusing on the customer journey of purchasing everyday items.
  • Lack of convenient options in one’s neighbourhood,
  • Lack of information about which products are sustainable and where to locate these products
  • The importance of product recommendations and acknowledgements from friends
  • The user is much less inclined to travel farther away to purchase the same class of goods
  • The user can not find the recommended product (which was a sustainable option) and instead bought a product with wasteful single-use packaging
  • The user was unsure about the packaging and threw it in the garbage, assuming it was single-use only
Cultural model for a persona 1 or 2.
  • Conflict of self-interest vs. what’s best for the environment
  • Lack of discussion on climate topics amongst friends and family, news outlets, and in politics
  • Expensive sustainable options with “green premiums” resulting in a high barrier to entry to live sustainably
  • Political polarization regarding the validity of climate change
  • Pollution corporations constantly placing the blame on individual choice
  1. Enable individuals with enough information and motivation to make informed sustainable decisions
  2. Provide a platform for users to participate in local communal opportunities that tackle climate change
  3. Get people to become more connected and communicative with their community

Initial Designs

We initially synthesized our research into 5 main features: Donations, Initiatives, Shopping, Gamification, and Social Feed. We specifically chose these features to allow individuals to live sustainably, to see their impact, and to be connected to their community.

Design Arguments

Starting with design arguments, we had to figure out the purpose and impact of each feature. We determined the main problem that each feature tacked along with the solution that our app would provide.

Design argument for the Community Initiatives feature.

User Stories

With the design arguments finished, we wrote user stories to describe what we expected the user desires to be for each feature. We took inspiration from our design arguments and user interviews to formulate realistic and relevant user stories.

User story for the Social Feed feature.

Crazy 8

Our Crazy 8 brainstorming session allowed us to quickly jot down 8 different types of layouts for each feature after discussing what we wanted on the app and what behaviour the features should have.

Crazy 8 brainstorm for the Shopping feature.

Storyboarding

Likewise, we took into account the overall purpose and goals of the users and created storyboards for each feature. The finalized crazy 8 design and user story were used to derive the context of the scene. We looked at the circumstances in which the features would be used and drew these scenarios.

Storyboard for the Donations feature.

Initial Sketches + User Flows

At last, we made our first sketches, linking them together to create a user flow for each feature with the rough views from crazy 8s, storyboarding, and our original problem statement in mind.

Initial user flow sketch for the Shopping feature.

Paper Prototypes and Evaluation

Based on our initial designs, we created paper prototypes — sketches of individual screens for each feature along with their corresponding input elements and state changes. The goal of the paper prototype is to be able to perform many iterations of our design based on user feedback quickly and efficiently. Each feature has its own goals, tasks, and results.

Shopping Feature Case Study

Paper prototype for the Shopping feature.
  1. Search for a category of product alternatives (e.g. cars, household items) and select an appropriate alternative
  2. Find more information about a product alternative
  3. Allow users to track products they have purchased
  • Ensure the user knows how to navigate the product category page and search features
  • Ensure the user knows how to interact with the various help buttons and detail panels on the item page
  1. Users did not like the category view, and would rather have the product list view as the home page
  2. Individuals prefer searching to scrolling when looking for a specific category
  3. Better clarity on messaging and interactive components like buttons and question mark indicators
  4. Ambiguity with purpose, icons, measurements of G scores
  5. Discrepancy between opinions for viewing photos, some people like carousel, others preferred thumbnails
  • Prompted us to merge the category and product views together onto one page
  • Prompted us to emphasize the ability to search for products or categories
  • Suggested that we should make our components more unified and use clear language
  • Suggested for us to carefully examine the options but not spend too much time on it and just make the final call

General Evaluation Results

The following are the overall themes from our feedback:

No design is perfect.

We quickly discovered that as we conducted our paper prototype interviews. Our designs were less intuitive than we assumed and our interviewees also had conflicting opinions.

Design Iteration

Based on the feedback from the paper prototype sessions, we identified several key areas where our designs could improve. From a high-level, we wanted our many features to mesh together, creating a unified experience.

Paper prototype of the home screen of our Gamification feature.
Paper prototype of the home screen of our Alternatives feature.
Paper prototype of the home screen of our Initiatives feature.
Paper prototype of the home screen of our social feature.

High Fidelity Prototypes and Evaluation

Homepages for our final 5 features.

Goals for High Fidelity Evaluation

For the high fidelity prototype, we translated our paper prototype into Figma designs. Having put our paper prototypes through extensive testing, we created two goals for our high fidelity evaluation results.

Heuristic Evaluation: Heuristics

The heuristic evaluation allowed us to get experts to evaluate our app and provide feedback. To do this, we chose 5 categories and created a set of tasks for the user to go through.

  • Ensure that features make sense for beginners and new users, providing a positive experience for them
  • Allow us to understand whether the user has sufficient/appropriate amounts of signifiers and feedback
  • Allow us to understand whether the features provide the right amount of information and guidance on each screen to users
  • Ensure that relevant information is highly visible
  • Ensure standards such as date and time conventions (MM/DD/YY vs DD/MM/YY) are unambiguous
  • Ensure labels, features, and icons are clear and consistent
  • Determine whether the language we use is clear and concise for our users
  • Ensure that our users understand the info and directions in our app

Heuristic Evaluation: Tasks

  1. Make a donation to “Tree planting in Vancouver” and check your Social feed for others’ reactions to your donation.
  2. Look at the sustainability details for a Tesla Model S. Assume you have purchased one and have a receipt, then record your purchase in the app.
  3. Look for initiatives happening in Waterloo and find the “Tree Planting — Waterloo Initiative” and register for July 17. Then assume you have participated in the event, and record the total number of trees planted.

Heuristic Evaluation: Results

Through the heuristic evaluations, we learned that we needed to focus on the heuristics of Consistency and Flexibility & Ease of Use. This translated to a handful of improvements that we added to our app design.

Cognitive Walkthrough: Tasks, Results

For the cognitive walkthrough, we gave participants 3 main tasks to cover the usage for the majority of features.

  • Almost all participants intuitively understood how to navigate the app and go through the donations payment flow.
  • The only failure stories that appeared were concerning the credit card details because the prototype design made it seem as if the credit card information fields were not editable, leaving users frustrated in this final crucial step.
  • Across all participants, they successfully recorded their green purchase.
  • The only failure story was that participants initially used the search bar to find the Model S, however, they were still able to complete the task after looking around the app.
  • Testers had some trouble with this task. One tester’s mental model was that it was logical to log initiatives in the profile page, having missed the past initiative tab.
  • Once guided to the tab, some testers also could not see the past initiatives feature because it was not prominent enough.
  • However, after minimal guidance and pointing out specific features their eyes missed, all participants were able to successfully complete the task.

High Fidelity Design Changes and Iterations

Our primary goal was achieving a visual design that resonated well with our target users, based on the heuristic evaluation and cognitive walkthrough feedback. We polished up some pixels and made the copy (titles, feature names, initiative names) consistent throughout the app. Through the following iteration changes, we accomplished our goal.

Before and after: larger font sizes and deep links for posts on the Feed.
  • Allow users to “learn more” about a specific donation or initiative that a friend did and deep-link them directly to the donation/initiative page
  • Standardized the font sizes on the entire app (not only the social feed), making sure that every component was readable and large enough to be clear
Before and after: better empty states and clearer prompts to search for initiatives.
  • We removed additional unpleasant whitespace and extra unnecessary pages that the user had to click through, simplifying the sequence that the user goes through
  • Dates automatically populated the logging form to tie together the registered event and the past event logging, allowing them to focus on impact and results more than menial details
  • User logging difficulties motivated us to change the user flow to be more concise and enticing. Then we interviewed more people after these changes to ensure that they were a step in the right direction
Improvements to the Donate page with a “Learn more” button that displays the transparency report.
  • Included a “Learn more” button, for users who are curious about exactly how their money will be used which will show users a pie chart displaying where the portions of the donations are going (activism, marketing, tools, etc.)
  • Used more indicators for filled out credit card fields, showing users what has been inputted
Before and after: simplified view of attributes with logging and alternatives for Shopping.
  • Adding an info button describing how green score is calculated
  • To replace the “wall-of-text”, we added icons, stats, and attributes of the item for improving user comprehension
  • We clarified the logging of the purchase and tied it together with the gamification, unifying this feature with the rest of the app
Before and after: sleeker design and numerical user rankings on the leaderboard in Profile.
  • We ranked the leaderboard and highlighted the user placement on the leaderboard

Conclusion

The process of designing Lorax from scratch was exhilarating. Surprisingly, there was a lot more research and iteration that went into the process of realizing our conceptual ideas. Along the way, new knowledge gained from user interviews and research humbled us and motivated us to continually address our biases and shape our vision to fulfill the ever-changing requirements.

References

Ritchie, H.; Roser, M. (2020, May 11). Greenhouse gas emissions. Our World in Data. https://ourworldindata.org/greenhouse-gas-emissions.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store