Lotusque responsive website
Extending the Lotusque bouquet ordering experience to the web, designed responsively across desktop, tablet, and mobile.
3 months
Wireframing, Prototyping
Desktop, Tablet, Mobile
From app to web
Following the success of the Lotusque mobile app, this project extended the bouquet ordering experience to a fully responsive website, ensuring users could order flowers from any device, whether at their desk or on the go.
The challenge 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.
In a fast-paced world, people want to buy flowers online without friction. But existing websites were cluttered, confusing, and not optimised for all screen sizes.
Make online ordering easy for users, while giving florists an organised, easy-to-manage system for receiving orders.
Designed to work across desktop, tablet, and mobile, with layouts adapted specifically for each breakpoint.
Same users, new context
The core pain points from the app research still applied, but this study focused on web-based flower purchasing behaviours, including how users navigate and discover products on desktop versus mobile.
Who we're designing for
The same two personas from the app project guided this design, with added consideration for how each uses the web differently from a mobile app.
- Easily order fresh flowers for her designs and photoshoots
- Find unique, exotic flowers her local shop doesn't carry
- Start her own business
- A busy schedule leaves no time for trips to a flower shop
- Can't find the unusual flowers her work needs
- Some florists lack knowledge about the flowers themselves
Lily is a young fashion designer who treats flowers as an essential element of beauty. She experiments with arrangements as props for her contemporary, boldly patterned designs, and loves working colour and texture into her work in unexpected ways. Fresh flowers around her home and studio keep her feeling calm and inspired, though her schedule rarely allows the shop visits her craft depends on.
- Spend more time with family
- Grow his business
- Throw a big party for their 25th wedding anniversary
- Many florists still operate traditionally, with no online ordering
- Spending time going to a physical shop is a drain
- Not being able to order bouquets in advance complicates things
Mark is an ambitious entrepreneur running a young startup on a demanding schedule that often keeps him working late. Family matters deeply to him, and he loves surprising them with flowers and gifts whenever he can. His assistant used to handle ordering, but since she left for maternity leave he's been managing it himself, and struggling to find the time these tasks demand.
Mapping the web experience
Journey maps helped identify the emotional highs and lows through the ordering process, revealing exactly where friction needed to be removed.
How might we let Mark order a fresh bouquet online, in advance, without carving time out of a demanding schedule?
- Download the app
- Search for flower shops
- Pick a shop
- Choose a style
- Customize flowers & foliage
- Add a note
- Confirm the customization
- Check the price
- Add to cart
- Go to checkout
- Choose a delivery time
- Enter address
- Pay
- Get confirmation
- Track the order status
How might we help a designer source fresh, unusual flowers, and trust they'll arrive in time for the shoot, without losing hours to shops?
- Open the app
- Search for exotic & fresh flowers
- Filter by type, color, rarity
- Explore what's exotic & in season
- Read flower details & care info
- Save favorites
- Build a custom arrangement
- Preview the result
- Set quantity for a shoot
- Confirm freshness & stock
- Schedule for the shoot date
- Choose delivery or pickup
- Pay
- Receive the flowers
- Check the quality
- Use them in her designs
Building the web experience
Paper sketches let me explore multiple layout directions quickly, particularly around the navigation structure and homepage hierarchy, which differ significantly between desktop and mobile.
Moving into Adobe XD, I developed digital wireframes focusing on information hierarchy, navigation patterns, and the responsive grid across breakpoints.
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.
Testing revealed two critical fixes
I ran two rounds of usability studies before finalising the design. Participants consistently flagged two major issues, both addressed in the next iteration.
Refined across every screen
After both rounds of usability testing, the final high-fidelity designs were produced, polished across desktop and mobile with a consistent visual language.
The design adapts fully for mobile, with condensed navigation, thumb-friendly touch targets, and simplified layouts that prioritise the core ordering flow.
Try the interactive prototype
Click through the full interactive responsive prototype in Adobe XD.
Open in Adobe XD ↗Designing for everyone
Accessibility was built into the design from the start, not added as an afterthought. Three principles guided every decision.
Descriptive alt text on all images, essential for users who rely on screen readers to understand page content.
Clear, simple language throughout: no jargon, no technical terms, no complex sentence structures that might exclude users.
Sufficient contrast between text and background colours, critical for users who are colourblind or have low vision.
What I learned
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.
Desktop users browse differently from mobile users. Navigation patterns, content density, and interaction models need to be reconsidered for each breakpoint, not just resized.
Both usability fixes, streamlining the nav and adding the instructions field, came directly from watching real users struggle. Testing is non-negotiable.
Explore a tablet-optimised layout, add a florist-facing order management dashboard, and run accessibility audits with assistive-technology users.