2023/2024

Luxy Hair Website Redesign

Role: Lead UX Designer

Project Duration: 52 Weeks

Project Type: UX/UI

Tool: Figma

OVERVIEW

A redesign of the Luxy Hair ecommerce experience including the Homepage, PLP, and PDP across desktop and mobile

As the former in-house designer at Luxy Hair, I brought deep understanding of the brand and its customers when I transitioned to the parent company, Beauty Industry Group (BIG). I led this project as the sole designer with support from the Senior Designer on my new team. I owned the full UX process, from strategy and wireframes to prototyping, and delivering final designs. Throughout the project, I collaborated closely with stakeholders from both the Luxy Hair and BIG teams to elevate visual storytelling and improve the user experience in support of key business goals.

PROBLEM

The outdated website struggled to meet today’s UX expectations and didn’t reflect the brand’s identity

Beyond aesthetics, the site needed a strategic redesign to improve every stage of the customer journey, from welcoming new customers, re-engaging loyal customers, and driving stronger conversions and retention.

STAKEHOLDER INSIGHTS

Conversations with the team surfaced many key concerns with the existing website experience

After discussions with the CEO and the Marketing and Creative teams at Luxy Hair, we aligned on key pain points that shaped the strategic foundation of the homepage redesign.

PREVIOUS HOMEPAGE

PREVIOUS PRODUCT LISTING PAGE & PRODUCT DETAIL PAGE

Key Findings:

  • Inefficient User Flow: Both the desktop and mobile experiences lacked clarity and ease. With weak visual hierarchy and key information not clearly prioritized, users struggled to navigate and engage in key areas.

  • Lack of Core Collection Visibility: Homepage didn’t highlight enough core collections, missing a key opportunity to engage with users from the start.

  • Inconsistent Layout: The overall site lacked cohesion, with each section and page following a different style. Inconsistent image sizing, uneven layout structure, excessive scrolling and negative space throughout the page.

  • Lack of Brand Personality: The site didn’t showcase enough of the brand’s voice or story, missing opportunities to create a stronger emotional connection with users.

RESEARCH + STRATEGY

To kick off the redesign, I connected with team members from Marketing, Creative, and Customer Service at Luxy Hair to align on goals and priorities

I partnered with the Growth & Ecommerce Manager to review analytics, heatmaps, and conversion rates to identify key gaps in the previous Homepage, PLP, and PDP. We also audited leading lifestyle and beauty brands to analyze and uncover best UX practices and opportunities for improvement.


I worked closely with the Creative Director to align on layout, image treatments, and how to better integrate visual storytelling. I also met with the Customer Service Manager to understand recurring customer feedback. A key takeaway was the need for more educational content and guidance without needing to contact support.

NEW MOBILE EXPERIENCE

Featuring refreshed hero imagery, a stronger brand voice, and a more intuitive product browsing experience

UX Improvements:

  • Added Clear CTAs & Links: Heatmap analysis showed users were clicking on non-interactive areas, so I introduced more intentional CTAs and links to guide users to the product/info.

  • Additional Visual Content: Integrated more videos, photos, and detailed FYI sections to build trust and support user decision making.

  • Strategic Layouts: I balanced brand storytelling with product discovery using impactful hero imagery, curated sections, and carousels to make information more digestible.

  • Integrated Interactive Tool: Added the new Virtual Color Match to the Homepage and PDP to offer users instant help without waiting for a response from support.

  • Mobile First Design Approach: With most users shopping on mobile, I designed with a mobile-first approach to improve the browsing and purchasing experience on smaller screens.

DESIGN DECISIONS: TYPOGRAPHY + COLORS

The New UI Kit: Reflecting the brand refresh

The Creative Director introduced a new serif and sans serif typeface pairing, along with a refreshed color palette that replaced the pomegranate pink with a soft sky blue and complementary neutrals to reflect the brand’s cleaner, more modern aesthetic.

For UI elements, I worked with the Creative Director and Senior Designer to finalize a set of intuitive icons for desktop and mobile, and aligned on versatile black and white button styles that could scale across the site.

DESIGN DECISIONS: MOODBOARD

The moodboard features a mix of aspirational brands and elements that the Luxy Hair team admired and wanted to capture in the redesign. From typography and imagery to editorial layouts, and storytelling, it helped highlight how we could seamlessly blend lifestyle content with product promotion.

DESIGN DECISIONS: LOW-FIDELITY WIREFRAMES

