FINAL OUTCOME
137%+ 4M+ Revenue Monthly Users Worldwide
The design of a global e-commerce platform, spanning Western Digital and SanDisk, has been launched in over 23+ languages, 30+ countries worldwide! Impact: - Monthly Active User reached 4 million worldwide - 75% increase in mobile traffic in 1 month - boosted cart conversion rate by 68% - increased sales by 137% in 1 month
My Role
Sr. UX Design — Interaction Design, Visual Design, User Research, Wireframes, Prototyping & Coordinator
Tools
Adobe XD
Figma
Photoshop
Team
Ahmand H, UX Lead
Claudia M., UXIA
Nishan N., SWE
Susie H., PM
Live Link
Crafting an immersive shopping experience for Western Digital retail website across three brands, increasing product discovery and business profits through thoughtful design efforts.
/w=3840,quality=90,fit=scale-down)
The image on left: Desktop and mobile views of previous websites of 3 brands.
The image above: The new system of Western Digital retail website features all three brands with a design for multi-devices
PROJECT BACKGROUND & PROBLEM
Western Digital, known for its data storage solutions, including SanDisk and G-Technology, manages three separate websites. Originally designed for enterprise use, these sites were later adapted for everyday consumers. However, they are underperforming with
High bounce rates
Low conversion
High mobile bounce rates
Low customer satisfaction
There are three individual websites for each brand:
Homepage of Western Digital
Homepage of SanDisk
Homepage of G-Technology
The menu and navigation of the three websites are not consistent:
Similar products are divided among brands and listed separately on each brand's website
THE MARKET OPPORTUNITY
We expanded our market presence by listing products on major e-commerce platforms, achieving over $50 million in sales. This success highlights a significant market opportunity and sets the stage for strategic design initiatives to enhance our platform and accelerate brand growth.
THE USERS
To better understand our users, I conducted a series of persona and user journey studies. I actively gathered feedback from customer service and conducted interviews with 5 users from two major user types, exploring various segments with different tech levels and shopping habits.
After conducting user interviews, I uncovered distinct segments with diverse shopping behaviors, which will be invaluable for informing design decisions!
Insights:
Pain Points
Time-Consuming Navigation
Inefficient Product Discovery
Overwhelming Specifications
Poor Mobile Experience
Lacking Essential Retail Functions
Expectations
Efficient Navigation & Comparison
Efficient Product Discovery
Simplified Specifications
User-Friendly Mobile Browsing
Comprehensive Retail Functionality
THE AMBIGUITY & CHALLENGE
We wanted to make the websites more user-friendly, but we faced several challenges and uncertainties in this project.
Challenge 1
This is the first time that three brands have changed their representation.
We have no similar examples or user feedback records for guidance or reference.
Challenge 2
How can we design it to provide up-to-date functionality to all users worldwide while maintaining familiarity for existing users, as requested?
How can we incorporate those to redesign a user-friendly website that has been established for years?
THE FINDING
The current design overwhelms users with excessive details on featured products, creating a cumbersome experience for those seeking specific features.
THE PLAN
Enhancing User Experience: Improving Product Discovery and Creating User-Friendly Purchase Platforms
To enhance the overall user experience and create seamless purchase platforms, the focus is on three primary UX strategies:
- Implementing a unified design with consistent layouts and navigation across all three websites.
- Consolidating all products onto a single website to streamline the process of finding and evaluating products.
- Establishing a foundational design system to ensure scalability, maintain cohesive brand representation, and enhance user-friendly navigation across our integrated brands.
Ideate on the Right Problems
“How might we simplify user access to their trusted brand's products and services?” Unify experience — A question of product recognizability v.s. product glanceability
Three websites in one style
All products are available on a single website.
We're consolidating all products onto a single website by creating a unified landing page. This approach merges all three brands under one URL, where each brand's homepage is nested within for a more cohesive and streamlined user experience.
All products under one website
Accomplishment & Result:
Unifying growing and shopping flow and sale events for users via a centralized platform
A cohesive channel for users seeking similar products.
Clearly portray the retail identity to prevent user confusion with a corporate site.
Streamlining the need to search for products on three separate websites
Eliminate the need for signing in and checking out three times for each website
Alleviate sales competition across the three websites
Impact:
- Increasing 4M monthly users worldwide
- Reduced 67% of complaints regarding website issues.
MAJOR DESIGN & BREAKTHROUGH No 1.
Design driven and iterated with research, usability testing, stakeholder collaboration, and creative inspiration.
"How might we simplify user access to their trusted brand's products and services?"
→ Seamless Transition: User’s Trusted Brand Just a Click Away
The landing page serves as the first point of contact for users. To maintain continuity for existing users, we've prominently featured all three brands on the primary tabs at the top. Each tab directs users to dedicated homepages for seamless navigation.
The image above: Primary tabs featuring links to 3 brands throughout the entire website.
Centralized Categorization for All Products across 3 Brands
The image above: Establishing an integrated information structure by combining function-based products from all three brands.
Accomplishment & Result
- Consolidation of three separate brand categories into a unified centralized product system
- Integrate the product search function across all brands.
- Improve browsing efficiency and search comprehension for users.
- Maintain visibility of all three brands in the top tabs for existing users and introduce the collective representation. Simplify brand-focused shopper navigation.
- Assist shoppers who prioritize product function in finding and navigating through products, regardless of brand.
- Provide a clear and functional interface for the shopping experience for users.
Impact:
- 4.2X The average pages per visit for the selected time frame indicates higher engagement.
- A 20% decrease in bounce rate indicates more users staying on this site after the initial page view.
We've unified brand categories to enhance the shopping experience, enabling users to explore products across all Western Digital brands based on their functions. This may appear straightforward, but the integration ensures a cohesive experience, making it easy to access a wide range of products categorized by features and functions. Anticipated benefits include lower bounce rates, higher conversions, and improved user satisfaction, guiding our ongoing design strategy with a strong focus on users.
Prototype that facilitates seamless navigation to the landing page, which showcases all brands collectively. Along with separate homepages for each of the three distinct brands.
MAJOR DESIGN & BREAKTHROUGH No 2.
"How might we help users find desired items effortlessly?”
→ Enhancing User Control in Navigation
Previously, users had to navigate through extensive enterprise product specifications before finding what they needed. Now, we've streamlined the process for easier product discovery. The homepage highlights popular categories, and users can easily switch between brands, product categories, and perform searches from any part of the webpage. This ensures a more intuitive and efficient user experience.
→ Enhancing with Scalability and Glanceability
The image above: Brand System Map for Landing Page
Based on my research findings, I'm implementing landing pages to efficiently showcase the full product range across all three brands.
Our initial focus is on designing a simple web UI that retains familiarity from previous sites, ensuring a seamless transition for users navigating our consolidated brands.
Collaboration with the SEO team is crucial to optimize metadata and on-page elements, aiming to improve search engine visibility, enhance accessibility for screen readers, and meet ADA standards.
Introducing landing pages as dynamic previews is aimed at clarifying our product offerings, building anticipation for the new website, and increasing user engagement with our brands.
Accomplishment & Result:
- Introducing the new official website, "Western Digital" to users, a seamlessly integrated design showcasing three brands, characterized by a contemporary and cohesive user interface.
- Sustaining familiarity among the current user base.
- Improving search engine visibility
- Enable screen readers for users with visual impairments
Impact:
- Increase the website visit duration by 5 times
- Amplifying web accessibility and inclusivity
- The term "Western Digital" generates the highest organic traffic.
- The searched term "Western Digital" generates the most paid traffic.
(after 3 months of launching)
MAJOR DESIGN & BREAKTHROUGH No 3.
"How might we help users keep track of their targeted products during comparisons?”
→ Update the website with rotating product cards to reduce user cognitive load
The image above: Rotation System Map for Landing Page
Following user testing, we found a group, especially those who research before purchasing, tend to revisit products.
To enhance the platform experience, we conduct workshops with these users to understand their decision-making process. We're implementing rotating displayed information to reduce cognitive load, helping users locate previously viewed products more easily. This change aims to streamline product discovery and improve user satisfaction.
Accomplishment & Result:
- Aid users retrieve information easily when they come back for their next visit.
- Enhances user engagement by presenting fresh content during subsequent interactions.
Impact:
- 5X the visit duration time
- 75%+ Clicks on calls-to-action
- Anticipate an uptick in the return rate.
MAJOR DESIGN & BREAKTHROUGH No 4.
Cohesive Visual Language: Triple the Selections, One Unified Style
By merging three brands into one website, we aim to unify their visual identity and streamline the browsing experience. This approach enhances user familiarity and ensures consistent navigation across our digital platforms. We have two options: consolidating all products under one site while maintaining a consistent style for all three brands. This integration simplifies access to a diverse range of offerings, fostering user engagement, loyalty, and an overall improved experience.
Accomplishment & Result:
- Ensured that our websites are effortlessly browsable and user-friendly for everyone, a harmonized visual identity with 3 brands presents a cohesive online presence to users.
- Prioritized user convenience by implementing streamlined navigation across the entire website. This ensures that users can effortlessly find what they need, ultimately enhancing their overall experience.
Impact:
- Remarkable Conversion Rate: Achieved an outstanding conversion rate increase of over 68%, indicating a significant boost in user engagement and successful interactions.
- Global Mobile Traffic Surge: Experienced a substantial increase with 1.67 million monthly mobile visits from around the world, signifying a widespread and growing user base.
- Enhanced Engagement: Achieved exceptional user engagement metrics, with interactive elements driving an impressive increase of over 72%, reflecting a higher level of user interaction and satisfaction.
- Reduced Bounce Rate: Successfully lowered the bounce rate by 20%, indicating improved user retention and website stickiness.
- Extended User Visits: Users now spend five times longer on the website, demonstrating increased user satisfaction and prolonged engagement.
- Expanded Page Views: The average pages per visit increased by 4.2 times for the selected time frame, reflecting improved navigation and content discovery on the website.
The image above: Content Rotation and Component System Map for Storefront Landing Page and Brand Homepages
The image above: Screenshots of the Storefront Landing Page and Brand Homepages
MAJOR DESIGN & BREAKTHROUGH No 5.
“How might we optimize the browsing experience for users accessing our website via mobile devices?” → Building the Design with Mobile First at Its Core
The image above: Former mobile view of three websites
No team was responsible for checking the accessibility of websites On mobile, it's even more challenging for users to browse or interact.
We addressed website accessibility gaps, particularly for mobile browsing, by establishing a new design system centered on foundational elements like atoms. Our approach optimized character counts for responsive design and employed high-contrast color pairings for readability. We evolved typography across desktop and mobile interfaces, refining Google fonts, spacing, interactive elements, and Call-to-Action buttons. Working closely with WebOps, we integrated text alternatives for images to enhance SEO and inclusivity. These enhancements not only elevate user experience but also underscore our commitment to inclusivity and usability, fostering a positive user journey and strengthening our digital presence.
Key Design Improvements:
- Responsive Character Counts: Optimized for best practices in responsive design.
- High-Contrast Color Pairings: Enhancing readability across all devices.
- Typography Evolution: Streamlined for consistent performance on both desktop and mobile platforms.
These adjustments ensure compatibility with screen readers and improve keyboard navigation, aligning with accessibility standards. They represent our dedication to inclusivity and usability, essential for enhancing user experience and digital engagement.
We laid the groundwork for our new design system starting with this particular layout, embodying the concept of atoms as its foundational elements.
The image above: Character count optimized for responsive design's best practices.
The image above High-contrast color pairing optimized for superior readability in responsive design.
The image above: Typography Evolution Across Desktop and Mobile in the New Responsive Web Design System
We carefully adjusted the styles and sizes of fresh Google fonts, element spacing, interactive dimensions, and Call-to-Action button verbs. Paired high-contrast colors were chosen for screen reader compatibility. Collaborating with WebOps, we improved keyboard navigation and added text alternatives for images, boosting SEO and accessibility, especially for users with motor impairments. These changes enhance user experience, affirming our commitment to inclusivity and usability, paving the way for a better user journey and bolstering our digital presence.
The image above visually represents the web component system. This encompasses the arrangement of copy to verify color contrast, as well as specifications for title font size and weight, tagline size and weight, CTA element, and spacing. These elements have been fine-tuned for optimal performance across the widest desktop and the most compact mobile viewports.
Accomplishment & Result:
- Achieved designing a seamless and visually appealing responsive system ready for 22+ languages, supporting reading from both left to right and vice versa.
- Create more inclusive website experiences for all users by revamping site-wide elements impacting usability and WCAG compliance
- Empower the website to adapt seamlessly to all screen sizes, enhancing the user experience and accessibility on various devices
- Prioritized user convenience by implementing streamlined navigation across the entire website. This ensures that users can effortlessly find what they need, ultimately enhancing their overall experience
- A visual reference guide was distributed across all involved department
Impact:
- Remarkable Conversion Rate: Achieved an outstanding conversion rate increase of over 68%, indicating a significant boost in user engagement and successful interactions.
- Global Mobile Traffic Surge: Experienced a substantial increase with 1.67 million monthly mobile visits from around the world, signifying a widespread and growing user base.
- Enhanced Engagement: Achieved exceptional user engagement metrics, with interactive elements driving an impressive increase of over 72%, reflecting a higher level of user interaction and satisfaction.
- Reduced Bounce Rate: Successfully lowered the bounce rate by 20%, indicating improved user retention and website stickiness.
- Extended User Visits: Users now spend five times longer on the website, demonstrating increased user satisfaction and prolonged engagement.
- Expanded Page Views: The average pages per visit increased by 4.2 times for the selected time frame, reflecting improved navigation and content discovery on the website.
THE COLLABORATION
Ensure early buy-in and alignment on project goals with stakeholders
In my role, I bridge stakeholders and project goals, ensuring early alignment across departments like PMO, Web Ops, and UxD. I lead collaborative efforts, creating new website components through visual mock-ups on FigJam for cohesive design understanding. Stakeholders, including PMMs and VPs from each brand, participate in workshops to shape designs tailored to their unique needs, akin to orchestrating a symphony of critical decisions.
WIREFRAME and PROTOTYPE
FINAL OUTCOME
An effortless shopping experience to users
- Easy access to products, technology, and brands directly from the landing page
- Prioritizing useful retail functionality over flashy features
- Universal access to products, regardless of brand categorization
- Comfortable browsing experience in various environments and with visual aids
- Seamless navigation on all devices, eliminating user frustration
- Strong commitment to inclusivity and accessibility, ensuring a welcoming experience for all users
Web platform:
Portable device platform:
Design System: Ensuring the design system can accommodate future product additions and updates without requiring significant overhauls.
Major 10 Features Launched:
- Instantly preview all three brands from the new website's landing page
- Seamlessly access three brands with a single click throughout the site
- Browse and categorize products collectively from all three brands
- Craft a simple and intuitive website interface that immediately engages users from the landing page, instantly captivates users, efficiently communicates the retail functionality, and establishes the official retail website's credibility.
- Reduce users' memory load by rotating information on the landing page and homepage of each of the 3 brands.
- Introduce a unified style and cohesive browsing functionality across all three brands for users
- Implementing an accessible system involves making adjustments for font and color, as well as enabling screen reader and keyboard navigation.
- Develop a comprehensive system that ensures seamless website performance on diverse devices while streamlining design to adhere to WCAG 2.1 AA and ADA standards, promoting inclusivity and accessibility.
- Implement the new user-centric design system globally in over 22 languages, even in regions without commercial support. Users worldwide now enjoy a delightful experience, whether searching for official user manuals or downloading software.
- Formed the foundation of WD's new design system for its digital space.
Impact on Everyday Users with UX Metrics:
Impact on Enterprise Users with UX Metrics:
Impact on Business Metrics:
Impact on the Organization:
- Collaboration across departments involving members from CEO, PMO, Web Ops engineers, and other designers.
- Reduced the effort required for web operations and implementation of bi-weekly updates
- Increasing design level efficiency and inclusivity for bi-weekly updates
- Develop comprehensive visual examples and documentation to facilitate collaboration with stakeholders and cross-functional teams for website marketing and feature promotions
- Customized Jira ticket templates for a more efficient request process for the new website
- Establish a set of design guidelines and accompanying library that enables designers from different countries and branches to collaborate effectively within the new system
- Effectively mitigates legal risks that existed previously.
- Distributed visual reference guides comprehensively across all involved departments
My take away
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ― Alex Schleifer, Airbnb
In the words of Alex Schleifer from Airbnb underscores the importance of revamping not just what we create but how we create it.
Creating a system is much like crafting a product. It's an ongoing process of refinement guided by user feedback. Collaboration is key, as it thrives on the collective effort of diverse talents to create something user-friendly and effective.
Reflecting on my journey, I'm excited about the growth of my soft skills. I've learned to balance user experience with visually appealing designs, aligning them seamlessly with our brand and product objectives. This journey has been enriched by my collaboration with the product team and CMO, all working towards shared business goals.
I've produced numerous layouts and art directions, resulting in the release of new images and Product Assets. Seeing these designs come to life and reach a wide audience is incredibly fulfilling.
But what truly brings me joy is the realization that, as a united team, we're making a significant impact. By providing accessibility solutions in regions where ADA compliance or accessibility guidelines are lacking, we're creating meaningful change and promoting inclusivity.
This achievement is personally meaningful, and I'm proud to have played a part in making a positive impact through our collective efforts."
Involving cross-functional partners from the beginning enhances design strength
It guarantees a holistic project progression, considering content strategy and technical feasibility from the outset.
Identifying opportunities at the intersection of technical constraints, user experience, and visually pleasing designs.
Examining limitations from various perspectives helps in developing innovative solutions to overcome them.
Ambiguity can serve as a source of inspiration
The lack of prior references forced me to harness my creativity and explore uncharted territory, leading to delightful and unexpected solutions.
Contact me to learn more about the complete design process
Check my other works related to 2C experience
/w=1080,quality=90,fit=scale-down)
SanDisk Memory Cards Showcase Project
SanDisk Extreme Pro CFexpress® Card Project
Crafting User-Centric Experiences | Let's Connect: