top of page
BiiiboPRO_header.png

Biiibo Inc.

Biiibo PRO Subscription

Biiibo PRO is a subscription service built for contractors, now redesigned to feel like an invitation rather than a decision point, fostering engagement and clarity.

Role

UX Designer

Duration

2 weeks

Project Type

E-Commerce, Website and Mobile Web Experience

Contribution

UI UX Design

Competitive Analysis

Prototype

Website UAT Testings

Overview

My Role & Impact

Redesigned the web page to include more than just a subscription tier chart and make it feel like a landing page. Worked side-by-side with Marketing, a front-end Developer and Project Manager.

​

Understanding our scope, problem and goals

Competitive Research

Wireframing

Prototyping and Testings

Website and Mobile Web UAT Testings

What is Biiibo PRO?

Biiibo serves as a comprehensive solution for contractors, simplifying the material delivery process for builders and tradespeople through an innovative e-commerce platform accessible via both website and mobile applications.

​

Biiibo PRO is a subscription service tailored for contractors and customers who regularly order large volumes of construction materials and require same-day delivery directly to the job site.

Problems

Business Problem

The goal was to redesign the subscription page for Biiibo to enhance user experience, empower the marketing team to manage content independently, and reflect a refreshed brand system. The aim was to create a more persuasive and responsive page that clearly communicated the value of both Biiibo and Biiibo PRO services.

 

The existing subscription page under performed both visually and functionally. It lacked responsiveness, was hard to maintain, and failed to differentiate between the core service and PRO tier. Marketing had limited ability to update content quickly, and the brand identity was inconsistently represented, reducing the impact of key messaging and slowing the conversion path.

Design Problem

The previous design failed to support a clear, user-centred experience. It lacked responsiveness across devices, suffered from poor readability, and didn't effectively differentiate between the available subscription tiers. The visual hierarchy did not emphasize the value proposition or guide users through their decision-making journey.

​

Another issue was the Comparison layout, makes it difficult to read and see clearly of difference between free and PRO. The hierarchy of information is messy. There is no clear call-to-action.

​

Key issues included:

  • Poor responsiveness across devices

  • Low readability due to inconsistent typography and layout

  • Lack of visual hierarchy to guide users through their decision-making journey

  • Ineffective comparison layout that made it hard to distinguish between free and PRO tiers

  • No clear call-to-action to drive conversions

Previous Biiibo Pro

How might we ...

Highlight the most important benefits for busy contractors so that they quickly recognize the value of upgrading to PRO?

Solution

Design Impact

We created a subscription experience that functioned dually as a marketing landing page, incorporating clear tier comparisons, testimonials, FAQs, and engaging visuals, while still allowing for easy content updates by the internal team.

Solution Breakdown

Before & After

We created a dual-purpose subscription experience that functions as both a subscription page and a marketing landing page.

 

The new design includes:

  • A hero banner with promotional messaging

  • A clear comparison table of subscription tiers

  • Testimonials to build trust

  • An updated FAQ section

  • A bottom CTA banner to encourage sign-ups

 

The layout is modular and flexible, allowing the internal team to easily update content and reuse components across campaigns. The comparison table was redesigned for clarity, with improved hierarchy and editable blocks to support future iterations.

Before

After

New Comparison Table

To support a more intuitive decision-making experience, we designed a responsive and role-aware comparison table that clearly distinguishes between the Biiibo Free and Biiibo PRO tiers.

 

The table dynamically adapts based on the user's account status:

  • Guest Users (not signed in):

    • Both primary and secondary call-to-action buttons are visible, encouraging exploration and sign-up.

    • This state is optimized for conversion, with clear visual emphasis on the benefits of upgrading.

  • Non-PRO Users (signed in, but not subscribed to PRO):

    • The primary action (e.g., “Upgrade to PRO”) is prominently displayed.

    • The secondary action (e.g., “Current Plan”) is disabled and clearly labeled to indicate the user’s existing subscription status.

  • PRO Subscribers:

    • The comparison table remains visible for transparency and reference.

    • All call-to-action buttons are removed to avoid confusion and unnecessary prompts.

 

