The Product
Mobile Application "The Grouch" App.
The Problem:
Users who make efforts to reduce their waste footprint easily become demotivated due to lack of accountability and visibility of their efforts.
The Goal:
The Grouch App aims to help eco conscious users find products based on the eco-rating of their packaging. The app highlights products which are less damaging to the environment and promote a healthier and more conscious consumer behaviour.
My Role:
UX/ UI Designer- Research, information Architecture, wireframing, prototyping.
User Research Summary:
Primary Research conducted consisted of 5 interviews- 3 female and 2 male between the ages of 26 and 65.
User research which was conducted included an interview to gauge how aware the partipants were of the negative effects of waste production and how motivated they would be to apply change in order to address the issue. The study revealed that the majority of users were aware of the global waste problem and found the issue to be very important. However, the majority of users also felt that legislations for businesses were required for any real change to happen. This revealed most users felt powerless as individuals to create significant change.
Crazyeights storyboarding was used to think of ideas for how the app could belaid out and show case its primary function. Macro and Micro storyboards were then used to see how the app would be used in context.
When the user opens the app they are able to access the home screen where the user can search for products to review and or find directions.The peer study showed the majority of participants felt they had no option but to buy products that came in single use packaging, usually from their local grocers or takeout food and drink. The app addresses this by allowing the user to find other options which satisfy their expectations for eco friendly product packaging.
Majority of users in the usability study found it difficult to recognise the homepage due to its simplicity. Some users also advised the app could be improved with useful information related to the user. The revised homepage integrates added features and links for the user such as their top products and average rating score. Welcome headings are also added to help identify the homepage.
The usability test also revealed the majority of users were hesitant or confused by the review page. This means the function of the review page was not clear. In the revised prototype the page hierarchy more clearly focuses on the main purposeof the page, to review the products and all other non essential information is removed.
User feedback which has been implemented in the high fidelity prototype include the integration of a guided tutorial on how to use the app as well as a more featurised homepage which integrates data about the user.
Figma Prototype1. Text no smaller than 12 pt for visual ease.
2. High contrast colours adhering to WCAG standards for visual ease.
3. Large and buttons with adequate spacing for low moto skill requirements.
The webapp is responsive for desktop, tablet and mobile. Elements rearrange from horizontal stacked layoutinto single stacked vertical layout with pages nested inside the hamburger icon for mobile.