leafup. | Design for Change Finalist

Designing a mobile app to promote up-cycling through a gamified experience that fosters a community of inspiration.

Role

User research
Usability testing
Wireframing
Prototyping
Visual Design

Timeline

March 1st -19th, 2021
(2 weeks)

The Team

Janice Chen
Vyomesh Iyengar

Summary

In 2 weeks, collaborated over Figma and synced up every few days to review our individual progress. Our team was able to make it to the final 10 out of 60+ teams and present live in front of judges, fellow competitors, and industry experts!
⎯   ✾  ❀  ✽   ⎯

Problem Discovery

Challenge statement

"How might we create social transformation that shifts users towards greener behavior and sustainable practices?"

Defining our problem space

Breaking down the challenge statement, "social transformation" stood out the most, and we set out to better understand what motivates and inspires people to change. As a starting point, we reflected on our personal experiences and after discussion, concluded that to incite a real social transformation, it needs to start at a granular level with each individual before any large-scale change can take place. We researched common everyday activities to focus on and came up with these potential solutions:
  1. A campaign that reduces meat consumption through suggesting protein alternatives and social challenges.
  2. A mobile app designed to be a virtual refrigerator to help users with food waste management with suggested recipes and expiration alerts.
  3. A platform that promotes repurposing old items through community inspiration and gamification.
We ultimately decided on the 3rd idea since it has the most optimal ease of use and a simple experience with familiar social patterns does not require a lot of decision-making from the user. Most importantly, individual behavior is primarily influenced by one's environment, including other users, which results in a community influence that has a huge impact on individual motivations.
⎯   ✾  ❀  ✽   ⎯

Research

Secondary

With further research, we came across the pre-existing concept of upcycling.

creative reuse [repurposing] - transforming unwanted and unused materials into new products of greater quality and utility

We chose to take tackle this problem because it is applicable to a wide audience and can easily help alter social behaviors without additional resources. We looked into the status quo of upcycling and found some interesting statistics, most notably:
We chose to take tackle this problem because it is applicable to a wide audience and can easily help alter social behaviors without additional resources. We looked into the status quo of upcycling and found some interesting statistics, most notably:
The main insight gained from this research was that upcycling has already been introduced by some big companies and there is a small percentage of adults who are familiar with this concept. This showed a lot of potential for further encouragement of this practice, however, there was still a gap in upcycling from individuals which we set out to investigate with users.

Primary

User surveys

We created a quick questionnaire with the goal of grasping a solid understanding of people's familiarity and gauge their enthusiasm towards upcycling. Following this goal, we structured our questions to gain insights into user demographics in relation to their current exposure to upcycling. In addition, to better guide our ideation process, we presented scenarios and information channels for them to rank to have a clearer idea of their present motivations and influences.
The form was sent to multiple university communities and our local neighbourhood communication channels, receiving a total of 35 responses.
From the summarized data, we had 2 major discoveries:
Discovery #1 - information gap
We found a discrepancy between those who upcycle and those who are willing to do so - almost 80% of respondents were willing to upcycle or donate but lacked the necessary resources and information to do so.

Outcome: This discovery influenced the visual design of our application to take on more modern design patterns and copy tailored towards this age group.
Discovery #2 - demographic target
We determined our audience group - young adults.

Outcome: This discovery influenced the visual design of our application to take on more modern design patterns and copy tailored towards this age group.

User interviews

We then conducted user interviews with the goal of understanding people's attitudes and experiences in order to further gain insight into their motivations and obstacles towards upcycling. Our 3 interviewees comprised of a high school student, an undergraduate student, and a young adult.

Biggest obstacles

Access to information
There is a lack of information pertaining to upcycling which causes hesitancy to start among users.
Inconvenience
Users are unaware of what items can be used and the time needed to create new products.
Lack of ideas
It is difficult to come up with ideas for creations based on the items users have which adds to the hesitancy to try.

Biggest motivators

Friendly competition
Users are motivated by competing against their friends, and strangers, and gaining inspiration/ideas based on others' creations.
Indication of impact
Visually seeing any real impact they have made is a motivator to make more creations and give back.
Saving money
Users tend to keep packaging materials and reuse them for other purposes as this retains quality.

User persona

After consolidating our research from the questionnaire and interviews, we created a user persona to help us better design for our main audience.
Focusing on this persona, we were able to consolidate some features we wanted to design in our mobile experience:
  • Leaderboard - a point-based system that rewards users for every upcycled creation to incite motivation and encourage more participation
  • Inspiration feed - provides users with a constant flow of ideas to overcome the hesitancy to start, presented in a variety of content types (i.e. photos, blogs, videos, etc.)
  • Your impact - a visual experience that displays the user's contribution in equivalence to reduced CO2 emissions and the number of trees planted
  • Daily interesting facts - provides users with surprising environmental facts and simple green practices to close the information gap
