Designing A Website for ReCo: Refillable Cleaning Products Delivered To You
My Roles & Responsibilities
Meeting the client • Market & user research • User interviews • Ideation • Sketching • Wireframing• Information architecture • Prototyping • User testing • Presentation
UI design: layout design & photo retouching
Team
James T, Ashely S, & Eillen Z
Timeline
3-week sprint
The Background of ReCo
ReCo is an eco-conscious cleaning brand that offers a plastic-free, hyperlocal refill delivery service. Founded by a pair of artists, ReCo delivers environmentally friendly cleaning products in refillable jars, replacing the empty jar with a full one once the product is used up.
ReCo boasts a dedicated customer base in the greater Sydney area, but the company aims to revitalise its website to draw in new customers.
Full Case Study Goes Here:
Meeting the Client, Danling
Our team and I prepared a set of questions to gain insights into ReCo as a brand, and to understand co-founder Danling's role as an artist promoting sustainable ideas within society.
Following our discussions, it emerged that user conversion and retention posed significant challenges. Earlier findings indicated that while users were visiting the homepage, they were not progressing to the product page. Additionally, Danling pointed out that users were hesitant to make purchases, possibly due to insufficient information on the product page.
Based on these observations from Danling, we decided to conduct further investigations to comprehend user behaviours more deeply.
Interview our client Danling
Exploring Possibilities
With its lineup of aesthetically pleasing, budget-friendly, and eco-friendly products, ReCo has the potential to emphasise the benefits of its offerings early in the customer journey. This strategic shift could potentially lead to increased visits to the product page and higher conversion rates.
The Challenge Faced by ReCo
ReCo boasts a community of environmentally conscious customers committed to using refillable cleaning products to minimise their ecological footprint. However, there exists an opportunity to expand their local reuse movement and attract more participants.
The primary focal point involves overhauling the product pages to provide customers with accurate and engaging information. Furthermore, a notable bounce rate on the landing page indicates that a substantial portion of website visitors fail to transition to the product page and appreciate the advantages of ReCo's offerings.
Test the Current ReCo Site
User test record for the current ReCo’s site
Our task encompassed addressing the website. With all the research conducted thus far, our ultimate objective was to redesign the desktop experience. We aimed to carry out usability testing to delve into the specific aspects of the existing site.
Conducting tests involving over 12 users illuminated several aspects that would have ramifications down the line:
Users demonstrated a preference for succinct excerpts and infographics, tending to skim through longer explanations.
While on the shop page, users exhibited confusion due to a prominent banner being presented instead of immediate visibility of items.
Users found the refill button perplexing, as it added multiple items to their cart.
Users did not thoroughly peruse the "how it works" section, resulting in insufficient comprehension of subsequent steps.
Overall, ReCo's present website does not prominently showcase the product's features. Despite efforts to elucidate the product's process, the site's information architecture remains excessively intricate.
Our Project Goal:
Helping people build sustainable shoppinghabits by purchasing ReCo's plastic free, refillable cleaning products.
Embarking on the Journey: Research Methods
Our research strategy was meticulously designed to provide a comprehensive understanding of individuals' current behaviours when it comes to cleaning routines, household product purchases, support for local businesses, and product recommendations. We also aimed to gauge their existing sustainable practices.
Research Insights
• Australians use an average of 130kg of plastic per person each year, almost double the figure from 2000.
• Surprisingly, over 3.6 million Australians participated in Plastic Free July this year, showcasing a remarkable commitment to reducing plastic consumption.
• While consumers value eco-friendly products, concerns may arise about their cost, research effort, or availability.
• A prevalent belief is that individual actions might not contribute meaningfully to the environment unless everyone is collectively committed.
• Consumers unfamiliar with green products might perceive them as a risk, given their unfamiliarity.
Competitive Analysis
Our examination of competitors underscored the scarcity of user-friendly tools for evaluating the cost-effectiveness of cleaning products in relation to their performance and durability. Factors such as varying concentration levels and liquid versus powder formats contribute to this lack of clarity.
We scrutinised three competitors—Who Gives A Crap, Terra Madre, and The Source Bulk Foods. This review of their website features, along with the pros and cons, enriched our understanding of potential lessons and pitfalls in designing ReCo's website.
Who Gives A Crap - task analysis
Market Research & Analysis
Our concise market analysis targeted several sustainable cleaning brands. Through a feature inventory, we evaluated how ReCo stacks up against direct competitors, including both supermarket cleaning brands and sustainable alternatives. Notably, ReCo's focus on personalised service, involving collection, refilling, and delivery, sets it apart.
A task analysis was also conducted, comparing the purchasing process at ReCo and Dirt, a larger competitor. While Dirt follows a conventional e-commerce approach, ReCo's refill service requires additional steps.
Market research: supermarket cleaning brands & sustainable cleaning brands
User Surveys
Our extensive user surveys, encompassing 50 participants, aimed to uncover purchasing habits and motivations concerning cleaning products. The findings indicated that consumers prioritise cleaning performance, price, and durability when selecting cleaning products. Conversely, factors such as locally sourced or small business-owned products ranked lower. Among the barriers to embracing a more sustainable lifestyle, cost, convenience, and performance emerged as key concerns.
User survey
Business Analysis
Our team employed a SWOT analysis to comprehend ReCo's strengths, weaknesses, opportunities, and threats. Despite being a startup, ReCo boasts a unique personalised service catering to local customers. This distinctiveness positions ReCo well for growth despite competition from larger cleaning brands.
After assessing costs and tangible impacts, we applied market positioning to map out ReCo's standing relative to other brands. This analysis revealed that ReCo demonstrated the highest impact among the competitors.
Market positioning
User Interviews
A comprehensive set of 50 user interviews provided insights into product preferences, purchasing motivations, sustainability choices, engagement with local businesses, and recommendations. These interviews encompassed a diverse range of users aged 20 to 70, spanning different backgrounds and genders. The goal was to gather a wealth of information, leading us to interview five existing ReCo customers. Despite the small sample size, these interviews yielded invaluable insights that informed our synthesis.
Interview a customer at a local shop
Mapping Insights: Affinity Map
Through meticulous organisation, we collated our findings on an affinity map. After several hours of categorisation, key takeaways emerged:
• Users prioritise budget-conscious options when shopping.
• Performance-based criteria drive product choices, focusing on quality and longevity.
• A significant segment demonstrates eco-conscious behaviours.
• Eco-friendly product choices often factor in price and performance, sometimes driven by prior negative experiences or misconceptions.
• ReCo customers possess substantial sustainability knowledge, but their insights may not be fully representative of the general public. Understanding their perspectives enriched our grasp of ReCo's strengths.
“Always buys same brand of dishwashing tablets for high performance”
“Bought household items due to the affordable price”
Understanding Our Users: Empathy Map
Our empathy map
Employing an empathy map, we delved deeper into users' desires and needs. The map underscored users' aspiration for sustainability, while highlighting cost as a potential barrier.
Creating an Archetype
Our final archetype: the aspiring sustainable shopper
In crafting an archetype, we opted for depth and relevance over a persona approach, given our diverse user backgrounds. Our initial "budget-conscious buyer" archetype emerged from comprehensive research synthesis and interviews. However, it became evident that this representation lacked substance and the potential to address key issues.
Subsequently, our refined archetype, "the aspiring sustainable shopper," better encapsulates users who possess basic sustainable habits but aspire to adopt further sustainable practices. Balancing cost-effectiveness and environmental consciousness, this archetype illustrates the journey toward sustainable shopping while acknowledging challenges to embracing entirely eco-friendly options.
Employing an empathy map, we delved deeper into users' desires and needs. The map underscored users' aspiration for sustainability, while highlighting cost as a potential barrier.
User Journey: Mapping the Path
In mirroring the archetype's journey, we analysed user behaviour while transitioning to sustainable cleaning products. This journey unveiled a pivotal hurdle in the shopping process—users grappled with comparing and selecting products. While users ultimately found a suitable cleaning product, sustainability aspects often remained unaddressed.
Crafting a Design Challenge
To narrow our focus, we developed How Might We (HMW) statements, directing our attention towards solving specific problems. Our HMW statement read:
"How might we offer cost-effective options to empower the aspiring sustainable shopper?"
Creative Ideation: Brainstorming Crazy 8’s
Embracing creative brainstorming, we generated three rounds of ideas, each comprising eight concepts. These ideas, guided by both user interviews and website usability testing, culminated in two concepts: the annotated product image with key features and an interactive slider on ReCo's main page, which were based on my ideas from Crazy 8’s.
These concepts were selected due to their potential to condense vital product information into easily digestible formats, fostering engagement and education.
My first round of crazy 8’s: eg. there’s a clean queen in the wash competition campaign
My second round of crazy 8’s & all my team members voted to have my annotated image idea
Synergising Solutions: Our Proposal
Slider idea in sketch
We integrated our insights into a solution—combining the annotated product image and the interactive slider—to create an engaging annotated interactive slider. This approach capitalised on visual appeal, delivering critical product features in an interactive and informative manner.
Mapping the User Experience: Task Flow
Our task flow prioritised user familiarity while presenting the challenge succinctly. Determining the precise content for each stage was pivotal.
The task flow of ReCo website from our design
Essential Information Architecture
Brainstorming useful ReCo information and refining content clarity proved essential. We highlighted essential points in the interactive slider, focusing on cost-effectiveness. Furthermore, we employed icons and succinct descriptions to convey information effectively, addressing concerns from our user testing phase.
We determined optimal locations for disseminating the key points, including the announcement bar, annotated images, and product pages.
We were brainstorming information architecture on Fig Jam
Our final information archetecture
Measuring Success
Our overarching business objective centres upon facilitating greater participation in the circular economy through ReCo products. We have formulated a table for feature prioritisation to clarify which features should be included, categorising them based on their impact (high or low) and the effort required (high or low).
Our design hypothesis suggests that highlighting the cost-effectiveness of ReCo products will enhance sales. This can be assessed through lower bounce rates, improved conversion rates, and increased time spent on the product page.
ReCo’s future positioning
ReCo’s relative metrics
Our First Prototype - Paper Prototype & Usability Tests
We sketched the information that we just proposed into a structure.
Translating our proposed structure into a paper prototype, we conducted five usability tests. The feedback indicated promising results, with 4 out of 5 users successfully navigating the task. There were some issueserrors we need to fix for the next stage:
Users were able to complete the task because the flow was familiar.
Users weren't sure what the refilling service was.
Feedback that the slider was too content-heavy.
Our paper prototype
The first user test record
Our First Iteration – the Hi-Fi Prototype Version 1 & Our Second Usability Tests
Based on the user test record, we fixed the issues or errors from above.
We did another usability test for our first Hi-Fi prototype with 5 out of 5 users successfully navigating the task. Incorporating user feedback and insights, our hi-fi prototype version 1 reflected several refinements:
Reduced content density in the slider.
Enhanced clarity regarding ReCo's business model.
Lightened background imagery.
Our hi-fi prototype version 1
The second user test record
Our Final Iteration – the Final Hi-Fi Prototype
Our final hi-fi prototype
Refinements based on feedback from the final usability tests included:
• A vibrant orange announcement banner for enhanced visibility
• More concise yet informative copy
• Clear text differentiation for product categorisation
• A homepage content hierarchy revamp
The final hi-fi prototype proved intuitive and user-friendly, addressing user concerns and improving the overall experience.
The key features are showing in the following graphs:
Future Steps for ReCo
The next phase involves:
• Independent product comparisons.
• A/B testing for product benefit copy related to cost-effectiveness.
• Exploring performance benchmarking strategies.
• Expanding the product page repertoire.
• Diversifying product comparisons.
• Considering a product photoshoot to spotlight offerings on the interactive slider.
In Conclusion
This comprehensive UX case study outlines our journey in revamping ReCo's online presence. By prioritising user needs, embracing creative solutions, and iteratively refining our designs, we believe our proposals will elevate ReCo's appeal and foster sustainable shopping habits among consumers.