This adaptive approach ensures that users are presented with relevant actions based on their current status, reducing cognitive load and enhancing clarity. The table layout emphasizes key differentiators between tiers, using visual hierarchy, iconography, and concise copy to highlight value propositions.

​

Mobile Version preview:

Mobile view of comparison plans

Website & Mobile Web preview of the comparison table:

Website and Mobile Web preview of comparison table
Research

Competitive Research

To inform our redesign strategy, we conducted a competitive analysis of loyalty and membership models across the home improvement and SaaS industries. While many of these programs differ from our subscription-based model, they offered valuable insights into user expectations, pricing structures, and value communication.

​

Industry Comparisons

  • Home Depot

    • Offers a tiered loyalty program based on annual customer spend

    • Free and account-based, not structured as a paid subscription

    • While informative, the model lacked alignment with our goal of delivering ongoing value through a paid service

  • RONA

    • Uses a credit card-based rewards system tied to yearly spend

    • Primarily transactional, with limited emphasis on long-term benefits

    • Reinforced the need for a more benefit-driven, subscription-focused approach

 

Relevant SaaS Models

  • Jobber

    • Closely aligned with our subscription strategy

    • Monthly/annual toggle provided flexible pricing visibility

    • Clear layout and intuitive structure enhanced user comprehension

    • Highlighted savings for annual billing and included helpful guidance tools like “Need help choosing a plan?”

 

Additional UX Inspiration

  • Zendesk

    • Scalable plan comparisons with expandable feature lists for clarity and depth

  • Unbounce

    • Clean, conversion-focused pricing page with strategic CTAs

    • Integrated trust elements (testimonials, brand logos) to build credibility

    • Messaging focused on benefits over features, aligning with user needs

  • Amazon Prime

    • Simplified value presentation through a concise feature list

    • Demonstrated the power of clarity and minimalism in communicating membership benefits

 

These insights helped shape our approach to the subscription page. Prioritizing clarity, flexibility, and persuasive design to better serve our users and business goals.

User Testings & Iterations

To validate our design direction and ensure alignment with user and business needs, I created two distinct design concepts for the subscription page and conducted A/B testing in collaboration with our Marketing Manager.

​

Each version explored different layout structures and visual hierarchies.


We evaluated both designs based on:

  • Clarity of value proposition

  • Overall visual engagement and brand alignment

Key Learnings

  • Users responded more positively to the version with a modular layout, which allowed for clearer tier differentiation and better content scannability.

  • The inclusion of trust elements (testimonials, feature highlights) increased perceived credibility and engagement.

  • A simplified comparison table with contextual CTAs based on user status (Guest, Non-PRO, PRO) reduced confusion and improved conversion intent.


These insights directly informed the final design, ensuring it was not only visually compelling but also strategically optimized for user clarity and marketing flexibility.

Conclusion

Final Design & Impact

The redesigned subscription page successfully transformed a static, hard-to-maintain experience into a dynamic, user-centered, and marketing-friendly landing page. By introducing modular components, clearer tier comparisons, and contextual call-to-actions, we:

  • Improved readability and responsiveness across devices

  • Enabled the Marketing team to update content independently

  • Strengthened brand consistency and visual hierarchy

  • Enhanced user clarity around subscription benefits and plan selection


The new design not only supports conversion goals but also lays the foundation for scalable content and future campaigns.

Design Challenges

Throughout the project, several challenges emerged:
 

  • Balancing marketing needs: The page needed to be easily editable by the Marketing team without developer support. I addressed this by designing modular components that could be rearranged and reused, ensuring scalability for future updates.

  • Maintaining modularity: Ensuring visual and functional consistency across customizable modules was key. I established clear design rules to keep the layout cohesive, even as content changed.


​

Future Opportunities

Looking ahead, there are several areas for continued improvement and iteration:

  • Integrating analytics to track user interactions and plan selection behaviour

  • Expanding modular components for use across other marketing pages


This project was a meaningful step toward creating a more scalable, user-focused subscription experience.

bottom of page