Universal B2C Website

About the project

Problem

The current multi-brand and product buying experience for our users is outdated, disorganized, and lacks cohesion. Users have limited visibility into our Margot Elena sister brands and cannot easily navigate the connections between them, resulting in a frustrating and unintuitive shopping journey.

Our Project Team

Developer (Ryan M.)

Sr. Project Design Manager (Katrina Z.)

photographer (Charlie K.)

Designer (Katie W. - Me)

Product BA (Jessica S.)

Role & Deliverables

User Experience Design

User Interface Design

User Research & Studies

Design System Creation

Wireframes & Prototypes

Web Design

Product Styling & Image Editing

Objective

This project aims to unify Margot Elena's 7+ beauty and lifestyle brands into a cohesive, elegant, and user-friendly retail website. The responsive, dimensional experience will allow customers to easily shop and explore products, boosting sales, enabling brand discovery, and improving overall user engagement.

Research

User Analytics

User Studies

Surveys

User Interviews

Competitor Analysis

User Journey Map

Personas

Accomplishments

Increased User engagement & brand awareness.

Increased in overall sales across brands in first 7 months of site launch.

Increase in Social engagement across brand channels.

Increase in Wholesale orders in first 3 months of Retail site launch.

User Research

The MECC New Universal Retail Website Design is a comprehensive project aimed at creating a seamless and luxurious online shopping experience for discerning customers of their fragrance, bath, beauty, and home goods products. The project focuses on enhancing user engagement, improving navigation, and presenting their multiple sister brands in a cohesive and appealing manner. This report outlines the key components of the design process, including the user survey, wireframes, prototypes, user journey map, personas, and information architecture.

User Survey

To kickstart the project, we conducted an extensive user survey to gather insights into the preferences, behaviors, and pain points of the target audience. The survey was distributed to a diverse group of existing and potential customers, and it sought to understand their expectations from a luxury e-commerce platform, their preferred ways of discovering new products, and their purchasing habits. Key findings included a strong demand for an elegant, intuitive, and user-friendly interface that allows for easy product comparison and personalized product recommendations. Users also expressed a desire for a seamless checkout process and enhanced mobile responsiveness. These insights informed the design direction and helped prioritize features and functionalities for the new website.

Wireframes

Based on the survey results, we developed a series of wireframes that outlined the basic structure of the website. These wireframes were essential in establishing a solid foundation for the website's layout and navigation. They showcased a clean and minimalist design that emphasized high-quality visuals and brand storytelling. Each wireframe was carefully crafted to reflect the luxury aesthetic of MECC, ensuring that the website's design aligned with the company's brand image. The wireframes included sections for each sister brand, a featured product carousel, an easy-to-use search bar, and a streamlined navigation menu that categorized products based on collections and types. The layout was designed to be flexible and scalable to accommodate future growth and the addition of new product lines.

Prototypes

The next phase involved creating interactive prototypes to bring the wireframes to life. These prototypes allowed us to test the website's usability and gather feedback on the user experience. We built the prototypes using industry-standard tools, such as InVision and Sketch, which allowed us to create a realistic experience for users. The prototypes included clickable elements, transitions, and animations to simulate the actual website's functionality. We iterated on these prototypes after conducting usability tests with a sample group of users, making adjustments to enhance the flow and responsiveness of the site. The final prototypes served as a blueprint for the developers to build the fully functional website.

User Journey Map

To understand the user's perspective, we created a detailed user journey map that outlined the steps customers would take from discovering the website to making a purchase and beyond. This map highlighted key touchpoints and potential obstacles that users might encounter. By visualizing the user's experience, we were able to optimize the website's design to be more user-centric, ensuring that each step in the journey was as delightful and intuitive as possible. The map also helped us identify opportunities to introduce personalization and engagement features that would encourage repeat visits and customer loyalty.

Personas

To empathize with the target audience, we developed three primary personas based on the survey data: the 'Indulgent Aesthete', the 'Gift Connoisseur', and the 'Home Sanctuary Curator'. Each persona represents a distinct type of customer with unique preferences and needs. The 'Indulgent Aesthete' is an individual who seeks luxurious products for personal use, values brand storytelling, and is influenced by visual appeal. The 'Gift Connoisseur' is someone who frequently purchases items for others, appreciates product recommendations, and looks for unique and meaningful gifts. Lastly, the 'Home Sanctuary Curator' is focused on creating a serene living environment and is interested in home goods that complement their lifestyle. These personas guided the design choices, ensuring that the website catered to the diverse needs of MECC's clientele.

Information Architecture

The information architecture of the website was meticulously designed to be intuitive and organized. Products are categorized under 'Fragrance', 'Bath & Body', 'Beauty', and 'Home' to align with user expectations. Each category is further broken down into subcategories that reflect the different collections and product types within the MECC portfolio. The architecture also allows for easy filtering and sorting options, making it simple for users to find what they are looking for. The 'Explore' section provides an alternative way to discover products through curated collections and brand stories, fostering an emotional connection with the user.

Summary

The New Universal Retail Website Design for MECC is a thoughtfully crafted solution that combines elegant aesthetics with a seamless user experience. By integrating the insights gained from the user survey, wireframes, prototypes, user journey map, and personas, we have created an information architecture that is both user-friendly and reflective of the brand's luxurious essence. This approach ensures that the website will not only serve as an online storefront but also as an immersive brand experience that showcases the unique qualities of each sister brand. The final design is poised to elevate the company's digital presence and enhance customer engagement, ultimately driving sales and fostering brand loyalty.

Competitor Analysis

Competitor #1

Mankind , a luxury fragrance, bath, beauty, and home goods company, offers a sleek and sophisticated digital experience tailored to the modern gentleman. Upon entering the website, visitors are greeted with a minimalist yet striking homepage that showcases the brand's top-tier product offerings. The monochromatic color scheme with pops of blue is not only pleasing to the eye but also aligns with the brand's masculine identity.

The navigation bar is neatly organized into clear categories, making it effortless to locate products of interest. The search function is prominent and intuitive, providing instant access to a vast array of luxurious items. The product images are high-resolution and accompanied by concise, informative descriptions that highlight their unique features and benefits.

The product pages are particularly well-designed, displaying multiple angles of each item and including customer reviews that build trust and aid in decision-making. The 'Add to Bag' button is strategically placed and stands out, making the purchase process swift and efficient. Moreover, the website offers a 'Wishlist' feature, allowing users to save their favorite products for later consideration or sharing with others.

One notable aspect is the 'Grooming Hub' section, which provides educational content, helping users to choose the right products for their needs and offering how-to guides for various grooming rituals. This feature not only enhances the user experience but also establishes the brand as an authority in the men's grooming space.

Competitor #2

Crabtree & Evelyn's website transports users to a serene, English countryside retreat with its soft color palette and elegant typography. The homepage is adorned with stunning imagery that showcases the brand's commitment to quality and tradition. However, the navigation could be more straightforward, as the categories are somewhat hidden under a hamburger menu, which might be less intuitive for some users.

The product pages are rich with information, detailing the brand story, product ingredients, and usage instructions. The 'Shop by Collection' feature is a delightful touch, allowing customers to discover products grouped by themes like 'Gardener's Collection' or 'Fruit & Floral'. However, the lack of a 'View All Products' option within each category can make it challenging to explore the full range.

The checkout process is straightforward, but the website could benefit from more visible calls to action, such as free shipping thresholds or promotional codes, to incentivize purchases. Additionally, the lack of a progress bar during checkout might leave some users feeling uncertain about the number of steps remaining.

Competitor #3

Junaid Jamshed's website presents a more traditional aesthetic with a focus on the brand's Eastern heritage. The homepage features a carousel of seasonal collections and promotions, which can be visually overwhelming. The navigation bar is comprehensive, but the placement of the search bar at the top right could be more prominent for ease of use.

Product pages are detailed and provide multiple images, but the information presented can be cluttered, making it difficult to read and absorb. The 'Add to Cart' button is not immediately noticeable and could be more distinct to streamline the purchase process.

The website's 'Collections' section is particularly appealing, as it curates products into thematic sets that align with different occasions and preferences. However, the overall user experience is hindered by the lack of product filters and sorting options, making it challenging to navigate the extensive product range effectively.

Comparative Analysis

When comparing the three websites, Mankind.co.uk stands out for its clean and intuitive navigation, making it easy for users to find what they're looking for. The 'Wishlist' feature and educational content in the 'Grooming Hub' set it apart as a user-centric platform. Crabtree-Evelyn.com excels in storytelling and creating an immersive brand experience, but its navigation could be more user-friendly. Meanwhile, JunaidJamshed.com could benefit from a more modern, organized layout and improved product page UX to highlight its unique selling points effectively.