⎯   ✾  ❀  ✽   ⎯

Ideation

Initial wireframe sketches

We began sketching out wireframes for key features and pages.

Style Guide

Next, we created a style guide based on our goal to get users to think more of the environment which is why we focused on earthy colours. In addition, we paid extra consideration to ensure accessibility and inclusivity throughout our experience. Our final colour palette achieves that as all of the colour choices meet the WCAG standards.

Mid-fi mockups

With our sketches and style guide, we took them to Figma for some mid-fi mockups.
⎯   ✾  ❀  ✽   ⎯

Usability testing

To get insight into the effectiveness of our application, we conducted a usability test with 3 of our questionnaire respondents: a varsity athlete, an undergraduate student, and a middle school gamer. We briefly introduced the problem and our approach for context before diving into the application. Some user-led questions we asked included:
  1. What is the first task you would do?
  2. Is there anything you find hard to understand?
  3. What is your thought process when seeing this screen?
  4. How would you expect the page to change based on your actions?
  5. What do you like/dislike the most?

Key findings

What users enjoyed
  • Most popular creations in the community was great for ideas
  • Leaderboard was really exciting through positive initial reactions
  • Seeing real impact made users feel more motivated and excited to repurpose more
What users wished was better
  • Metrics for comparison to relatively understand the impact they've made
  • More information on the leaf point system and points are gained
  • Clearer descriptions and iconography to understand each call to action
Some of the major changes in our UI include breaking the progress bar into smaller increments for more achievable bench marks, emphasizing the social/friends activity section on the home page, and adding the sharing functions for the impact summary page.
⎯   ✾  ❀  ✽   ⎯

Final design

Introducing the leafup. Mobile Experience

Find the complete Figma prototype here.

Informative onboarding

Users can get to know the key features and begin to build excitement. They can set their location and experience level with upcycling which will allow for more curated content in their inspiration feed.

Personalized home feed

The home feed includes sections of content in order of importance. They are first met with a daily fact about the environment, followed by their leaderboard standing, and finally relevant friend activity on their new creations and posts.
Home feed

Find inspiration from millions

Get inspired by millions of people and their creative ideas, delivered through a variety of supported formats. Read short blog articles, watch videos or live streams, search by material types, and choose the level of difficulty level on hundreds of creations!
Inspiration feed

Leaf point leaderboard

Users can collect leaf points for their creations which are reflected on the leaderboard. They can view their ranking amongst friends, various categories, and globally - keep repurposing more items to move up the leaderboard!
Inspiration feed

Real creations, real impact

In the profile, users can view their creations, saved collections, and impact. The impact page gives users a concrete measurement using digestible metrics of their contribution which they can save and share with their friends to further promote repurposing.
Inspiration feed
⎯   ✾  ❀  ✽   ⎯

Reflection

Key Takeaways

Attention to detail in user surveys

An issue we ran into was unusable data as some instructions in our questionnaire were not descriptive and clear regarding how we wanted respondents to rank scenarios. The wording and direction of these surveys must be really clear since we don't have control over who sees it and how they might interpret the question. In the future, we should be specific whenever collecting primary research to limit any ambiguity for users to prevent misinterpretation and gain more accurate results.

Importance of user research

Over our 2 week timeline, we spent a little over a week on just problem discovery and research alone. While we were concerned about timing, in the end, spending that time on those key initial steps was able to help us gain a comprehensive understanding of the problem. It helped us design efficiently, justify our design decisions, and answer judges' questions with ease.

Benefits of usability testing

This was my first design that I had tested with users on its usability and I absolutely loved it. Being able to interact with users 1 on 1 to see their first impressions and get their real-time thoughts is extremely beneficial to the iterative process. It would be best to have multiple rounds of usabiilty testing but given our timeline, we were unfortunately only able to fit one round in.

Next steps + improvements

I would love to see our app evolve to incorporate collaborative creations to encourage large-scale repurposing amongst friend groups or even family. This would help foster a greener culture beyond the app and promote upcycling as a social activity that can generate collective enjoyment.
As well, I think more time needs to be put into fleshing out the exact details of the point-based leaderboard and how that equates to a real tree being planted. On a similar note, the same could be done to improve the impact page for more accurate results from user data within the app.