Portfolio
UI Design
5 min read

From clicks to delight: How I Transformed the Maison de la Praline Website Experience

I identified usability and accessibility challenges on the Maison de la Praline website then redesigned and built an optimized UI/UX that highlights artisanal products, ensures WCAG compliance, and provides a smoother, more engaging customer journey. The new design is fully responsive, improves product discoverability, and enhances overall user satisfaction. This redesign, approved by the CEO for my portfolio, showcases my ability to turn user pain points into visually appealing and functional digital experiences.
Published on
25 June 2025
Tools Used
Figma
OpenIA

The Original Homepage

‍
I started by reviewing the existing Maison de la Praline homepage to understand what was working and what could be improved from a UI/UX perspective, accessibility, and product presentation.

Current Homepage Analysis

Strengths

  • Branding and Visual Identity – The hero banner effectively presents the brand with the Praline Rose product front and center. Warm, appetizing colors (reds, pinks, browns) match the confectionery theme, creating emotional engagement. The logo and partner badges add credibility.

‍

  • Visual Hierarchy – The hero section draws attention immediately with a large product image and title. Sections are clearly separated (hero → news/updates → product ranges), making scanning easy. The two product ranges (“Gamme Labo” vs “Gamme Retail”) are visually distinct, allowing quick recognition.

‍

  • Navigation and Structure – Top horizontal navigation has clear categories (“Nos produits”, “Savoir-faire”, “Visite”). The footer includes key links, contact info, and partner logos, enhancing trust.

Weaknesses / Areas for Improvement

  • Text Density and Readability – Central sections (company description, event announcements) are text-heavy with little visual relief. Small font size reduces readability.
    Recommendation: Use bullet points, subtitles, and icons to break up dense text; shorten paragraphs for F-pattern reading.

‍

  • Call-to-Action (CTA) Visibility – Main CTA (“Découvrez la fabrication de la Praline Rose”) is present but blends into the visuals. Product images are clickable, but no strong textual CTA like “Voir la gamme complète.”
    Recommendation: Use higher-contrast buttons, place CTAs in Z-pattern “hot spots” for maximum impact.

‍

  • Mobile Responsiveness – Large images and multi-column sections may not adapt well to mobile. Navigation could feel cramped on small screens.
    Recommendation: Stack sections for mobile-first design, enlarge touch targets and buttons.

‍

  • Accessibility – Some text on images may have insufficient contrast. No ARIA navigation cues.
    Recommendation: Improve contrast to meet WCAG guidelines; ensure critical text is HTML-accessible.

‍

  • User Engagement Elements – No animations, guided actions, or interactive elements beyond static navigation. The “Actualités” section is underdeveloped.
    Recommendation: Add subtle hover animations on CTA elements or interactive previews; hide or populate news sections only when content is available.

Overall Evaluation
The homepage has strong branding and a consistent color palette aligned with artisanal chocolate. Optimizing readability, CTA visibility, accessibility, and adding subtle interactive cues would make it more engaging while respecting the MAYA principle (Most Advanced Yet Acceptable).

You can check the original Homepage here

(Click on the link)

‍The Solution I Built

I redesigned the homepage in Figma based on this analysis.

When presenting the case, I include:

  • An image of the original homepage to show the starting point.
  • The redesigned Figma prototype, highlighting improved layout, typography, CTA visibility, and accessibility enhancements.
  • A summary of the changes:
    • Clearer hierarchy and spacing for easy scanning.
    • Enhanced CTA buttons in strategic locations.
    • Mobile-responsive layout with stacked sections and larger touch targets.
    • Improved color contrast and WCAG compliance for accessibility.
    • Subtle interactive cues to guide user attention and engagement.

‍

You can check here the new design of the Homepage

(Click on the link)

This homepage redesign, approved by the CEO to showcase in my portfolio, demonstrates my ability to analyze a page and translate that analysis into a cleaner, more engaging, and accessible digital experience.

‍

See other projectsBack to Homepage