BeeGreen

BeeGreen is a mobile app that aims to empower its users to have fun becoming more eco-friendly with straightforward resources and information. BeeGreen is all inclusive, it can be used by anyone whether they are just starting out or already have some eco-friendly habits.

 

Springboard Boot Camp Project

Roles: UX Researcher, UX Designer, UI Designer

2020 - 2021

 
mobile screen captures of two screens one is a fun fact of the day pop up and the other is an actions completed over time graph

Problem:

  • It is overwhelming and time consuming to increase eco-friendly habits and knowledge.

Process:

  • To better understand the problem space I initially started looking for secondary research. Once I had a better understanding of the problem space I then found and reviewed similar eco-friendly apps that are currently available in a heuristic analysis.

  • I put out an initial screener to gather potential users to conduct user interviews with and then created an affinity map with the various information. I utilized this affinity map to create three personas as well as mapped out each personas red routes and wireframes.

  • I created paper sketches and tested for usability first. Then I created high fidelity mockups and a prototype in order to test again. Using the feedback and data from testing I iterated further on the design.

Lessons:

  • Reusing elements to increase efficiency and consistency across the platform is key

  • Initial research around the problem space is valuable to gain a better understanding and empathy for the user

  • Personas help keep the focus and empathy with the users frustration, pain points, and goals

  • For me sketching with paper and pencil make it easier and quicker to communicate ideas

Overview & Background

Although it is important to address topics such as sustainability, recycling correctly, and emissions at a global level. Starting at a more individual level is crucial for global success as individuals have a lot of power. However, where should people start? With so much information and opinions online it is overwhelming and time consuming to sift through. BeeGreen is an empowering mobile app that makes becoming more eco-friendly fun and straightforward with reliable resources and information. BeeGreen is all inclusive, it can be used by anyone whether they are just starting out or already have some eco-friendly habits. BeeGreen is my capstone project so I have taken on many different roles in the design process. From user research to creating wireframes to creating high-fidelity screens and to testing and ideating, I have done it all.

Hypothesis:

In order to solve this problem I could create an application that could be a kind of “one-stop-shop” to help users learn more, contact their local government representatives, set up and work towards eco-friendly goals, participate in challenges, share their successes and interact with friends.

 Design Process:

design process showing empathize, define, ideate, prototype, and test

Empathize

My objective was to identify potential users of BeeGreen and to identify how to increase users eco-friendly habits and knowledge. Initially, I started by researching to find what is already out there as far as resources and what are people currently doing. My research continued with screening and interviewing participants as well as performing a usability heuristic analysis on 3 competitor applications. 

Interview Insights:

  • Feel they can & want to do more

  • Prefer to see impact over monetary gain

  • Believe government would have greater impact compared to companies

  • Prefer gaining more information via bullet points rather than articles

  • Overall overwhelmed 

  • Prefer some kind of step by step instruction

Heuristic Analysis: JouleBug (closest competitor)

a heuristic analysis of JouleBug the closest competitor

Define

In order to keep the user and the empathy for the users at the forefront throughout the process I created an affinity map based on the interviews. Then I was able to create empathy maps and personas in order to bring my users to life. Based on my research I was able to define and create 3 main personas. 

Affinity Map:

affinity map of answers from interviews on eco-friendly habits

Meet Jamie, Christine, & Tiffani:

person of a person named Jamie who is not as interested or cares about eco-friendly habits
person of a person named Christine who is doing their best with eco-friendly habits but wants to do more
person of a person named Tiffani who is doing the best maintaining eco-friendly habits

Once I had a clear understanding I was able to define some key “how might we” (HMW) questions. These HMW questions were helpful in framing how BeeGreen was going to be the solution to the users problem and also was helpful in defining what are necessary for an MVP.

How Might We . . .

  • allow users to visualize their impact on the environment?

  • allow users to influence their friends and family to participate?

  • present educational information?

  • help users feel like their actions are having an impact?

  • motivate people to contact gov. representatives?

Ideate

After composing the HMW statements above, I then set out to answer and brainstorm various solutions ideas with just a piece of paper and a pencil.

Brainstorming Solutions to HMW statements:

brainstorming solutions to HMW statements

Once I had a rough idea of how the solution would be, from here I used this to start mapping out the apps information architecture as well as create red routes, rough paper sketches, and user flows. This was a really important step for being able to prioritize the screens that are absolutely critical to create a MVP of BeeGreen.

flow shows Christine going from getting started to setting her goal
the red route through wireframes shows the beginning for a new user creating an account
the red route through wireframes shows a user creating the first goal

Prototype & Test

After sketching out screens with paper and pencil I quickly made a paper prototype using Marvel Pop and conducted a guerilla usability test in order to validate the initial paper sketches before digitizing them into a more formal prototype. Once I had validated the ideas and decisions I made based on my personas, red routes, and the guerilla usability test with the paper prototype it was time to create high fidelity mockups using Sketch. For me, this was where I had some of the most fun because BeeGreen finally was coming to life.

high fidelity screens of the above red route
high fidelity screens of the above red route

With the high fidelity mockups created, I then used InVision to create a more formal prototype to perform a couple rounds of usability testing with iteration and redesigning in between testing. I received extremely valuable insight into what could be improved on and validation of other design decisions. For these usability tests I gathered participants who I initially interviewed before as they already had some context as to the background and intent of BeeGreen, as well as participants who had no prior context for BeeGreen.

iterations of high fidelity screens based on usability testing 1
iterations of high fidelity screens based on usability testing 2

Conclusion

Going through the entire design process I have learned a lot about the process as well as about myself. If I were to do this again I would probably try to focus on one or two features for the initial MVP. After having an MVP, then I could choose to add more in over time. I would also try to do a better job with scheduling so as to minimize losing any momentum throughout the design process, as sometimes I had to wait on one or two people to continue onward.

Lesson Learned:

  • Reusing elements to increase efficiency and consistency across the platform is key

  • Initial research around the problem space is valuable to gain a better understanding and empathy for the user

  • Personas help keep the focus and empathy with the users frustration, pain points, and goals

  • For me sketching with paper and pencil make it easier and quicker to communicate ideas

Next Steps for BeeGreen:

  • Continuing to iterate and test designs 

  • Pair with developers to review specifications

  • Get people to really use and interact with BeeGreen

  • Monitor various metrics on how users are interacting with BeeGreen

  • Implement A/B testing

  • Validate or update existing personas

Previous
Previous

Design Sprint