These were the final low-fidelity wireframes I presented to the Luxy Hair team. After multiple rounds of feedback and iteration, all stakeholders agreed these were the strongest layouts to move forward with.

I walked the team through each design, explaining the rationale behind the layout decisions and how they reflected both the user insights and internal feedback. Since low-fidelity wireframes can be difficult to visualize without real content, I made sure to clearly communicate the strategy and connect it back to the research and references we gathered earlier.

HOMEPAGE WIREFRAME - DESKTOP & MOBILE

PLP WIREFRAME - DESKTOP & MOBILE

PDP WIREFRAME - DESKTOP & MOBILE

DESIGN PROCESS

During the high-fidelity design phase, I worked with the Luxy Hair copywriter to make sure the copy fit within the design and character limits. This collaboration helped keep the copy clear and concise while still bringing through the brand’s personality.

NEW PLP & PDP MOBILE DESIGN

TRUST THE PROCESS

Leading the redesign with my brand knowledge, I leaned on my team for their UX expertise to refine the design through reviews and iterations

With the Senior Designer and Product Manager involved throughout, we ensured nothing was missed during handoff and development. I also supported QA alongside the Product Manager, working directly with the developer to keep the final build true to the designs.

FINAL DESIGN

The updated website successfully brought together the needs of the team, the business, and the users

Across the redesigned Homepage, PLP, and PDP, I improved product visibility by establishing a stronger content hierarchy and a strategic layout system that balanced storytelling with conversion. I introduced consistent image dimensions, clearer CTAs, and more intuitive navigation to create a smoother experience for all users.

One of the most exciting additions was the Virtual Color Match tool, designed to help customers find their perfect shade with confidence, without needing to contact support. Overall, the redesign aligns with the brand’s refreshed direction and delivers a more cohesive, user-friendly shopping experience.

HOMEPAGE - FINAL UPDATED DESIGN (MOBILE)

HOMEPAGE - FINAL UPDATED DESIGN (DESKTOP)

PLP - UPDATED DESIGN (DESKTOP & MOBILE)

PLP - FILTERS OPEN (DESKTOP & MOBILE)

PLP HOVER PROTOTYPE

To show the interaction on the product listing page, I created a quick prototype showcasing the hover state behaviour.

PDP - UPDATED DESIGN (DESKTOP & MOBILE)

IMPACT & RESULTS

After launch, we saw a strong lift in engagement, with 64% of traffic driven by new visitors landing on the Homepage

Heatmaps showed high engagement across key homepage sections like, Core Collections, the Virtual Color Match tool, and single product hover area on both desktop and mobile. Users were also scrolling deeper and engaging more throughout the page, which confirmed that the new layout and experience were resonating.

On mobile, users were scrolling significantly deeper and often reached the end of the page, which was a big win considering the longer scroll on smaller screens. The new All Collections section on PLP also saw strong engagement across desktop and mobile, reinforcing that intuitive navigation made it easier for customers to browse.

A standout moment was the Loved by You video section, which performed well on both the homepage and PDP. It confirmed our early insights that authentic, relatable content drives stronger connection and interaction.

CHALLENGES & TAKEAWAYS

One of the main challenges was finding balance between the CEO and Marketing’s sales driven goals and the Creative team’s focus on visual cohesion

While the marketing side pushed for more product visibility and copy heavy content, the creative team prioritized visual cohesion. This sometimes led to conflicting feedback, as some felt the design lacked detail, others found it too dense.

I worked closely with the Senior Designer to balance business objectives and user needs, using feedback to refine the designs and ensure nothing was overlooked. Having a second perspective helped identify gaps I hadn’t noticed, and together we found the right balance without leaning too far to either side.

REFLECTION

What helped this project run smoothly, even with roadblocks, was maintaining open and good communication across the team

As my first end to end UX project, this experience gave me valuable exposure to cross-functional collaboration, aligning on strategy, sharing insights across various departments, and building a cohesive visual story together. I also had the opportunity to see the full process through from early strategy to final handoff and development.

Beyond design, this project strengthened my skills as a collaborator and problem solver. It challenged me to think strategically, communicate clearly, and approach both user needs and team dynamics with empathy.

A key lesson from this project was the need to integrate copy earlier in the design process

Using placeholder text during high-fidelity design led to layout issues when the final copy arrived and didn’t fit into the designs as expected. This required multiple revisions to keep the messaging clear, concise, and on brand, which ultimately affected our timeline. This experience helped us recognize the importance of giving equal attention to both copy and visuals for a unified design.

NEXT: