UX/UI Case Study
Jones Road:
Homepage Redesign
Project Overview

As part of a UX/UI design challenge, I was tasked with redesigning the homepage of the Jones Road Beauty website. The goal was to improve visual hierarchy, loading performance, mobile experience, and conversion clarity — without changing the brand’s tone or aesthetics.

Problem

The original homepage had:

Poor visual hierarchy making it hard to scan.

Weak CTA placement (small buttons, inconsistent visibility).Redundant sections leading to longer load times.Accessibility issues: low contrast, small text sizes (<16px), and dense content.

Inconsistent brand storytelling spread across too many blocks.

I ran the homepage through accessibility checkers (Stark / WebAIM), which flagged:

• Low contrast in CTA buttons and quote section.

• Body text below accessibility recommendations (16px).

• Insufficient spacing between blocks, harming readability.

Redesign Goals

1. Improve Visual Hierarchy

- Reorganize layout to make it easier to scan.

- Ensure the most important content (e.g. CTAs, products) appears earlier.

2. Increase Conversion RateStronger

- CTAs with better placement and sizing.

- Clear value propositions (gift offer, video guide, quote/testimonial).

3. Improve Accessibility

-
Increase body text to 16px+.

- Use better contrast (text/background, buttons).

- Use a consistent 6px spacing system for breathing room.

4. Enhance Mobile Usability

-
Prioritize tap targets, scrolling, and content flow.

- Restructure layout for fast product access on mobile.

5. Reduce Bounce Rate

-
Move CTA and key info above the fold.

- Simplify navigation and reduce friction early on.

6. Improve Page Load Speed (Option B focus)

-
Remove non-essential sections (video, quote).

- Minimize DOM size and visual noise.

7. Establish Brand Trust & Credibility

-
Add quote/testimonial with founder name and story.

- Showcase diverse faces in imagery for authenticity.

- Use consistent branding (font, product visuals, tone).

8. Align with Modern E-Commerce Patterns

-
Move featured products directly under hero image.

- Mimic user expectations from other beauty brands (Glossier, Sephora).

9. Unify Typography and Button Styles

-
Consistent sizing, weight, contrast across text and buttons.

- Unified button styles to reduce confusion.

10. Create a Polished, Conversion-Centered Experience (Option A focus)

- Keep all value-building sections (video, quote, gift) for users who want full brand storytelling.

- Ideal for luxury or higher-trust e-commerce.

11. Support A/B Testing Strategy

- Offer Option A as the high-engagement version.

- Offer Option B as the performance-optimized control.

TWo Redesign Variations

Option A – Enhanced User Experience

This version uses all original sections but reorganizes layout for stronger usability and emotional connection.

• Key Improvements:

- Clearer structure & 6px spacing system.

- Better CTA visibility and placement (mobile & desktop).

- Larger, readable typography.

- Highlighted value sections: quote, video, gift offer.

- Stronger brand storytelling and trust signals.

• Results Focus:

- Higher Conversion Rate:
Stronger CTAs + emotional triggers.

- Better Accessibility: All text ≥16px, contrast improved, spacing adjusted.

- Increased Brand Trust: Founder quote, video and testimonials placed higher.

-Lower Bounce Rate: Engaging hero and content flow keeps user interest.

Option B – Streamlined Control Version

A/B variant closer to the original site, but simplified.

• Key Improvements:

-
Removed video, gift, and quote sections.

- Featured products moved higher.

- Focused on fast-loading experience.

- CTAs made stronger and consistent.

• Results Focus:Improved Speed & Focus:

- Fewer distractions.

- Improved Accessibility: Same text/contrast upgrades.

- Maintains Brand Consistency: Familiar layout, less risk.

- Lower Bounce Rate: Direct product access faster on mobile.

Screenshots

Original site: full desktop and mobile screenshots (highlight worst areas).

Option A: desktop & mobile, full scroll + close-ups (CTAs, quote block, etc.)

Option B: same, side-by-side view to contrast structure and hierarchy.

Reflection

This project pushed me to focus on small but high-impact UX decisions, such as improving accessibility and mobile flow. It reinforced how subtle layout shifts can clarify user intent and improve performance — especially in fast-paced e-commerce contexts.

Before & After: Mobile Optimization

Before & After: Desktop Optimization

Original version (Desktop vs Mobile)

Redesign Option A (Desktop vs Mobile)

Redesign Option B (Desktop vs Mobile)

Public-facing poster amplifying the album’s loud and disruptive aesthetic.
next project
cheap imitation
WEB DESIGN
VIEW PROJECT