A lot of waste is produced from to-go drink containers and straws. Reducing waste and choosing responsibly sourced materials and goods are both a collective and individual effort from consumers and businesses. Ecoist is an app dedicated to develop and spread the practice of being eco-friendly.
Ecoist is an app dedicated to developing and spreading the practice of being eco-friendly. We are focused on informing consumers and promoting businesses that provide the most eco-friendly packaging. There are millions of waste produced from drink containers and straws. It can take hundreds of years to decompose and is harmful to our health and environment. We believe the 3 main agents of change are Inform, Action from Businesses, and Action from Consumers.
Reducing waste and choosing responsibly sourced materials and goods are both consistent and individual efforts needed from businesses and consumers. Changes in our daily lives can collectively have an impact. What can we do to help reduce waste and be accountable to the environment and to our health? Use Ecoist!
Introduction
Plastics are almost inseparable from our lives. Almost all the products we buy at stores, restaurants, and cafes are packaged in plastics. It is pretty much a known fact that single-use plastics are detrimental to the environment and harming the environment hurts us in the long run. However, it is true that packaging is needed for hygiene and other purposes. As the United States has been reported as one of the biggest contributors to plastic pollution, how can we continue our daily lives without polluting the environment or at least lessening the damages done?
As we were surfing through the plastics issue, the first thing that popped into our heads was all the boba and coffee shops that Berkeley had. From Feng Cha Tea House to Blue Bottle, we drink a lot of coffee and boba daily. Apparently, they create a lot of plastic waste with cups, straws, and dessert packaging. This inspired us to aim to hold people accountable for what their daily consumption of drinkables causes. We also wanted to hold people accountable to create a safer and cleaner environment. We believe that these can be done only if efforts are put from both individuals and store owners, consistently and collectively. Our application aims to inform people about single-use plastics and their impacts, encourage users to participate in and contribute to the process daily, publicize eco-friendliness, and motivate users to continue being part of the eco-friendly community.
Brainstorming with Sketches
Our design process began with a few brainstorming sessions in which we agreed upon a general project direction, then generated over twenty ideas regarding potential tasks, users, and situations. Initially, we generated a list of project ideas we felt were in line with the designated theme, accountability. After some discussion, we were all in agreement that we wanted to make an application that had something to do with environmentally friendly coffee and boba shops, as it seemed the most unique from the list we created.
In the beginning, we debated over two primary user groups that we were interested in designing the project around, using our agreed-upon idea. The core cause of this debate was the designated theme for the project, accountability. Although we had agreed on a general direction for the project, we struggled to agree on how accountability related to the project idea. This led us down two paths; on one hand, we considered designing the project with the coffee and boba shop owners as our target users, and on the other hand, we considered the consumers themselves as our target users.
In the end, we decided that we would target the consumers themselves as we felt there was a stronger sense of accountability in doing so. Namely, that each individual is accountable for helping to keep the environment clean, and that we could implement a feature in which consumers could report companies for non-compliance with the practices they claimed they used. Having settled on a target user we generated a short list of ideas surrounding this target user group, comprised of tasks and the like, which led to the following list of ideas and sketches;
Idea 1: Find a coffee or boba shop near you that is environmentally friendly
Idea 2: Scan a product to check its impact on the environment
Idea 3: Have symbols to show the different types of green initiatives a company practices
Idea 4: Leave a review for a company
Idea 5: Report a business for non-compliance with their reported practices
Idea 6: Create an account to earn rewards for shopping at environmentally friendly shops
Idea 7: Have a map of all the environmentally friendly businesses in your area
Idea 8: Learn more about a green initiative a company has
Research and learn about a type of packaging or how it is made
Idea 10: Business owners can request to register their company with the app
Idea 11: Shows eco-friendly stores, search bar, and user profile button
Idea 12: Explore recent stores and view featured stores
Idea 13: Users can redeem store-promoted or user-earned coupons at the store
Idea 14: If the store has any non-eco-friendly cups, users and click to request store owners to implement this change
Idea 15: What ways are better than donating your changes for store owners to help to transition to eco-friendly packaging?
Idea 16: Users can receive coupons and share them with friends & families
Idea 17: Isn't it better to use your own cup? - making it zero waste helps the store and the planet!
Idea 18: Of course, users can receive bonus coupons by ordering enough coffee/boba – an extra bonus if users bring their own cup
Idea 19: Each month (quarter or semester), the app will award the top-selling (eco-friendly) store by offering discounts to users and promotions to the “featured” section
Idea 20: Wikipedia for eco-friendly packaging, to educate users who want to know more about the environment
Idea 21: Yes, a stats breakdown for a particular cup used – including what it is made of, what’s composable, and stats for each of the materials
Task Analysis
After brainstorming, we narrowed down our target users to people who are eco-conscious. When we say eco-conscious, we’re describing people who acknowledge the existence of issues caused by single-use plastics, show concern for the environment, and understand the need for a change. Now that we set the target users, we wanted to draw out situations and tasks that they would realistically be in and do.
We set the initial trigger as grabbing a boba or coffee at a store. This would also be the users’ final goal. We came up with four big different situations and tasks. They are: getting information about eco-friendly, searching eco-friendly cafes, ordering from eco-friendly cafes, and calling to action (for a change).
Interaction Sketch
With the target user group selected and the tasks we wanted to implement detailed, we created some sketches to determine how we wanted these tasks to be completed.
An interaction of home screen and search functionality. Users are presented with a split design, the top section is the map showing eco-friendly stores. Users are able to pan and drag around the map to see different stores. The bottom sections are collapsed by default, showing the search bar, user avatar, links to order, rewards and wiki page, recent stores browsed, featured stores, and featured wiki pages.
An interaction of rewards screen Users can see their available points and redeem drinks using the points. They can also see the rewards they claimed in the “My Reward” tab Users can add points in two ways, using coupon codes and sending invitations to new users When the new users order their first order, points will be added to both users.
An interactive sketch of rewards, donate, and wiki page. Users are able to browse the information on eco-friendly packaging inside the app and donate changes to organizations or local shops The wiki page also consists information about of the components used for the item
An interactive sketch of the store, cart, and past orders page. The store page shows how this particular store is eco-friendly by displaying badges (compostable, solar power, etc). It also supports functionalities such as sharing the store page, creating and sending gift cards, and donating, as part of users' call to action.
Observational Studies and Interviews
With the basic foundation for our project completed, we interviewed two target users, Amber and Jim, so we could better focus our design process. Both users drank coffee and boba. Amber was already actively involved in helping to reduce waste and often brought her own cup wherever she could. Jim was interested in how he could help reduce waste and wanted to learn more about different materials used in packaging.
Target Users: 18+ humans who are environmentally conscious and obsessed with drinking coffee or boba, especially at cafes and boba shops. They wish to reduce, recycle, and reuse any way they can. They don’t feel that drinking coffee and boba should be sacrificed so they’re interested in finding cafes and boba shops that serve drinks in sustainable packaging materials.
The questions were based on ten ideas we came up with during our brainstorming with sketches session:
- Idea 1: Find a coffee or boba shop near you that is environmentally friendly.
- Idea 2: Scan a product to check its impact on the environment
- Idea 3: Have symbols to show the different types of green initiatives a company practices.
- Idea 4: Leave a review for a company
- Idea 5: Report a business for non-compliance with their reported practices.
- Idea 6: Create an account to earn rewards for shopping at environmentally friendly shops.
- Idea 7: Order from the App.
- Idea 8: Learn more about a green initiative a company has.
- Idea 9: Research and learn about a type of packaging or how it is made.
- Idea 10: Business owners can request to register their company with the app.
Our results found that our users want convenience and incentives, and they love simplicity.
- Users want convenience: Users won’t typically go out of their way to order from a greener place, and most don’t notice the packaging of their drinks. User engagement is suspected to improve when the process of reducing, reusing, and recycling is uncomplicated and requires little effort on the part of the user.
- Users love incentives: Users expressed that they were interested in receiving compensation in some form for acting on their part to reduce waste. It is suspected that user engagement would be improved.
- Users like simplicity: Users expressed that they like to be informed about the packaging but also expressed that they like it to be done in a concise way. Possibly have a rating for how eco-friendly the packaging is using symbols or rating charts.
User Personas and Scenarios
Having conducted the observational studies, we created two user personas along with textual scenarios for each, to be used for later testing, based on the characteristics of the individuals interviewed.
Description
Sydney is a woman in her 30s living in the bay area who walks around the city frequently for work. Sydney drinks coffee daily, sometimes getting a cup of coffee twice a day. Sydney also drinks boba weekly, generally at least once a week. In both cases, she does not bring her own cup. Sydney has always been conscious of the environment, stemming from a childhood spent outdoors. Having recently listened to a podcast about the impact of plastic on the environment, Sydney has resolved to cut back on the amount of plastic she uses in her daily life.
Scenario
Sydney is walking to the next location for her job on a Tuesday. During the walk, Sydney gets the craving for boba. Sydney feels depressed as she remembers her vow to cut back on her use of plastic, meaning no boba. Suddenly, however, Sydney recalls an app her friend Courtney mentioned when Sydney had brought up her desire to cut back on plastic use. As she recalls, the app helps people find coffee and boba shops that are environmentally friendly. Sydney goes to the AppStore on her phone and downloads the app. Sydney then opens the app, types boba in the search bar, and clicks the search function. The app asks Sydney if it is ok to use her location, to which Sydney says yes. The app then displays a map of boba shops near Sydney. Sydney then clicks on the different shop icons and reads through the environmentally friendly practices the different shops use. Having settled on one shop that uses paper cups and straws instead of plastic, Sydney begins making her way there, with a smile as she gets to have boba afterward.
Description
Sarah is a college-educated person in their 20s-30s. Sarah drives a Toyota Camry and loves to drink boba. Sarah knows what climate change is and also is aware that waste is bad for the environment. Sarah wants to help the environment but wants to do so without affecting her experiences. Due to this, Sarah likes to visit boba places that are close by and that also serve good boba tea. Sarah also likes to save money and enjoys using coupons. Sarah is not tech savvy, so she prefers her technology to use familiar symbols to help her navigate. Sarah is also busy so she tends to use apps that help her find her locations quickly.
Scenario
Assume that Sarah has just completed her work and is now heading home and wants some Boba tea. She opens the Boba app to find the closest locations. After she opens the app she looks for high-rated Boba shops and notices that she has a coupon for a nearby shop that also has good ratings for Boba tea quality, so she decides to go to it. The coupon states that she has to bring her own cup, and since Sarah has her coffee cup from this morning's coffee, she decides to use it. After she finds the location, she selects the button to open it in the GPS (Apple maps or Google) and drives to the location.
Wireframe
We then created a wireframe in Figma to help us visualize our app’s layout. Our primary goal was to complete the core functionalities of the app such as home, search, reward, order, share, and report. We also created components that are reusable for different pages, making the overall user experience more cohesive which lowers the learning curve.
Heuristic Evaluation
Having developed the wireframes for our application, we conducted a heuristic evaluation on them, yielding the following synthesized results.
Visibility of system status
Good
Flow of the wireframes does offer the user an idea of where they are in the process of completing tasks using distinct screens. Buttons on pages such as search, cart, and checkout are the cues to users as to what the next stage is.
Bad
None.
Match between system and the real world
Good
The few icons present do seem intuitive, for instance, the gift icon, which takes the user to the reward page Process of finding a Boba shop is similar to finding one by looking around by first searching, then viewing a summary (like posters on a window), and then visiting.
Bad
Does not draw from many real-world instances save for the menu and the icons that will be used to direct the user around. Could maybe be more interactive by adding visual map cues as to how the store is green.
User control and freedom
Good
Has a lot of cancel buttons and navigation buttons that let the user back out of actions and easily navigate around. To this end, the wireframe does afford the user control and freedom in their actions.
Bad
None.
Consistency and standards
Good
The designs used in the wireframe are standard designs found in many applications. Checklists for selecting options, standard search bars, arrows indicating navigation directions, etc.
Bad
The only aspect of the design that stands out as not being widely recognizable is the ability to expand certain pages by swiping up.
Error prevention
Good
Does seem to allow users to avoid mistakes by canceling certain actions or backing out of others.
Bad
However, the wireframe does not offer a secondary check before the user submits an order, which could be an issue, as the user could accidentally bump the order button or forget to add something to their order. As a suggestion, we could use a secondary check that walks the user through their order and asks for a confirmation.
Recognition rather than recall
Good
Does seem to implement recognition rather than recall, as the home page for instance has a section called recent, which shows shops the user has recently viewed
Bad
Beyond this, however, there does not seem to be many instances in which this heuristic is applicable.
Flexibility and efficiency of use
Good
Seems to be very flexible in how it is used. A user can find a shop by typing in the search bar or by pressing the mic icon and saying a shop's name and filtering using different options in both cases, by selecting a location on the map, or by selecting one of the options from the featured section on the home page. Users can also report companies, order items, research environmentally friendly practices, view rewards, and coupons, etc.
Bad
No quantity button to order multiple items.
Aesthetics and minimalist design
Good
The wireframes do seem minimalist in the sense that they only have buttons and navigational elements that are relevant to the said page and the task it is related to. The exception to this is the home page, but given that it is the central hub of the app and the starting point for the other tasks, this is acceptable.
Bad
None.
Help users recognize, diagnose, and recover from errors
Good
None.
Bad
The wireframe does not show the ability to recover from errors, let alone catch them. For instance in the ‘Send Gifts’ frame, if the user enters an invalid recipient, there does not appear to be a way to catch this.
Help and documentation
Good
None.
Bad
Does not appear to be any way for the user to view the documentation on the interface or seek help in navigating it.
Prototype
Having evaluated the wireframes via heuristic evaluation, we modified our design and developed the following prototype.
App Development
Using the prototype we developed, we began developing the application using HTML, CSS, Javascript, React, and Ionic Framework. The below images are the final results. The app supports mobile screen size and light & dark modes.
User Evaluation
Using the application we developed, we ran a final usability test to determine how effective our design was and if any pain points existed.
Synthesis of User Evaluation
Both users find the layout to be easy to read and intuitive. Both can navigate the app and Wiki page easily. They both weren’t too sure about the icons used to represent biodegradable and compostable but at the same time, not really sure what the standard would be. Perhaps images, search bar, and list names in the Main Wiki would be helpful in the future. Home page was pretty clear on where to navigate to find more information on packaging materials. The Wiki Detail page was informative and insightful. User 2 suggested a search bar atop the wiki list screen, as it may be harder to find specific material by just scrolling the page if there are a large number of materials. Icons are not universal, there are no standards to what they look like for “wasted management”? So it is really subjective when deciding upon these icons. In the next interaction, we would like to interview more users and do more research into what the proper icons should look like.
Conclusion
Throughout the course of the design process our underlying idea for the project remained unchanged; we wanted to create an app that served as a union between the ideas of accountability and an environmentally friendly coffee/boba cafe searcher.
We would argue the final result achieves this union. The app allows users to find environmentally friendly coffee and boba shop stores and to report companies that are not following the practices they claimed they did (along with other tasks). Therefore, the user is accountable for helping to keep the environment clean, by shopping at green stores and keeping business owners accountable by reporting them for non-compliance with practices they claimed to use.
The design process was not completely smooth, however. We did encounter some challenges, for instance, deciding how users can report a store not being eco-friendly. We initially thought any users can report the store by tapping into the store details, but we decided users should not be able to report stores if they have not ordered drinks from the store. As a result, we moved the reporting functionality to the past orders page, so the users could only report stores after they have ordered from them.
If we were to develop this application further in the future we would build off the final usability test we conducted. We would add a search bar to the wiki page and change the icons used in the application; after more testing with users to determine what icons are intuitive.
To wrap up, thank you for your interest in our project and for taking the time to read through our work.
Project Team
Arthur Utnehmer, Catherine Wong, Eunice Lee, Nathaniel Reynolds, Oliver Pan, and Rebecca Chery