Natural Elements Redesign

Background

The Natural Elements Redesign project involved a comprehensive overhaul of the online shop specializing in health supplements. Since its establishment, Natural Elements had struggled with visual inconsistency across its various channels, which included the website, social media, and marketing materials.

The goal of this redesign was to create a cohesive and engaging brand experience that accurately represented the quality and efficacy of their health products. This project came with a unique challenge: it needed to be completed in just three weeks due to an upcoming product launch that required the new site to be live. Additionally, the redesign coincided with the decision to migrate the web shop to Shopify, necessitating a seamless transition to the new platform while addressing the existing branding issues.

Responsibilities

Design Thinking, Design System Management, UX Design, UI Design

Research

In order to get a better understanding of the project and the target audience, the first step in this process was Research and Evaluation. This includes defining a project objective:

Create a visually attractive and modern web shop that encourages users to explore the site, thereby reducing bounce rates and increasing the likelihood of conversion.

Following this, the target audience was analyzed, and evaluation goals were established based on the 5Es of usability before commencing the evaluation process:

1. Engaging: Create a visually attractive and modern web shop that encourages users to explore the site, thereby reducing bounce rates and increasing the likelihood of conversion.
2. Effective: Develop a clear and intuitive information architecture that categorizes products logically, making it easy for users to navigate and find what they are looking for.
3. Engaging: Establish a consistent visual identity that reflects the brand’s values and resonates with the target audience. This includes a cohesive color palette, typography, and imagery that work together to create an appealing and engaging online environment.
4. Easy to learn: Design an intuitive user journey that guides customers seamlessly from product discovery to check out, ensuring a positive and satisfying shopping experience.
5. Error Tolerant: Do users encounter errors? If so, how frequently? When errors occur, can users successfully recover? Are the error messages clear and understandable to them?

Evaluation Process

Several evaluation techniques were reviewed, and to gather more precise data, both qualitative and quantitative methods were employed in this usability testing, which includes:

• Heatmap recordings
• User recordings
• NPS survey results

Target Users

In our redesign of the Natural Elements web shop, we took a closer look at who our target users are to ensure our design choices aligned with their needs and preferences. Through this process, we identified a clear profile for our primary audience: young working professionals living in urban areas. Here’s an in-depth look at our redefined target users:

Mobile First

Based on our analytics, 85% of Natural Elements’ users access the web shop via mobile devices. This significant statistic underscored the necessity of adopting a mobile-first design approach. For our target users, young working professionals in urban areas, mobile devices are the primary tool for browsing and shopping online. Therefore, ensuring a seamless, efficient, and engaging mobile experience was paramount in our redesign strategy.

Process

Ideation

We began by analyzing the existing information architecture to identify pain points and areas of confusion. This involved reviewing site navigation, product categorization, and user flows to understand how users interacted with the site.

Based on the findings, we restructured the information architecture to create a more intuitive and logical navigation system. We developed clear categories for health supplements, such as vitamins, minerals, and herbal products, ensuring that users could easily locate the products they were interested in.

A comprehensive sitemap was created to visualize the new structure, highlighting the main pages and subpages. This served as a blueprint for both design and development, ensuring that all elements were accounted for.

Art Direction

The visual design of the Natural Elements web shop was crafted in close collaboration with the Art Director to ensure it aligned with the brand’s values and resonated with the target audience of young urban professionals. The primary goal was to create a clean, modern, and cohesive visual experience that reflected the simplicity and clarity essential to health and wellness, while also maintaining a fresh, urban touch.

Together with the Art Director, we established a sleek and minimalist aesthetic that emphasized clarity, trust, and modernity. This was critical to positioning Natural Elements as a premium, user-friendly brand in the health supplement market. The design aimed to feel approachable yet professional, inspiring confidence in users browsing for wellness products.

Söhne Font: To complement the modern and minimalist design, we selected Söhne, a versatile sans-serif font. Known for its clean lines and readability across platforms, Söhne perfectly suited the diverse resolutions and devices used by Natural Elements’ mobile-heavy audience. Its flexibility allowed us to maintain visual harmony across the site while ensuring optimal readability, whether in product descriptions, calls-to-action, or promotional banners.

Readable and Elegant: The sans-serif nature of the font provided a sense of modernity and simplicity, enhancing the overall user experience. Its clear, geometric forms made the content easy to read, ensuring that users could quickly find the information they needed without feeling overwhelmed.

