B2B Wholesale — Katie's Portfolio Website

B2B Website

About the project

Problem

B2B brand partners need a way to access company products to purchase, get in touch with the wholesale company and sales reps, and stay updated on events and promotions to drive product sales and buyer interest.

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

Product Development Support

Design System Creation

Wireframes & Prototypes

Photo manipulation & product design

Objective

To create a website exclusively for brand partners to log in, shop, contact, and learn about events & promotions for all Company brands that is user friendly and initiates higher user engagement, satisfaction, and increases in sales.

Research

User Analytics

User Studies

Surveys

Competitor Analysis

User Journey Map

Personas

Accomplishments

Increased User engagement & brand awareness

Increased sales in first 2 months of site launch for year over year revenue

Increase in Sales inquiries & improved new customer experience satisfaction

Improved Sales Representative experience and satisfaction in sales inquiry process

Research & Analysis

MECC is an esteemed luxury brand specializing in fragrance, bath, beauty, and home goods. To enhance the B2B experience for wholesalers, we embarked on a comprehensive UX/UI design project to create a new wholesale website. This report outlines the key findings from our Wholesaler User Survey, the iterative process of crafting wireframes and prototypes, the development of a user journey map, the creation of detailed personas, and the meticulous information architecture that underpins the new platform. Our goal was to streamline the wholesale purchasing process, improve usability, and ultimately bolster the brand's appeal to its business partners.

Wholesaler User Survey

The project commenced with an extensive Wholesaler User Survey aimed at understanding the needs, preferences, and pain points of our valued wholesale customers. This survey helped us gather qualitative data regarding the current website's usability, feature requirements, and overall expectations. Key insights included the need for a more intuitive navigation system, improved product search functionality, and a simplified checkout process. Respondents also expressed a desire for a more visually appealing and brand-consistent experience that mirrors the luxurious nature of MECC products. These insights laid the foundation for our UX/UI strategy, ensuring that the redesign would address the most critical areas of concern.

Wireframes

The wireframing stage involved creating a visual representation of the website's structure and layout. We focused on clarity, simplicity, and ease of use. Multiple iterations of wireframes were developed based on the survey findings, each one aiming to enhance the user experience. We prioritized a clean, uncluttered interface that would allow the luxurious imagery of the products to shine. The wireframes were designed to facilitate a logical flow of information, guiding wholesalers from the homepage to product categories, detailed item descriptions, and seamless checkout. They also incorporated a responsive design to accommodate various devices, ensuring a consistent experience across different screen sizes.

Prototypes

Upon finalizing the wireframes, we moved to the prototype phase. High-fidelity prototypes were created to simulate the look and feel of the actual website, allowing us to test and refine interactions and transitions. These prototypes were crucial in gauging the effectiveness of our design decisions. Through user testing, we identified areas that required further optimization, such as the need for a more prominent login/register section and a more accessible quick order feature for returning clients. The feedback received from these sessions was instrumental in shaping the final design, ensuring that the website met the diverse needs of our wholesale audience.

User Journey Map

To understand the wholesaler's experience from initial discovery to purchase and beyond, we created a detailed User Journey Map. The map outlined the key touchpoints and potential emotional responses of the users throughout their interaction with the website. It highlighted the need for a personalized dashboard that provides quick access to order history, invoices, and product updates. Additionally, it emphasized the importance of clear communication channels for customer support and a frictionless reordering process. This empathy-driven approach helped us tailor the website to the specific needs of our wholesalers, thereby enhancing their overall satisfaction and fostering long-term relationships.

Personas

Developing personas was a critical step in ensuring our design catered to the various user types that would interact with the website. We identified three primary personas: the Efficient Buyer, the Product Discoverer, and the Brand Enthusiast. The Efficient Buyer is a time-sensitive user who requires quick access to product information and ordering options. The Product Discoverer is more exploratory, seeking to learn about new products and collections. Lastly, the Brand Enthusiast is deeply invested in the MECC story and values an engaging brand experience. Each persona's goals, preferences, and behaviors were thoroughly researched and documented, informing the design of tailored website features and content.

Information Architecture

The Information Architecture (IA) of the new wholesale website was meticulously crafted to support the diverse needs of our users. We employed a hierarchical structure that categorizes products into intuitive groups, making it easy for wholesalers to find and compare items. The IA also included a robust search functionality with advanced filtering options, enabling users to navigate the extensive product range with ease. Furthermore, we designed a dedicated section for each sister brand within the MECC, providing wholesalers with a cohesive yet distinct experience when browsing each brand's offerings. This architecture was validated through card sorting exercises, ensuring that the website's organization made sense to the target audience.

Analysis Summary

The new wholesale website for MECC is a culmination of thorough research, thoughtful design, and iterative testing. By focusing on the needs of our wholesalers and leveraging insights from the User Survey, Wireframes, Prototypes, User Journey Map, Personas, and Information Architecture, we have created a luxurious digital environment that reflects the high-quality products and exceptional service that the brand is known for. The platform is designed to facilitate a smooth and delightful purchasing experience, fostering growth and loyalty among our business partners. The final design combines a sophisticated aesthetic with intuitive navigation and functionalities, setting a new standard in the B2B luxury goods marketplace.

The Solution

MECC, a renowned producer of luxury fragrance, bath, beauty, and home goods, is embarking on a digital transformation with the launch of their new wholesale website. This report outlines the UX/UI solution for this platform, detailing the design system, universal rebranding, Shopify tool selection, responsive design, and digital marketing strategies to ensure a seamless and captivating user experience.

The New Design System

The MECC wholesale website is set to introduce a sophisticated and user-centered UI system. Drawing inspiration from the brand's opulent product line, the design features a clean and minimalist aesthetic, allowing the products to take center stage. A soft color palette, complemented by elegant typography and high-resolution imagery, evokes a sense of luxury and tranquility. The interface is designed with an intuitive navigation structure that guides users through the shopping experience with ease.

Universal Re-brand Design

The website's rebranding efforts are a strategic move to align the digital presence with the company's evolving luxury identity. The new branding will be reflected across the entire digital ecosystem, ensuring consistency and recognition. This includes a refined logo, updated color schemes, and revamped typography that resonate with the high-end market and the brand's commitment to artisanal quality. The design language will be applied to all elements of the website, from product pages to informational sections, creating a cohesive visual narrative.

Shopify Tool Selection

Shopify was chosen as the e-commerce platform for its robust capabilities and scalability. The platform's extensive app library and customization options allow for a tailored solution that meets the unique needs of a luxury wholesaler. Specifically, the site will utilize advanced inventory management tools, a custom checkout experience, and B2B functionalities to streamline the ordering process for wholesale clients. Additionally, integrations with existing CRM and ERP systems will facilitate a seamless backend operation.

Responsive Design

To cater to a diverse range of users, the website will feature a fully responsive design. This means that the layout and content will adapt to different screen sizes and devices, ensuring that the luxurious experience is consistent whether viewed on a desktop, tablet, or smartphone. This is essential in today's multi-device world, where potential clients may discover the brand on various platforms and need a consistent experience to make informed purchasing decisions.

Digital Marketing Campaign Launch

The digital marketing campaign will be a pivotal component of the website's success. A combination of targeted email marketing, social media promotions, and influencer collaborations will be employed to create buzz and drive traffic to the site. The campaign will showcase the brand's story, highlighting the artisanal nature of the products and the emotional connection they create with customers. This narrative will be woven through all marketing materials, including product descriptions, visuals, and content marketing efforts.

Solution Design

The solution design focuses on creating a personalized experience for wholesale clients. The website will feature a login-based system, allowing clients to access exclusive product catalogs, pricing information, and order history. A dedicated account management section will streamline communication with Margot Elena's sales team, providing a one-stop-shop for all their needs. Additionally, the platform will integrate with a wholesale-specific CRM to manage leads, orders, and customer relationships effectively.

Conclusion

The MECC wholesale website represents a significant milestone in the brand's digital journey. The luxurious UI system, universal rebrand design, Shopify-powered backend, and comprehensive digital marketing strategy are all designed to elevate the brand's digital presence and enhance the overall user experience. By combining a stunning visual identity with a user-friendly interface and seamless functionality, the website will serve as a powerful tool for the company's growth in the competitive luxury goods market. The project's success will be measured by increased wholesale inquiries, higher conversion rates, and positive client feedback.