Design

Design Challenges

1. How can the user correctly dispose their waste?

2. Calculate the user’s carbon footprint for the last x amount of time.

3. How can the user reuse a material?

4. How can the user reduce their carbon footprint?

Design Sketches

Final Sketches

Design Challenge 1

On the main home screen, the user inputs their waste. Pressing “Add” will add the garbage to a list below the search bar. Then, the user will input their location. They can also have the system automatically track where they are. After pressing next, the user will be redirected to the map page, where they can see their current location and relevant disposal areas on a map and on a list. The list can be traversed using the arrows at the top and bottom. The box underneath the icon acts as a preview and shows the closest location to the user. The user can also press the filter icon to sort the results by material type, distance, and more. Pressing on a location in the list or on the map will bring up a pop-up with more details. Clicking on the “GARBAGE” link at the top of the page will bring up a pop-up with a list of the waste they have recently inputted.

Design Challenge 2

After inputting the information as described in the previous design challenge, the user will again meet three icons. Also note that the total carbon emissions is always available to view in the header, which can also be clicked to be directly sent to the page with the three icons. After clicking the emissions icon to view more details, they will be able to view by date ranges. They will also be able to analyze the types of waste they regularly dispose of. A bar graph shows the amount of waste they have disposed of by date, and a pie graph shows the amount of waste they have thrown by date. This information can be customized by pressing a commonly accessed date range, such as the past month, or by entering in dates. A calendar icon also allows the user to select dates with a calendar pop-up. The average amount of waste disposed across this date range is displayed above the graph on the right.

Design Challenge 3

The user has two ways to see how they can reuse their material. They can either press the information button on the navigation bar and access general information about reusing materials. On this page, they can search for a specific material, or press on a type in the sidebar. Alternatively, they can input their information or press the “Total” in the header to be redirected to the page with three icons, where they can press reuse to view repurposing tips specific to the items they are throwing away. The preview under the reuse icon shows how many tips were found according to the most recent waste input. Pressing the icon shows all the tips in a list. Tips for specific waste inputs can be accessed by pressing the waste types above the list, and an arrow in that header can help the user see more options without cluttering the screen.

Design Challenge 4

The user has two ways to see how they can reuse their material. They can either press the information button on the navigation bar and access general information about reducing their carbon footprints. Alternatively, they can input their information or press the “Total” in the header to be redirected to the page with three icons, where they can press “Emissions” and then “Reduce” to view ways to reduce their footprint specific to the materials they are disposing of. The user can customize the date range of their emissions as described in Design Challenge 2. Then, the user can see which type of waste releases the most emissions. A percentage shows how much of the emissions it makes up for, and a concrete number shows the specific amount of emissions released. The user can see how much is reduced by recycling or reducing, as well as the percent decreased. Pressing on each of those buttons redirects to their respective pages. The user can see more of their carbon emissions by pressing the next button. The “total” in the preview automatically refers to the total emissions in the recently inputted items.

Alternative Sketches

Design Challenge 1

Design Challenge 2

Design Challenge 3

Design Challenge 4

Narrative Reflection

Sanjana

In my first design, I used multiple screens to show information, then we realized it would affect the user’s memory load. So, the final design uses the maximum screen area to show all the information which reduces the user’s memory load. The final designs have the consistency between the objects, actions and words which would be convenient for the users. I did not think about it in the very first sketches but later I tried to maintain the consistency. We added easy shortcuts on the final design, so that both the expert and novice users can easily access the interface and have flexibility. After the initial sketches we talked about how to add easy shortcuts for the users and came up with very simple but efficient ones. The final design will provide only the necessary information to the users so that users would not be overwhelmed by the unnecessary materials. We were thinking about an efficient way for the user input and after critiquing each other’s design we made the final design where the user can search for the items and it would be available on the drop down menu; this will help them to prevent slips error. We tried to put the similar objects or actions together so that the users need less time to complete the similar tasks and it would also satisfy Fitts's law. The final designs have the multi-view panels to see all the information together. This is inspired by recognition over recall and also reduces scrolling.

Zainab:

Each design iteration made us more critical of what was actually necessary for the user and what functionalities were secondary. Usually, if a feature was not a core requirement and made the screen too cluttered, we would remove it. We would also remove designs that took too many steps. Each critique also allowed for us to be inspired by each others' designs and incorporate what we liked into the next iteration. Our layout gave importance to recognition over recall. The final implementation uses labeled metaphors that match the system to the real world and allow users to understand what they can do with their inputted values at a glance. We used simple yet specific illustrations, such as a map with a trash can to symbolize disposal locations. This increases the learnability of the interface. Plus, to reduce cognitive load, our designs used a good amount of white space between items and a minimalistic theme. This was a theme that came up the most during our reviews. "Next" buttons were employed when there was too much information. We also explored different home screen layouts over our iterations to ensure the functionalities were equally accessible to both novices and returning users. Our navigation bar and the "Total" in the header increase efficiency as well, giving the user quick ways to access information. Lastly, a "Help" link in the navigation bar allows users to access documentation that allows them to interact with the website, and consequently reduce errors. Previews of information (on the screen with the three icons) let the user predict the system if they were to click on the button above and thus prevent accidental errors. By our final iteration, our design had a consistent theme across all pages.

Anis:

I would like to give an example of the map interface for finding disposal locations (design challenge #1). Initially, we designed to have just the map with location pins which makes the interface the simplest to maintain the minimalistic design (Nielsen's principle #8). But through iterations and critiques within the group, we discovered that it takes a user to click on the map pins to see more details about a location. There could be scenarios like, the closest location might not be open during the search. Or as the user can search with multiple types of waste, different locations can accommodate different types of wastes. So, we added a left sidebar of a list of locations with the most required information like business hours and what wastes they accept. We used other navigations services interfaces like google maps as the UI inspiration so that it matches the real world (Nielsen's principle #2) and at the same time is very much consistent with the industry conventions. (Nielsen's principle #4). Additionally, for the main three actions (Dispose, Reuse, See emission) a user completes the same user flow always. They, at first, input the waste data and then choose between those three actions, which makes it a very internally consistent user journey (Nielsen's principle #4). The actions work as clickable buttons which along with labels have icons to give a visual metaphor of the action. These improve learnability.

Original Sketches

See appendix.