Black and White: The primary color scheme of black and white created a sophisticated and timeless backdrop for the web shop. This monochrome palette not only conveyed simplicity but also gave the site a refined, urban edge, appealing to the target demographic. The minimal use of color allowed the products and imagery to stand out, creating a visually striking and clean interface.

Category Colors for Contrast: To avoid monotony and add visual interest, each product category was assigned its own distinct color. These colors provided contrast against the black and white base, making navigation more intuitive and enhancing the user experience by allowing customers to easily differentiate between product groups. This approach ensured both functional clarity and a more engaging shopping experience.

Focus on Products: The restrained color palette and clean typography allowed the products themselves to take center stage, without distractions. High-quality product images, highlighted by the neutral background, stood out more clearly, allowing users to focus on the benefits and features of each item.

Urban Minimalism: The combination of black and white, coupled with the minimalist design language, gave the site a distinctly urban feel—perfectly suited to the fast-paced, health-conscious lifestyles of young professionals.

Wireframing

To translate the new information architecture into a functional layout, we created low-fidelity wireframes for key pages, including the homepage, category pages, and product detail pages. These wireframes focused on layout, content placement, and user interactions without the distraction of visual design elements.

We conducted a review session with the client to gather feedback on the wireframes. Based on their input, we made iterative adjustments to improve usability and align with their vision. This collaborative approach ensured that the design met both user needs and client expectations.

High-Fidelity Mockups

With approved wireframes in hand, we moved on to create high-fidelity mockups that incorporated the new visual identity for Natural Elements. This involved selecting a cohesive color palette, typography, and imagery that reflected the brand’s values of health, wellness, and nature.

We ensured that all visual elements aligned with the brand’s personality, using calming colors and organic shapes to create a welcoming atmosphere. The design included high-quality images of products and lifestyle shots to enhance visual appeal and engage users.

User Testing and Feedback

After the testing sessions, we analyzed user feedback to identify areas of confusion or frustration. Key insights included suggestions for simplifying the checkout process and improving the visibility of promotions.

Based on the testing results, we made necessary adjustments to the design, refining navigation elements, enhancing calls-to-action, and optimizing the layout for better clarity. This iterative process ensured that the final design would meet user expectations and improve overall usability.

Collaboration with Developers

Once the final design was approved, we prepared comprehensive design specifications and documentation for the development team. This included style guides, design assets, and annotated mockups to ensure accurate implementation.

Throughout the development process, we maintained open communication with developers to address any questions or challenges that arose. This collaborative approach helped ensure that the design vision was faithfully realized in the final product.

Quality Assurance

Before the official launch, we conducted a thorough review of the implemented web shop to ensure that all design elements were functioning as intended. This included testing responsiveness across different devices and browsers.

Post-launch, we established a feedback loop with the client to monitor user engagement and gather insights for future iterations. This allowed us to make informed decisions on further enhancements and optimizations.

Outcome

The redesign of the Natural Elements web shop had a significant positive impact on both user experience and business outcomes. By aligning the design with user needs, optimizing for mobile, and creating a visually cohesive and intuitive platform, we were able to achieve notable improvements across several key metrics.

Following the redesign, Natural Elements saw a substantial 15% increase in the Average Order Value (AOV). The streamlined user experience and improved product discovery allowed users to find and add more products to their carts, increasing the overall basket size.

Also, a crucial indicator of success was the increase in customer satisfaction as reflected in Trustpilot reviews. Prior to the redesign, Natural Elements had a Trustpilot rating of 4.3. After the redesign, this rating increased to 4.7, a testament to the improved user experience, the clearer product information, and the seamless mobile shopping experience.

Before

After

Reflection

The redesign of the Natural Elements web shop was a success not only in terms of measurable outcomes but also in how it addressed the core challenges identified during the initial research. The process was deeply user-centered, focusing on improving the shopping experience for our primary audience—young urban professionals. By embracing a mobile-first approach, we ensured that the design met the needs of the 85% of users accessing the site via mobile devices.

The decision to design modular components was particularly effective, allowing us to quickly implement changes and add new features as needed, without compromising on design consistency. This approach proved invaluable as it facilitated faster updates and enhanced scalability.

The increased AOV and improved Trustpilot rating demonstrate that users responded positively to the new design, appreciating both the aesthetic improvements and the enhanced functionality. The reduction in bounce rates and improved conversion rates further validated our design choices, proving that a clean, modern, and user-friendly experience can directly contribute to business success.

You can experience the brand at my-ne.com