THE BOUQS CO

Redesigning Site-wide Product Pages

Applying a comprehensive end-to-end design framework to optimize user engagement and drive higher conversion rates for PDPs across bouqs.com.

Company

The Bouqs Co. is a modern florist brand on a mission to disrupt the floral industry by connecting people to farm-fresh, longer-lasting flowers & the partners that grow them.

Deliverables

  • Research: User testing, on-site surveys, data collecting & cross-functional buy-in
  • Product phases roadmap
  • Wireframes & prototypes
  • Final hifi designs

Outcome

By simplifying information and reorganizing content hierarchy, while optimizing mobile responsiveness, the new PDP works to achieve a visually appealing, intuitive, and efficient interface that streamlines the purchase process for new and returning Bouqs customers.

Problem

User feedback, funnel analysis, and analytics data revealed several issues with the existing product page (PDP). Upon further research/analysis we concluded that our pdps lacked clear information hierarchy and intuitive navigation, resulting in reduced user engagement and conversions over time.

Solution

Improving user experience and increasing conversion rates through:

Mobile responsiveness

UI consistency

Information architecture

Customization simplification

Product imagery updates

See How We Did It
Before
After
Styles
On-site survey
Learnings
Styles

Process

The Opportunity Space

What

Improve Add to Cart %, CVR; Improve CSAT & LTV

How

Design solutions based on customer-focused discovery

Research

1. Analytics Data, User Session Recordings & Heat Maps to identify friction, drop-off points, and usage patterns.

2. Cross-functional Workshop to elicit friction points from customer experience & marketing, and to gain stakeholder buy in for the project itself.

3. On-site Surveys to get real customer feedback and determine why customers may be leaving PDPs.

Data / Recordings / Heat Maps
Opportunities from Data
On-site survey
Learnings

Problems/Opportunities from Research

  • Mobile Responsiveness: Existing PDP is not optimized for mobile devices.

  • Visual Consistency: UI lacks a coherent visual hierarchy and consistency design elements.

  • Complex Info Architecture: Users struggle to navigate the PDP layout, affecting the ability to find relevant product information.

  • Customization Friction: The customization process is unintuitive, leading to missed upsell opportunities and post-purchase friction.

  • Limited Product Context: Users find it challenging to imagine how the flowers will look in real life due to inadequate product imagery.

How We Prioritized Problems/Opportunities

1. Opportunity map to organize pain points into areas of opportunity and their corresponding solutions.

2. Effort/Impact Matrix to understand level of effort in order to apply resources to solutions.

3. Phased Solution Approach to development that meets constraints of a lean team and other big swing priorities.

Opportuntiy Map
Effort/Impact Matrix

Detailed Phased Approach

Design

High-Level Priorities

Optimize for Mobile

Enhance Visual Consistency

Reorganize Info Architecture

Simplify Customization

Improve Product Imagery

Designing the Best Solution

It was important to make sure that design solutions map back to the high-level priorities we developed from the problem areas listed above.

  • Optimize for Mobile: Optimize mobile usability/accessibility to reduce rage/dead clicks & overall user friction.

  • Enhance Visual Consistency: Develop a cohesive design system to create a clear visual hierarchy, in order to make thee page more scannable. Emphasize key elements, like product details and CTAs.

  • Reorganize Info Architecture: Redesign the layout to present product options and customization in a step-by-step format. Implement a guided flow for users to select flowers, vase, and add-ons seamlessly.

  • Simplify Navigation and Customization: Make customization/add-on options more visible and understanable, by redesigning the components themselves for ease of use.

  • Improve Product Imagery: Include high-quality images that showcase what the flowers will look like upon delivery and in people's homes.

Phase 1

Before

After

Next Steps

1. A/B test the changes, while watching session recordings closely for any and all real-time insights.

2. Build out phase 2 value-adds and phase 3 business opportunities, while applying phase one learnings, on-going.

Detailed Phased Approach

Reach out
& say hello

Have a project you think I’d be a good fit for, or just want to say hi? I'm currently taking on freelance projects — just reach out.