Project Goals & Scope

The primary goal of this UX case study is to identify and address significant usability and accessibility issues on the Daydream website, focusing specifically on enhancing user readability, clarifying product categorization, improving search functionality, and ensuring consistent branding throughout the user journey. By examining these core UX aspects, the study aims to develop targeted design improvements that reduce user friction, enhance satisfaction, and drive higher user engagement.

Specifically, this study addresses the following usability issues:Poor Text Readability:

• Low color contrast between text and backgrounds, making content difficult for users to read.

• Incorrect Product Categorization: Products misclassified in irrelevant categories, creating confusion and frustration during navigation.

• Missing Search Bar on Homepage: Search functionality hidden within secondary pages, negatively affecting user efficiency and ease of navigation.

• Brand and Product Cognitive Dissonance: Misalignment between brand presentation and actual product offerings, causing confusion and undermining trust.

Target Audience

Daydream primarily targets digitally savvy young adults, typically aged 18–35. This demographic values aesthetically pleasing designs, intuitive online experiences, and efficient access to desired products. They expect seamless, visually coherent interactions that align closely with their lifestyle preferences and digital expectations. The audience predominantly engages through mobile and desktop platforms, demanding consistency and clarity across all devices.

Good UX example（Mecca）

Clear Visual Hierarchy: Mecca uses a clean and structured layout with distinct content sections and well-defined typography levels. This allows users to easily scan the page and find information without visual fatigue.

High Text Readability: Unlike Daydream’s low-contrast text on light backgrounds, Mecca ensures strong contrast between text and background, supporting accessibility and improving content legibility across all devices.

Intuitive Navigation: Mecca includes a persistent and visible navigation bar with a clear homepage link (logo), a prominent search bar, and well-labeled categories. This enhances user control and reduces cognitive effort.

Consistent Branding: The visual identity, imagery, and tone of voice on Mecca are cohesive and clearly aligned with the products it sells. In contrast, Daydream’s branding creates confusion by promoting jewelry while linking to unrelated nail items.

Frictionless User Experience: Mecca embodies the principle of “Don’t Make Me Think.” Users can browse, search, and shop without confusion or unnecessary steps, which highlights the effectiveness of a user-centered design approach.

Problem Statement

Despite Daydream's commitment to providing an aesthetically pleasing shopping experience, several critical usability issues significantly impact navigation fluidity, visual comfort, and brand trust.Specifically, user feedback and usability testing have identified these major issues:

• Poor Text Readability

• Incorrect Product Categorization

• Missing Search Bar on Homepage

• Brand and Product Cognitive Dissonance

By clearly identifying these issues, this project aims to conduct targeted user research and implement design optimizations that improve the overall user experience, fostering a more intuitive, enjoyable, and trustworthy shopping environment.

Design Toolkit

Problem 1

The redesigned homepage introduces several enhancements to address identified usability issues: Clearer Navigation Bar: The current page is explicitly highlighted, improving navigational clarity and reducing cognitive load for users.
Prominent Brand Name: The brand name "Daydream" is displayed prominently, ensuring users immediately recognize and connect with the brand identity. Integrated Search Bar: A clear and easily accessible search bar has been added directly to the homepage, significantly reducing user effort and improving search efficiency.
Clickable Product Cards: A neatly organized, uniform-sized layout featuring small cards clearly indicates clickability, helping users quickly navigate product categories and enhancing the overall browsing experience.

In order to improve the browsing experience of users, I have made the following specific adjustments to the category pages:
Optimize page layout: Adopt a clearer and more understandable visual layout, including unified category labels and appropriate spacing, to enhance the readability of the page.
Enhance visual layering: Use clear title fonts and prominent visual cues (such as ICONS and color distinctions) to help users quickly locate target categories.

The redesigned page has significantly improved the user experience. In the new user test:
86% of the users indicated that the redesigned category page was clearer and more understandable.
Users have given positive feedback, pointing out that the new page enables them to quickly and intuitively find the products they need, significantly reducing the time and effort required to search for goods.
This result confirmed that the redesign effectively solved the original problems of disordered classification and difficult navigation, and successfully improved the overall usability and user satisfaction of the website.

Problem 2

Confused Product Categorization
Items like cups appear under unrelated categories (e.g., “Home, Kitchen”), leading testers to choose different paths and causing confusion.

First Click Test: The test result of the optimized product category navigation
To verify whether the redesigned product category navigation is clearer and more effective, I conducted the First Click Test. The test task is: "If you want to buy a cup, where will you find it?"

