

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.
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.
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.
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.
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.
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.


















.jpg)
.jpg)
.jpg)
.jpg)