B2C Brand & Marketing — Katie's Portfolio Website

About the website re-design

Problem

Tokyomilk, a distinguished retailer of luxury bath, body, fragrance, and candle products, has recognized the need to revamp their digital presence to align with the evolving preferences of their discerning clientele.

The previous website, while showcasing their unique and artisanal product range, failed to meet the standards of the modern age and responsive technology needs of the evolving digital landscape. The website lacked the elegance and intuitive navigation that one would expect from a luxury brand, resulting in a less than optimal user experience that deterred customers from exploring and purchasing the products.

Moreover, the site's mobile responsiveness was not up to par, which is crucial in today's mobile-first world, and the checkout process is cumbersome and lacking in accessibility, leading to abandoned carts and missed sales opportunities.

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

Digital Email Campaign Marketing

Social Media Design Campaign Marketing

Objective

The primary objective of this UX/UI redesign project is to elevate and modernize the digital and accessibility experience of the Tokyomilk brand, making it as captivating, delightful, and trend-setting as their products. The new website will serve as an immersive and sensory digital emporium that not only reflects the brand's quirky and sophisticated aesthetic but also enhances usability, accessibility, and customer engagement. The redesign aims to create a seamless browsing experience across all devices, with a particular focus on mobile optimization, ensuring that customers can indulge in the Tokyomilk experience anytime, anywhere. Additionally, the project will address the checkout process to make it swift and secure, thereby reducing cart abandonment rates and increasing conversion. Furthermore, the new website will feature an enhanced navigation system, making it easy for users to explore the extensive product catalog. The product search and filter options will be refined to deliver personalized and relevant results, catering to individual preferences and needs. The checkout process will be streamlined with a one-page checkout design, multiple payment options, and clear shipping information, aiming to boost customer satisfaction and loyalty. The ultimate goal is to boost online sales, enhance brand awareness, and create a platform that truly captures the essence of Tokyomilk, leaving a lasting impression on all who visit.

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

Research & Analysis

Tokyomilk is a renowned brand that specializes in creating luxurious and unique bath, body, fragrance, and candle products that transport users to an enchanting world of scents and experiences. To elevate their digital presence and enhance customer engagement, we have developed a new e-commerce platform that embodies the brand's essence of sophistication and creativity. This report outlines the UX/UI solution for the Tokyomilk website, detailing the design system, user experience design, Shopify tool selection, responsive design, personas, shopper user survey, information architecture, user paths, accessibility enhancements, and digital marketing strategies.

The New Design UI System

The Tokyomilk website's UI system is designed to be clean, elegant, and intuitive, allowing the products to be the stars of the show. It features a minimalist aesthetic with high-quality visuals and a soft color palette that complements the brand's packaging. The design language is consistent across all devices and screen sizes, ensuring a seamless brand experience. Typography plays a key role in the UI, with clear and legible fonts that convey the luxurious nature of the products. The design is also optimized for scalability to accommodate future product lines and brand extensions.

User Experience Design

The user experience (UX) is at the heart of our design philosophy. We aimed to create a luxurious and immersive digital environment that reflects the brand's storytelling approach. Users can navigate effortlessly through the website, discovering products through storytelling elements and visual cues that draw them into the world of Tokyomilk. The checkout process is streamlined, offering a frictionless experience that encourages conversion. The website also includes a 'Scent Finder' feature, which guides users to their perfect scent profile based on their preferences, enhancing the overall shopping experience.

Shopify Tool Selection

Shopify was chosen as the e-commerce platform for its robust and scalable capabilities. It allows for easy product management, seamless integration with payment gateways, and reliable order fulfillment. Additionally, Shopify provides a wide range of themes and plugins that can be customized to align with the brand's vision, while also offering advanced analytics for monitoring customer behavior and sales performance.

Responsive Website Design

The new Tokyomilk website is designed to be fully responsive, adapting to the screen size of any device, from mobile phones to desktop computers. This approach ensures that users can enjoy a consistent and delightful experience regardless of how they choose to interact with the site. The responsive design optimizes content and navigation for different devices, making it easy for customers to browse, purchase, and engage with the brand from anywhere.

Personas

To better understand our target audience, we developed several personas that represent the typical Tokyomilk shopper. These personas include 'The Indulgent Aesthete', 'The Gift Connoisseur', and 'The Scent Enthusiast'. By creating these detailed user profiles, we could tailor the website's content, features, and design to meet the needs and preferences of our core demographics, ensuring that each visitor feels understood and catered to.

Shopper User Survey

We conducted an extensive shopper user survey to gather insights into the preferences and behaviors of existing and potential Tokyomilk customers. The survey revealed that shoppers value high-quality images, detailed product descriptions, and an easy-to-navigate website. They also expressed a desire for personalized product recommendations and a rewards program. These insights informed our UX and design decisions, allowing us to create a more user-centric experience.

Information Architecture

The website's information architecture is structured to be both intuitive and comprehensive. It includes clear categories for products, collections, and gift sets, as well as an engaging 'Stories' section that shares the inspiration behind each scent. The navigation is designed to be simple and straightforward, with a mega-menu that allows users to access all product offerings in just a few clicks. A prominent search bar ensures that customers can quickly find what they are looking for.

User Paths

We identified several key user paths to optimize the shopping experience:

1. Discovery: Users can explore products by scent family, collection, or gift ideas.

2. Consideration: Detailed product pages provide all the necessary information, including ingredients, scent notes, and usage suggestions.

3. Purchase: A streamlined checkout process makes it easy to add items to the cart and complete the purchase.

4. Post-Purchase: A seamless integration with email marketing and social media allows for personalized follow-ups and encourages repeat purchases.

Accessibility Enhancements

To ensure that the Tokyomilk website is inclusive for all users, we implemented various accessibility enhancements. These include high-contrast color schemes, alt text for images, keyboard navigation, and a screen reader-friendly design. The website also adheres to WCAG 2.0 AA standards, ensuring that it is accessible to users with visual, motor, cognitive, and hearing impairments.

Digital Marketing Email & Social Campaigns

To complement the website's launch, we developed a suite of digital marketing campaigns that include email newsletters and targeted social media content. These campaigns aim to engage users with the brand's story, introduce new products, and promote special offers. The email design is consistent with the website's aesthetic and includes clear calls-to-action that lead back to the site. Social media assets are optimized for each platform to create a cohesive brand presence and drive traffic to the website.

Solution Design

The solution design for the Tokyomilk website focuses on three main areas:

1. Homepage: The homepage serves as an entry point to the brand's universe, showcasing new collections, best-sellers, and featured products. It also introduces users to the brand story and invites them to explore further.

2. Product Pages: Product pages feature large, high-resolution images, detailed descriptions, and customer reviews. The 'Add to Cart' button is prominently displayed, and users can easily navigate to related products.

3. Checkout Process: The checkout process is simplified and secure, with options for guest checkout, account creation, and various shipping and payment methods.

Testing and Iteration

Throughout the design and development process, we conducted user testing sessions to gather feedback and identify areas for improvement. These sessions informed iterative changes to the website, ensuring that the final product meets and exceeds user expectations.

Analysis Summary

The new Tokyomilk website is a testament to the brand's commitment to luxury and creativity. By focusing on UX/UI best practices, responsive design, and accessibility, we have crafted a digital experience that not only meets but also anticipates the needs of our target audience. The integration of Shopify tools and digital marketing strategies will ensure a seamless shopping experience and ongoing customer engagement. With this project, we aim to elevate the Tokyomilk brand and enhance its online presence, setting the stage for continued growth and success in the competitive luxury retail market.