Given free will to do any project we liked, my group and I sought to find a problem that we all felt would impact users the most. Thinking of the current evolution in climate change and the impact it has been having on individuals, we thought we needed to find a way to help users lessen their environmental footprint and live a more sustainable lifestyle.

With this thought in mind, we started our design thinking process including the following:

Empathy

To begin, we wanted to understand who are users are what their needs are. With this thought in mind we created a protopersona, which gave us a starting point for a user. We decided on splitting the persona into two, where one users was aware of the consequences of plastic usage and one is hasn’t delved deep into but is interested in reducing their plastic waste. This ultimately gave us insight into what type of user we should interview and helped us get better data back from our interviews.

So with a protopersona in mind we defined our research goals. We focused much of our efforts on the hardships of recycling , hoping to learn some commonality among users. We also generally wanted to learn why users used plastic in the first place. The answers to these questions would give us key insights that would lead to the main features in Greenswap.

What we found from our research was that the issue of recycling didn’t exist to the degree we thought it did. Instead users wanted to find an easier method of obtaining alternative options as the current world forced them to do hours of digging. Users also wanted an educational component to further educate themselves and others on our climate crisis.

This is where our switch from a recycling app to an alternatives app was initiated. We built the new concept on user research, backed by actual testimonies from users.

Definition

After outlining our key insights through an affinity diagram, our team defined our typical user who you can see below.

Daniel provides guidance in our design process, helping us refer back to our user whilst creating the app. His need to reduce his carbon footprint and learn more about the environment coupled with a lack of convenient alternatives drove the features we would later include in Greenswap.

With Daniel in mind, our team needed a way to outline what his needs were and how we could help. This is how we came about making a user insight statement. Convenience was the biggest issue users faced when trying to recycle or find alternatives.

We then had to ask ourselves, how could we improve the product selection process making it more convenient for users like Daniel to have a positive impact on the environment?

This is what led us to our value proposition where we proposed a solution to Daniel’s problem. Greenswap needed to be convenient, right at users fingertips. They would also need to be able to use it while shopping at a store or browsing items online at home. This is where our scan feature was created, the main proponent in our app. Users could get recommendations for any item with a barcode at their convenience.

But how is our app different? Well firstly, their aren’t a lot of competitors out there at the moment and secondly, based on a competitor analysis, none are taking the user into account. Most apps focused on recycling or education, which while important didn’t tackle the problem at hand. This is where Greenswaps scannable feature becomes a solution to our problem of reducing users carbon footprint without having to sacrifice large amounts of time researching for alternatives.

Ideation

Now with a solid defined problem, our team needed to brainstorm solutions. There’s many ways one could go about this, but our team wanted everyone’s input involved so an “I like, I wish, what if” brainstorm session was what we felt would best fit our needs. Not only would everyone’s input be taken into account but this specific brainstorming exercise gets a designer into the head space of the user persona, in this case Daniel. While conducting the exercise, we all thought about what Daniel’s wishes, needs, and dreams were.

Once we compiled a good sized list of ideas, we dot voted on the ideas we each felt tackled the problem the best. We did several rounds of dot voting which allowed us to prioritize and negate duplicates. Once done, we still had so many great ideas and we needed to find an alternative way to prioritize certain features. This led us to creating a feature prioritization matrix where we defined each idea by it’s impact level and the level of effort it would take to accomplish. Since this sprint was short, we decided to focus on features with High Impact and Low Effort.

And this is how are features came to be. Users wanted options, education, and convenience. Sticking to our original scanner feature, we added on a search that would have both a search bar and category feature. We also wanted to add an educational piece to help users educate themselves and those around them.

Now that we had our features in mind, we needed to start thinking about the logistics of the app. How would a user use Greenswap?

The team worked together to create an overview of a users path while navigating through the several features we wanted to implement. Below you can see a snippet of our user flow. It showcases the 3 main features, searching for an item, scanning an item, and educating others by sharing your purchases.

However, with advice from our mentor/instructor, we decided to scrape the last feature and rethink it. How could we educate our users while still making the main purpose of the app to scan and buy items?

Prototype

Our answer came from our low-fidelity wireframes. One of our team members added articles to their homescreen while another added a fact of the day element. Both spoke to the users need for education.

In terms of other features, many of us had similar ideas and felt comfortable working together to design Greenswap.

After settling on a singular app design, we got to work on our mid-fidelity wireframes. Once done, we started the testing phase where we tested four tasks: sign up, scanning an item, finding an alternative, and searching from an item by category.

We quickly learned that the menu we grew to love was not working for users. Many couldn’t figure out the interface, it just wasn’t intuitive to them. We decided to scrape the idea and go back to the drawing board.

After settling on a new menu, we needed to decide on the look and feel of the app. We wanted to keep the feeling organic, modern, and calming. Users needed to feel good about using our app.

With this in mind, we picked cool toned colors and calming imagery to invoke a sense of serenity. We also picked a crisp Lato font to modernized the look so users young and old would feel security while using the app. In regards to the logo, we wanted something that spoke to what Greenswap was all about - buying eco-friendly alternatives. Using a bold green, and emphasizing the “S” shape, we sought to create a design users could not only remember but trust.

After finishing up our style guide, we applied it to our wireframes to create high-fidelity versions. Below you can see an onboarding screen, the homescreen, and our search screen. You can also see our updated menu, a much more intuitive version where users can easily access the most important aspects of the app.

In this wireframes, you can see our scanning feature in progress and the user path to picking an alternative. We opted for a barcode scanner rather than a VR scanner because we felt the application of it would be easier on the developers. On the information screen, you can see and Item Breakdown where users can learn more about the plastic product they are using. After reading about it there’s a CTA that leads the user to Find an Alternative. Under the alternatives screen, users can compare different alternatives and find one that meets there needs, greatly decreasing research time.

Once we felt Greenswap was ready to be seen, we tested it. We used the same four tasks as the first round of testing as those specific tasks were an important piece to the apps functionality.

However this time we added an A/B testing portion to our user testing schematics to see if having two of the same CTA was confusing to users. We felt added them would further convince the user to search for alternatives but we wanted to make sure it didn’t confuse users.

Ultimately we found users didn’t have problems with the two CTAs but we decided to to simplify the design for aesthetic purposes.

In addition, there were some other issues that arose from testing including users not being able to purchase an item, having a hard time using the search feature and understanding the item breakdown. There were bug issues in our search to purchase path and this gravely impacted user testing results. Moreover, the item breakdown was intuitive to all users and told us we needed to explain the meaning of each descriptor.

We’ve already made some changes to the app as you saw in the high-fidelity wireframes. However there is more we want to accomplish. This includes creating a front end landing page. Because this was a two week sprint, the time didn’t allow for the development of one, but we definitely see the importance of creating one. We’d also like to expand on our item breakdown, particularly on the item breakdown section so users can learn more about the items they are using. We’d also like to make a feature where you can compare how alternatives items line up to the items you are currently using. And lastly, we liked to personalize the app for users so we’d like to make a profile/settings section where users can customize their profile.

And that’s Greenswap! If you have any further questions about the development of this project, please feel free to contact me at email: isabella.i.rosales@gmail.com