In the original design, the product classification was not clear. Goods such as cups were placed in irrelevant categories (such as "Home, Kitchen"), which confused 60% of users and made it difficult for them to quickly find the target products.

The test performance of the redesigned page:
The layout of the optimized category page is clearer and more explicit. In the new first-click test, the click behavior of the participants demonstrated significant concentration and accuracy, indicating that they could determine the correct category position of the product more quickly.

According to the heat map data, the user's click behavior is highly concentrated on the correct classification options. The decision- making time of the testers has been significantly shortened, and the target products can be found more quickly. The results of this test effectively confirm that the page redesign has achieved positive results in improving navigation efficiency and the accuracy of user operations, significantly enhancing the smoothness and satisfaction of the user experience.

Problem 3

Missing Search Bar on Homepage: the Daydream homepage lacked a clearly accessible search bar. Users had to navigate to the "Shop" page to initiate a search, significantly increasing their cognitive load and decreasing navigational efficiency. This design choice violated crucial usability heuristics such as visibility of system status, efficiency of use, and user control and freedom.

Principle:
-Nielsen’s Heuristic: User control and freedom

To address this, a clearly visible and easily accessible search bar was prominently integrated into the homepage. This immediate availability aligns more closely with user expectations and significantly reduces the cognitive effort involved in searching for specific products.

A comparative first-click heat map test showed notable improvements after implementing the search bar.
Users exhibited scattered and uncertain clicking behaviors, often misdirected, searching for the hidden search function and causing inefficiencies in navigation.

Post-redesign, user interactions became markedly more focused, with clicks predominantly concentrated around the newly introduced search bar, clearly indicating improved efficiency and reduced cognitive effort. Overall, this redesign has proven effective in streamlining the user experience, resulting in quicker, more efficient product searches and improved overall satisfaction.

Problem 4

The original "About" page prominently featured content and imagery emphasizing a jewelry brand identity (Pisell Jewelry). However, the main call-to-action button on this page unexpectedly redirected users to nail-related products, creating significant cognitive dissonance. This inconsistency misled users and disrupted their expectations, reducing trust and potentially impacting user engagement negatively.

Principles:
-Nielsen’s Heuristic: Match between system and the real world
-Jeff Johnson: Avoid mismatched mental models

To resolve this mismatch, the "About" page was redesigned to accurately reflect both product categories—jewelry and home goods (including nail products). The page content, visuals, and narrative were revised to clearly communicate the broader scope of the Daydream brand, transitioning from exclusive jewelry to everyday beauty and lifestyle goods. Updated the brand story to clarify its historical roots and current product range. Adjusted imagery to incorporate representations of home and beauty goods alongside jewelry. Clearly articulated a cohesive narrative aligning brand messaging with the available products.

User perception significantly improved post-redesign, as demonstrated through comparative 5-second tests: Initially, 100% of participants identified Daydream exclusively as a jewelry website, underscoring the misleading initial impression.
Redesigned Test Result: After redesigning, 75% of participants accurately identified the website as selling home goods, effectively realigning user perceptions with actual product offerings. Consequently, the probability of misclassifying the site exclusively as a jewelry brand dropped dramatically from 100% to 25%. The redesign effectively mitigated the cognitive dissonance previously experienced by users, enhancing brand clarity, user trust, and overall site coherence.

Outcomes

The final design solution for Daydream included a comprehensive redesign of the homepage, navigation bar, category layout, and “About” page. These changes were implemented in a high-fidelity interactive prototype using Figma, incorporating:

• A clear and consistent navigation structure with an active page indicator

• An integrated and prominent search bar on the homepage

• Clean, uniform product category cards with improved hierarchy

• A revised “About” page that aligns with the actual range of products offered

User testing, including first-click tests, preference tests, and 5-second tests, confirmed significant improvements in clarity, efficiency, and brand perception. For example:

• 86% of users preferred the redesigned homepage over the original

• Users located categories and search features faster and more accurately

• Perception of the brand shifted from confusion to coherence, with 75% of users correctly identifying it as a home goods site post-redesign

The design improvements brought tangible enhancements to the overall user experience:

• Reduced Cognitive Load: Clearer layout and navigation reduced the effort required to explore the site.

• Improved Discoverability: The addition of a homepage search bar allowed users to find products faster.

• Increased Trust and Engagement: A more coherent brand narrative decreased user confusion and increased brand credibility.

• Accessible Design: Higher text contrast and better category structure supported both usability and accessibility standards.