BinBetter
MOBILE APPLICATION
Overview of BinBetter Mobile App Task
Topic Selection
Research, Design & Testing Process
Research Overview
Empathy Map
Brainstorming of BinBetter Features
Defining Statements
Competitor Analysis
User Personas
Business Model Canvas
User Scenario
User Flow Diagram for Scanning Feature
This user flow was made to plan how users would get waste disposal information from an image-search or barcode-search of an item.
Style Guide
Low-Fidelity (LoFi) Wireframes
It has come to my attention that some people are unable to load the animations for the HiFi prototype demonstrations (in the next section) on their devices, and cannot even view them from the links I have provided. I have personally never experienced this problem, and I do not know its cause nor how to resolve it, but I am working on an alternative option for people who have this issue. I will post this alternative as soon as I am able to get it working. I apologise for the inconvenience and appreciate your understanding in this matter.
High-Fidelity (HiFi) Interactive Prototype Demonstrations
Sign Up Process
If the animation is not appearing, you can view the demonstration here: https://s9.gifyu.com/images/SFzMX.gif (link will open in a new tab).
The 1 min 15 sec demonstration shows the sign up process (via email) for the user persona, Courtney Mills.
Users could theoretically sign up or log in BinBetter via third parties (Google, Facebook, Apple) or email.
BinBetter automatically determines the user’s local council from their home address.
The user is made to choose a username in the sign up process as the username is utilised and displayed to other users in the BinBetter Community feature.
Note that this demonstration intentionally shows the error protocol if a user were to input a username that is already taken.
The information provided by users in the sign up process (e.g. age, gender, location, goals etc.) could be used for analysing BinBetter’s userbase and impact.
Note that the quality, sharpness and resolution have been somewhat diminished in the animation shown here. The prototype has a bit more clarity when viewed on Figma.
Homepage, Waste Collection Schedule & Handy Bin Overview
If the animation is not appearing, you can view the demonstration here: https://s9.gifyu.com/images/SFzzU.gif (link will open in a new tab).
The 1 min demonstration shows three pages:
Homepage - main page of the app
Waste collection - displays the kerbside bin collection schedule in the user’s location, and contains the setting for enabling or disabling reminder push notifications for kerbside bin collection
Handy bin overview - gives examples of what types of items can be placed in each coloured kerbside waste bin
The top of the homepage allows the user to easily see and change their location, view their notifications, and see the next kerbside bin collection day, and which kerbside bins will be collected on that day. The homepage also provides a convenient way for the user to access all features of the app. It also displays a horizontally scrolling carousel with the latest posts from the BinBetter Community.
The handy bin overview page was previously longer as it included lists of things that both should and should not be placed in each bin. Two participants of user testing commented that the page seemed too wordy. The final version of the prototype (shown in the demo), implements one participant’s suggestion, which was removing the list of things that should not be discarded in each bin, and then adding a link for the “full version” at the bottom of the page.
Note that the quality, sharpness and resolution have been somewhat diminished in the animation shown here. The prototype has a bit more clarity when viewed on Figma.
Image-Search/Scan an Item Feature
If the animation is not appearing, you can view the demonstration here: https://s9.gifyu.com/images/SFzp2.gif (link will open in a new tab).
The 1 min 45 sec demonstration shows the scanning feature. A user can take a photograph of an item or product barcode and BinBetter will identify the item and then provide location-specific information for how to dispose of it. In this demonstration, the image-search feature is used to scan a photograph of a disposable/takeaway coffee cup.
Note that the demonstration intentionally shows the error protocol for what takes place if BinBetter is unable to identify the photographed item. In this situation, the user will be presented with options to view image-scanning tips, search for the item in the waste disposal guide, or report a missing item.
In the demonstration, BinBetter was unable to identify the first photograph of the coffee cup because of inadequate lighting, resulting in a shadow that partially obscures the cup. BinBetter successfully identifies the coffee cup in the second photograph, even though there was a hand holding the cup in the photo.
The image-scanning tips screen has a list of general tips for taking clear images in order to increase the chance of BinBetter recognising and identifying the photographed items. Selecting any tip in the list will display examples of both correct and incorrect ways of applying that tip.
Note that the quality, sharpness and resolution have been somewhat diminished in the animation shown here. The prototype has a bit more clarity when viewed on Figma.
BinBetter Community and Waste Disposal Guide
If the animation is not appearing, you can view the demonstration here: https://s9.gifyu.com/images/SFzpM.gif (link will open in a new tab).
The 1 min 20 sec demonstration shows two pages:
BinBetter Community - An Instagram-style social media feed allowing users to connect and post about sustainability, waste management, local/community initiatives and related topics. The Floating Action Button (FAB) in the right-hand bottom corner (with a + symbol) is what the user would select to create a post.
Disposal Guide - A comprehensive A-Z accordion list of items. Each item has a coloured bin symbol next to it which represents how to dispose of that item. Selecting any item in the list expands the accordion revealing more disposal information, including local disposal sites for the item, if relevant. Selecting the heading of any expanded item will collapse the accordion. A user could also use the search bar to text-search for an item in the guide.
Note that the quality, sharpness and resolution have been somewhat diminished in the animation shown here. The prototype has a bit more clarity when viewed on Figma.
Profile Page & Badges
If the animation is not appearing, you can view the demonstration here: https://s9.gifyu.com/images/SFzpz.gif (link will open in a new tab).
The 1 min 10 secs demonstration shows two pages:
Profile page - Shows the user’s public profile (i.e. how other BinBetter users view the profile), which the user can edit, and also a menu of settings and options
Badges - Presents a list of sustainable actions, or BinBetter interactions, that a user could perform. The purpose of the badges is to gently encourage users to commit to consistently perform sustainable habits, and use the app. The badges pertaining to sustainable actions serve as a kind of checklist, and the user can choose to claim as many as they identify with. Thus, the more badges a user has, the more likely it is that they have a more sustainable lifestyle.
During user testing, some participants expressed that the badges were lacking in usefulness. Since many of the badges are self-assigned by the users themselves, one participant felt the badge descriptions were too subjective to accurately represent a person’s commitment to sustainable habits. Two participants expressed that a coupon/point/reward system could be more useful. One participant also suggested that there could be badges/rewards for engaging in local initiatives or challenges posted in the BinBetter Community. These suggestions could be explored further and included as part of future work on the app.
Note that the quality, sharpness and resolution have been somewhat diminished in the animation shown here. The prototype has a bit more clarity when viewed on Figma.
