Note: Brand name and logo have been obscured for client confidentiality.
The Challenge
The user experience was a bit confusing, with no clear value proposition or cohesive design. CRO analysis revealed that 42% of users were 18-24 year old students, with most traffic caming from mobile devices. Other key segments included travelers and working professionals (who qualified for occupational discounts on select materials). Critical issues included:
- Product listing page with no filtering making it nearly impossible to find appropriate materials
- Product pages missing crucial information and no easy way to accesses to the complementary resources
- No cross-selling to suggest companion books or next-level materials
- Cluttered navigation that didn't guide learners through their options
The client needed a UX overhaul that honored the French headquarters' brand while establishing a distinct personality for Italian language learners.
My Role & Approach
As the UX/UI designer, I partnered with the ecommerce manager to analyze the CRO data and reimagine the learning materials discovery experience.
Research & Wireframing:
I used Google's Stitch AI tool to accelerate wireframe creation, allowing us to test multiple structures quickly. Understanding that choosing the right language learning book requires specific information (level, language, format, learning style), I prioritized making these discovery paths clear. I aligned with the PrestaShop developer early to ensure design feasibility and technical requirements were in sync.
Design System Development:
Working with the brand's core red and blue palette, I created an accessible color scale that met WCAG standards. I built a complete design system including:
- Primitive and semantic color tokens
- Typography system optimized for mobile reading and educational clarity
- Component library for PrestaShop implementation
Design Strategy:
I aimed for a design that felt clean fresh, approachable, and encouraging for language learners of the three main targets. Key decisions included:
- Mobile-first approach to serve students browsing on their phones
- Preserved and refreshed the book recommendation quiz, a critical tool helping learners find materials matching their proficiency level and goals
- Reorganized information architecture around how people actually search for language learning materials (by language, level, skill focus)
- Added filtering to the listing page: filter by target language, proficiency level (A1-C2), skill type (grammar, vocabulary, conversation), format, and age group
What I Delivered
Core Shopping Experience (Mobile-First, Responsive):
- Homepage highlighting popular languages and learning paths
- Navigation menu organized to showcase the learning method, languages, and learning needs
- Product listing page with comprehensive filtering (language, level, skill type, format)
- Product detail page with complete learning information: proficiency level, target audience, sample pages, and smart cross-selling of complementary materials
- Drawer cart for quick access without interrupting the browsing flow
- One-page checkout for streamlined purchasing
Educational Features:
- Refreshed book recommendation quiz to match learners with appropriate materials
- Clear level indicators throughout the experience
Design System: Complete PrestaShop-ready design with accessible color palettes, typography and component library.
Visual Assets: Custom timeline graphics for the About page, visually guiding users through the brand's history.
The result is an intuitive, accessible ecommerce experience that helps students confidently find the right language learning materials for their journey, while maintaining the educational excellence of the French parent brand.