Case Study · Responsive Web Design · UX/UI
Lotusque
Responsive Website
Extending the Lotusque bouquet ordering experience to the web — designed responsively across desktop, tablet, and mobile.
Extending the Lotusque bouquet ordering experience to the web — designed responsively across desktop, tablet, and mobile.
Following the success of the Lotusque mobile app, this project extended the bouquet ordering experience to a fully responsive website — ensuring users could seamlessly order flowers from any device, whether at their desk or on the go.
The challenge here wasn't just replicating the app — it was rethinking the experience for a wider canvas, while keeping the same simplicity and ease that made the app successful.
While the core pain points from the app research still applied, this study focused specifically on web-based flower purchasing behaviours — including how users navigate and discover products on desktop vs mobile.
The same two personas from the app project guided this design — with additional consideration for how each uses the web differently from a mobile app.
Lily — fashion designer needing access to exotic, fresh flowers for her projects
Mark — busy entrepreneur who needs to order bouquets online without visiting a shop
Journey maps helped identify key emotional highs and lows throughout the ordering process — revealing exactly where friction needed to be removed.
Lily's journey — finding and ordering exotic flowers for a creative project
Mark's journey — ordering a bouquet quickly between meetings
Paper sketches let me explore multiple layout directions quickly — particularly around the navigation structure and homepage hierarchy, which differ significantly between desktop and mobile.
Hand-drawn paper wireframes exploring desktop and mobile layout options
Moving into Adobe XD, I developed digital wireframes focusing on information hierarchy, navigation patterns, and the responsive grid across breakpoints.
Desktop wireframe — homepage layout and navigation structure
Product browsing and category filtering wireframes
The lo-fi prototype was used in the first round of usability testing to validate the information architecture and core user flows before any visual design was applied.
Lo-fidelity prototype built in Adobe XD — used for round 1 usability testing
I conducted two rounds of usability studies before finalising the design. Participants consistently flagged two major issues — both of which were directly addressed in the next iteration.
After both rounds of usability testing, the final high-fidelity designs were produced — polished across desktop and mobile with consistent visual language.
Desktop homepage — product discovery and hero
Desktop product catalogue — category browsing
Bouquet detail and customisation view
Checkout flow with florist instructions field
The design adapts fully for mobile — with a condensed navigation, thumb-friendly touch targets, and simplified layouts that prioritise the core ordering flow.
Final high-fidelity prototype — complete responsive flow in Adobe XD
Click through the full interactive responsive prototype in Adobe XD.
Open in Adobe XD ↗Accessibility was built into the design from the start — not added as an afterthought. Three key principles guided every decision.
Translating a mobile app to a responsive web experience taught me that responsive design is not just scaling up — it's fundamentally rethinking how users interact with content at different screen sizes and contexts.