Product | Green Bottle
Task | Design a responsive website
Team Size | One
Role | Product Designer (UX/UI)
Project Background | Green Bottle is a bottle reuse company based in New Zealand. Combining state of the art bottle processing facilities with a commitment to providing Change for Good, they are set to launch Auckland, New Zealand, retrieving used glass bottles, processing in their bottle wash facility, and returning to drink manufacturers to be filled and used all over again. The brief is to design a ready for build prototype of a responsive website for the brand's market launch.
Onboarding at pace
Structured information to educate and inform, quickly and efficiently.
Learn more from anywhere
Designed for desktop, tablet, and mobile.
Seek and return
Location map allows users to quickly find return locations.
Problem Statement
With the imminent launch of Green Bottle, a new bottle reuse scheme in New Zealand, there will be many interested parties landing on the website, be it consumers (end users), manufacturers, retailers, or governing bodies. The site might be accessed via mobile, tablet, or computer, by any of these parties, each with differing needs. Without a well-designed digital platform, there is a risk that potential users may remain inadequately informed and unengaged. Therefore, the challenge at hand is to develop a ready-for-build prototype that efficiently onboards and informs new users, and also positions Green Bottle as a vital and compelling initiative that stakeholders will wholeheartedly support.
Research & Insights
Research questions:
How do user’s approach reuse and recycling?
How do user’s keep motivated to be ‘sustainable’.
What keeps people from reusing or recycling
What are baseline expectations for usability of sustainability based websites?
Methodology:
Secondary Research: topic and market research will be carried out to support line
of questioning for user interviews and hypothesised positioning of website.
User interviews: to be carried out with 4 participants, with the aim of validating research
questions, establishing key pain points, influencing information architecture and informing
survey questions for a wider set of users.
Competitive analysis: in depth competitive analysis will present a picture of the global
landscape and help inform market positioning and eventual sitemap.
Participants: these are the primary characteristics of the study’s participants.
Sustainability leanings
Household shopper
Decision maker
Broad age 30-70
Planning
Although this was not a completely linear process, I planned out and loosely followed this structure.
User interview summary
User interviews were carried out with 4 participants, who provided insights on their approach to sustainability, and expectations from a website experience, particularly when accessing sustainability websites.
User Behaviors:
Value Convenience and Rewards: Users are motivated by convenience and tangible rewards. They appreciate receiving discounts, prizes, or incentives for participating in the bottle reuse scheme.
Preference for Mobile Interaction: Mobile-friendliness is essential. Users favor features like QR code scanning that allow them to engage with the scheme using their smartphones.
Desire for Clear Instructions: Users seek straightforward instructions for participating in the scheme. They prefer intuitive processes and explicit guidance.
Interest in Transparency: Users are interested in understanding the recycling journey and the environmental impact of their participation. They appreciate transparent, educational content.
Sustainability Education: Users appreciate learning about the benefits of sustainability. They value information that demonstrates how their actions contribute to positive environmental outcomes.
User Needs:
Gamification Elements: Users would respond positively to gamification elements that make participation enjoyable. Features like earning points or rewards for returning bottles can enhance the user experience.
Comprehensive Environmental Information: Users require comprehensive information about the scheme's sustainability benefits, the recycling process, and how their actions contribute to sustainability. They need visual aids and clear explanations to engage and educate effectively.
Sustainability Messaging for Businesses: Users, especially those with a business perspective, seek information on how the scheme can enhance a brand's sustainability credentials. Clear messaging can attract businesses to participate.
Data Presentation: Users find tangible data, such as the amount of waste reduced or carbon footprint lowered, compelling. Presenting this data can make the impact more tangible and engaging.
User Pain Points:
Lack of Rewards and Incentives: Users are less likely to engage if the scheme lacks immediate rewards or incentives. The absence of gamification elements may result in reduced user participation.
Complex or Non-Intuitive Processes: Users may abandon the scheme if the instructions are not straightforward or the process is complex. Clarity and ease of use are critical.
Insufficient Sustainability Information: Users may not fully engage if the website does not provide comprehensive information about the scheme's sustainability benefits, the recycling process, and the environmental impact of participation.
Inadequate Mobile Responsiveness: If the website is not mobile-friendly and lacks features like QR code scanning, users may find it challenging to participate via their smartphones.
Unclear Messaging for Businesses: If the scheme's potential benefits to businesses are not clearly presented on the website, attracting partnerships may be hindered.
Establish Personas
As a result of initial user and market research, personas were able to be established, covering a range of likely users. Personas help ensure that the design process remains focused on the needs and preferences of actual users. Understanding Green Bottle's target audience's behaviours and motivations is critical to creating a user-centred experience.
User Journeys
As has been established, the Green Bottle website is likely to be accessed by different groups, using a variety of devices. It was important to therefore visualise user journeys of who might be accessing the site, how, where, and what their needs might be. The users are based off the personas and provide insight into how to ensure the design of the website meets these needs.
UI Kit
The UI (User Interface) kit, is a collection of essential building blocks for simplification of design, and to assist create a cohesive user experience across the site. Core elements of a UI kit were produced.
Icons: to be used throughout the site.
Typography: Recommended typeface is Area, designed by Matthieu Salvaggio from Blaze Type.
Form Elements: Input fields, checkboxes, and buttons, for consistency and clarity across the design.
Navigation Components: Such as navigation bars and menus, all built out with desktop, tablet, and mobile versions.
Colour Palettes: Working off the original logo colours, a broader palette has been established, with a pair of core neutrals.
UI Patterns: Including product cards and dropdowns.
Wireframing
Research showed that users want to know what the product is, where it is, and how to use it, as soon as possible. Users are also likely to be visiting the website with a predisposed purpose, which could be locating a return location, or contacting the business. Wireframes of key flows were built - learn more; contact the business; find a return location; read journal; and subscribe to mailing list. Design rationale for all frames was to get information to the user quickly and easily, reducing distracting or irrelevant artefacts.
Usability tests
Flows tested: contact the business, find a return location.
Participants: 4
Feedback:
Easy to understand with key information where expected.
Not obvious which page user is on within navigation menu
Could find a location have a 'use my location' search option?
Expectation of hover states in dropdown menus
Iterations to carry out:
Add: quick contact details in footer
Elongate: make vertical sections more consistent in size, lengthening some shorter sections
Add: search bar and use my location to Find return location page
Add - affordance for which page of site user in on.
For consideration:
Subscription - add overlay prompt to subscribe
Add hover states to dropdown menus
Location page - add overlay for search area by current location
Link text for accessibility - would a person using a screen reader understand where a link was going?
Test results - find a return location
Test results - contact the business
Iteration
Added quick contact details to footer menu
Introduced search bar and location search to location page
Improved site managed with colour and underline change in navigation menu
Prototype
Mobile flow - accessing location finder.
Tablet flow - contact the business
Desktop flow - subscribe to mailing list
Have a look around the desktop site. Best viewed fullscreen - press R to restart at any point. This is a full walk about the site including screens Landing Page, How it works, Our Process, Eligible Containers, Meet the Team, Find a Location, Journal, Article A, Article B, Video Article, and Contact.
Reflection
Creating the Green Bottle website required a deep understanding of user behaviours and needs, and requiring a user-centric approach that prioritises convenience, mobile-friendliness, and clear guidance. Increased content creation, education, and gamification elements can make the website more engaging. Through iterative design and continuous improvement, the website can evolve to provide a valuable and motivating user experience.
From a personal experience - working with brands who are bettering the environment we live in is a fulfilling endeavour, as is working alongside users to get the best out of such a beneficial product.