Bridging Retail & Mobility through Strategic UX
Project Description
- Title: Le Fleur Responsive Floral E-Commerce Site
- Year of Creation: 2024
- Certification: Google UX Design Professional Certificate
- Team: Solo Project (Sole Designer)
- Role: UX Research, UX Designer, UI Designer, Brand, Logo, & Web Designer,
- Media: Figma (Prototyping & Wireframing), Canva Generative AI (Product Visualization), Canva (Logo Design and Branding)
Objective
Design a comprehensive, responsive e-commerce experience for Le Fleur, a fictional San Francisco floral boutique. The objective was to develop a cohesive brand identity and a mobile-first digital solution that allows busy, on-the-go professionals to seamlessly transition between devices while maintaining a high-fidelity, consistent shopping experience. This project demonstrates my ability to navigate the full UX design cycle: from UX research, initial wireframing, and prototyping to delivering a polished, cross-platform retail experience.
Synopsis
Developed as part of the Google UX Design Professional Certificate, Le Fleur is a responsive web project focused on web responsiveness, accessibility, and user efficiency. As the sole designer, I developed the entire brand ecosystem, including the logo and a custom visual language.
Recognizing that the target demographic (busy professionals working in San Francisco) primarily utilizes mobile devices for high-intent purchases, I prioritized a mobile-first architecture.
UX Research
Competitive Audit: To position Le Fleur effectively in the market, I initiated a competitive audit that balanced local market dominance with national e-commerce standards. I analyzed two direct local competitors with high Google review equity to map immediate user expectations, alongside one indirect national competitor specializing in digital subscription models to identify scalable, high-conversion design patterns.
Insights:
Accessibility as a Competitive Advantage: Competitor mobile experiences suffered from weak visual hierarchy and hidden navigation elements. I identified a massive opportunity to out-position local players by designing a WCAG-compliant interface featuring explicit mobile search filters and clear visual anchor points, reducing cognitive load for users ordering under tight timelines.
Translating E-Commerce Conventions: The indirect national competitor successfully leverages user accounts and subscription models to drive retention, utilizing clean ‘search pills’ to streamline discovery. I extracted these successful e-commerce patterns and adapted them to Le Fleur’s local model, creating a frictionless path for recurring subscription buyers.
Emotional Design and Transparency: User sentiment reviews indicated that modern floral consumers highly value transparency and sustainability. By studying the aspirational, eco-friendly tone of indirect competitors, I established a content strategy for Le Fleur that highlights product origin, building immediate trust through emotional design, and clear value propositions.
User Sentiment: After examining each competitor’s website, I decided to probe each competitor’s Google Reviews. I closely examined each competitor’s ratings and compiled a list of major pros and cons. I identified pivotal points where current digital solutions fail users and where opportunities exist for Le Fleur to capture market share.
Transparency Imperative
Many users express disappointment in the quality of their order or frustration in receiving the wrong order. A user expressed delight in the BloomSnap feature offered by the Fillmore Florist website. By integrating a similar feature in Le Fleur’s website, prioritizing an interactive confirmation step in the user flow that assures customers of freshness and visual accuracy before delivery.
Delivery & Tracking Friction
A large number of low ratings resulted from unreliable deliveries, unnotified delays, and the frustrating requirement that users must manually call the physical shop to track an order. Forcing users to rely on phone calls for basic logistics is a major user pain point. By engineering Le Fleur’s mobile checkout to include proactive status updates (SMS text triggers and real-time status tracking).
Retention Erosion via Hidden Customer Support
Even the national giant with over 70,000 reviews suffered a 15% 1-star rating baseline due to un-fresh stems, incorrect orders, and the inability to easily contact customer support to resolve mistakes. To make customer service more accessible, I designed an easily accessible, persistent “Help” center directly inside the application’s global navigation matrix, making dispute resolution and order modifications seamless.
Wireframing
Ideation & Low-Fidelity Wireframing
With clear market insights established, I initiated the structural wireframing process. My wireframes were entirely dictated by the core behavioral patterns of our target demographic––busy, urban professionals in San Francisco (ages 25-50) whose primary user journey requires a hyper-efficient, mobile-first path from seasonal stem discovery to finalized doorstep delivery.
Translating Research into Information Architecture
Once the foundational user journey was mapped, I injected high-impact utility features into the low-fidelity architecture to turn my earlier competitive audit insights into structural design solutions:
Frictionless Navigational Recovery: To eliminate the severe customer-service communication gaps uncovered in my Google Review audit, I anchored a persistent, sticky ‘Help’ icon directly within the global navigation matrix, ensuring instant user support at any stage of the checkout funnel.
Proactive Accessibility Design: Inclusive design was treated as a structural constraint from day one, not a final polish. I established a rigorous, clean layout grid with prominent, accessible tap targets and generous negative space to minimize cognitive load and streamline physical interaction on mobile viewports.
Conversion-Optimized Flow: To optimize the user flow, wireframes were structured to prioritize clean visual hierarchy, ensuring that pricing, stem personalization, add-ons, complementary products, and local delivery parameters remain highly legible and scannable for users interacting with the app on tight schedules.
Solving Post-Purchase Friction Points with an Order Status Page
My competitor review audit revealed a critical industry flaw: a massive volume of user anxiety stemmed (pun intended) directly from a total information vacuum post-checkout. Competitor users frequently reported incorrect orders, missing tracking updates, and a frustrating need to call physical retail shops to resolve basic logistical questions manually.
To ensure that Le Fleur’s website didn’t cause the same friction, I designed a live-tracking Order Status Hub to maximize transparency and user control.
- Live Post-Purchase Tracking: Replaced the industry-standard “black box” with a dynamic, always-accessible tracking screen featuring a live map visualization and precise, estimated delivery timeframes to mitigate user anxiety.
- Proactive Logistical Validation: Displayed clear, upfront delivery details (recipient data, address fields, and order summaries) directly above the fold, allowing users to immediately audit and flag any accidental fulfillment discrepancies before dispatch.
- Contextual Support Escalation: Integrated a dedicated “Need More Assistance?” anchor stack directly beneath the primary tracking dashboard. This module gives the user direct, friction-free paths to the Contact Us, Help Center, and Frequently Asked Questions pages–minimizing the need for frustrating, legacy telephone interactions.