.avif)
About Nontre
nontre.co is dedicated to crafting premium, earth-wise products that blend luxury with sustainability. Their Australian-inspired range, from home care to personal care, is designed with the planet and your wellbeing in mind. Committed to eco-friendly practices, they offer solutions that are as kind to the earth as they are to you. A lifestyle where luxury and environmental responsibility go hand in hand.
Project Goal
The focus of this project is to enhance the nontre.co homepage user experience and presentation of products.
The focus areas include:
-
Streamline the user interface for a better experience .
-
Improve product details display: descriptions, ingredients, and images.
-
Optimize for increased sales, including cross-selling strategies.
-
Align content with brand essence and values.
-
Emphasize premium product positioning and distribution channels.
Time Period
9 Weeks, May - Jul 2024
Responsibilities
Product Vision, Business Rationale, User Flows, Prototypes, Usability Test, Design System
Tools used
Figma, Canva, Zoom
Empathize and Define
The first phase, Empathize, was crucial for developing a deep understanding of our users, their needs, and their pain points. During this phase, we held interview sessions with stakeholders Karen and Natalie to gather insights. Following this, I conducted user interviews with five female participants aged 40 to 50, representing our target audience.
In the Define phase, I applied various design methods, including creating personas, conducting a competitive audit. These approaches helped identify key problems and uncover opportunities for improvement.
Personas: I created two personas based on insights gathered from user interviews. These personas represent the users’ goals, needs, behaviors, and pain points, providing a clear foundation for designing effective solutions.
Competitive Audit
I conducted a competitive audit comparing Nontre with three other brands to identify opportunities and areas for improvement on Nontre’s homepage.
Problems and Solutions
After conducting user interviews and utilizing methods such as personas and competitive audits, I identified several issues. I then prioritized and focused on solving the three most critical problems.
-
Brand Positioning and Sustainability: Nontre positions itself as a luxury, sustainability-focused brand, but this positioning is not fully supported by verifiable evidence. The inability to display the complete ingredient lists for some products undermines the brand’s sustainability claims.
-
Mobile Usability and User Experience: many users prefer shopping on their mobile devices, but they encounter several issues on Nontre’s mobile platform. These include the category menu being obscured by the “review” icon, misaligned elements, and buttons that lack clear call-to-action effects.
-
Consumer Preferences: according to my user interview results, all five participants expressed a willingness to spend more on body care and fragrance products. When selecting these items, they prioritize factors such as ingredients, scents, and overall user experience. However, for home care and laundry products, price remains their primary consideration.
Ideate and Prototype
The Ideate phase focuses on presenting proposed solutions in diverse ways, thoroughly exploring them to identify the most effective approach.
During this phase, I created numerous paper wireframes and selected the most promising design to advance to the next stage: developing digital wireframes for concept testing. Following this, I refined the design into mockups and prototypes for further evaluation.
Testing and Final Prototype
In the Test phase, I conducted usability tests with four users, collected their feedback, and incorporated the most important suggestions into my final prototype.
The redesigned homepage features an auto-play carousel with six slides prominently displayed at the top center, allowing Nontre to showcase its most popular products and highlight current promotional deals.
A “Best Sellers” section serves as a helpful guide for new customers, highlighting Nontre’s star products that are worth purchasing. The “Fragrance” section categorizes products by their unique scents, helping users better explore and appreciate Nontre’s distinctive offerings.
Additionally, the homepage includes practical information such as store hours, locations, and recent magazine features. These elements enhance the brand’s credibility and build trust with customers, reinforcing Nontre’s reputation as a reliable and premium choice.
I redesigned the homepage menu categories to improve clarity, making it easier for customers to find the products they want within the correct categories. Additionally, I introduced a “filter and sort” bar on the categories page (specifically on the “Hand & Body” page), allowing customers to filter and sort products based on their preferences, making their shopping experience more efficient.
The redesigned product page features a carousel at the top to showcase the product. All product information, including “Description,” “Ingredients,” “Fragrance,” and “Specifications,” is collapsed to maintain a clean and streamlined layout. Customers can easily expand each section by clicking the arrow to view more detailed information.
I also added a “You May Also Like” section, which displays related products to encourage cross-selling. The “Buy Together and Save” section offers targeted discounts to customers when purchasing multiple items. Additionally, the “Recently Viewed” section allows customers to quickly revisit products they’ve previously shown interest in. These new sections were designed to enhance the user experience and drive increased sales through cross-selling opportunities.
Accessibility Considerations
I made all the buttons interactive, when users interact with these buttons, they receive immediate visual feedback through color changes.
When choosing a color palette, I made sure my colors combination met WCAG AA Compliance before building out the UI for each screen.
I am using only one typeface: Karla for headlines and the body.
Mixing too many different typefaces can make website seem fragmented and busy.
Next Steps
In conclusion, there are several actionable steps that we can consider implementing as a follow-up to this project to ensure continued improvement and success.
Update the website for the desktop version.
Design dedicated fragrance pages.
Design a wholesale page.
Introduce short videos on the homepage.