To enhance the competitive edge, Mankind.co.uk could consider incorporating more visual storytelling elements and lifestyle imagery to further engage visitors. Crabtree & Evelyn might focus on simplifying the navigation and enhancing the product browsing experience with more prominent calls to action. Junaid Jamshed could improve its search functionality and introduce a more organized product categorization system to help users find products more easily.

In summary, while all three websites offer engaging visuals and a range of luxurious products, there is room for each to refine their UX to better serve their target audiences. Mankind.co.uk's strong navigation and feature set could serve as a benchmark for the other two competitors to enhance their digital experiences.

The Solution

MECC is thrilled to introduce its revamped digital presence, a luxurious retail website dedicated to the art of fragrance, bath, beauty, and home goods. The goal of this project was to create an online platform that not only showcases the brand's exquisite products but also immerses users in a multi-sensory experience that resonates with the essence of MECC’s brand identity. Through a harmonious blend of user experience (UX) and user interface (UI) design, we aimed to elevate the brand's digital presence to match the unparalleled quality of its offerings.

New Design UI System

The new design UI system embodies the brand's ethos of sophistication and elegance. Drawing inspiration from the delicate balance of scents and textures found in MECC’s products, we crafted a minimalist yet opulent design palette that allows the products to take center stage. The color scheme is soft and inviting, with hues of white, beige, and gold that reflect the brand's luxurious and timeless appeal. Typography is clean and legible, ensuring that product descriptions and brand storytelling are as delightful to read as the products are to experience. The use of high-resolution imagery and subtle animations adds a touch of dynamism to the site, engaging users and guiding them through an interactive journey of discovery.

Universal Re-brand Design

The MECC brand underwent a meticulous rebranding process to ensure that the digital platform is aligned with its luxurious and refined identity. The logo has been refined, and a cohesive brand style guide has been developed to maintain consistency across all touchpoints. This includes typography, color schemes, and graphic elements that resonate with the brand's luxurious and organic personality. The rebranding efforts extend to product packaging and marketing materials, creating a seamless transition from the digital realm to the physical products.

Shopify Tool Selection

Selecting the right e-commerce platform was crucial for the success of the project. After careful consideration, we chose Shopify for its robust capabilities and scalability. Shopify provides a seamless shopping experience with features such as secure checkout, inventory management, and order tracking. Moreover, its user-friendly interface makes it easy for the brand to manage and update product listings, ensuring that the website remains fresh and engaging. The platform's flexibility allows for easy integration with third-party apps, enhancing the customer experience with functionalities like wish lists, product reviews, and personalized product recommendations.

Responsive Website Design

In today's mobile-first world, a responsive website design is non-negotiable. The MECC website is designed to adapt flawlessly to various devices, providing a consistent and delightful experience whether users are browsing on a desktop, tablet, or smartphone. Each page is optimized for different screen sizes, ensuring that content is easily readable and navigable, and that images are displayed in the best possible quality. This responsive design approach caters to the diverse preferences of luxury consumers, who expect an uncompromised shopping experience regardless of their device of choice.

SEO & Google Analytics Tracking Launch

To enhance the website's visibility and reach a wider audience, we implemented a comprehensive SEO strategy. This included keyword research, on-page optimization, and the creation of high-quality content that aligns with the brand's story and product offerings. Additionally, we integrated Google Analytics to track user behavior and gather insights that will inform future website enhancements and marketing strategies. By understanding how users interact with the site, we can tailor the experience to meet their needs and preferences, ultimately driving conversions and customer satisfaction.

Solution Design

The solution design focuses on creating a seamless user experience that mirrors the brand's commitment to quality and craftsmanship. The website is organized into intuitive categories, making it easy for users to navigate and find their favorite products or discover new collections. The homepage features a curated selection of bestsellers and new arrivals, as well as editorial content that educates and inspires. Product pages offer detailed descriptions, multiple product images, and the option to zoom in on the products to inspect the quality and craftsmanship. The checkout process is streamlined, with secure payment options and clear shipping information to build trust and encourage repeat purchases.

Conclusion

The MECC new luxury fragrance, bath, beauty, and home goods Retail website is a testament to the brand's dedication to providing an unparalleled sensory experience. By combining a sophisticated UI system, universal rebrand design, Shopify's robust tools, responsive design, and strategic SEO implementation, we have created a digital platform that captivates users and invites them into the world of MECC. The website is set to become a destination for discerning consumers seeking an escape to tranquility and indulgence, and we are confident that it will serve as a powerful vehicle for the brand's growth and success in the competitive luxury market.