Redesigning for Better Shopping and Accessibility
I worked alongside the Marketing and Project Management teams to redesign the shopping user flow by enhancing shopping efficiency and improving accessibility.
Project Type: E-commerce, Web & Mobile Experience
Role: UX Designer, Biiibo Inc.
Contribution: UI & UX Designs, Design System, AB Prototype Testings, Cross-team collaboration, UAT Testings
Tools: Figma, Notion, iOS, Android Studio Emulator
Team: 1 UX Designer, 1 Marketing Manager, 1 PM, 2 Developers
Duration: 3 months
Project Overview
What is Biiibo?
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.
Business Problem
Biiibo website and mobile apps lacks features to showcase discounts and membership pricing, while a clunky checkout process hinders the customer shopping experience.
​
Design Problem:
An outdated website and lack of a design system result in inconsistent colours and designs, highlighting the need for a cohesive and modern redesign.
Given our small team, we can only focus on high-priority projects, gradually aligning them with our new design system.
Project Impact
How might we...
Communicate product details more effectively, so that customers feel confident and informed while shopping?
Solution breakdown
1. Showcasing Discounts and Membership Pricing
Problem
Pricing (PRO vs non-membership, sale vs regular) and item states (Out of Stock, Member Exclusive) were unclear. Text readability was poor, and designs between Mobile App and Web were inconsistent.
Best Sellers (Home Page) Revamp
Solution
Clear labels and visual hierarchy clarified pricing and states. Larger fonts improved readability, while a taller item card highlighted names and added a quick add-to-cart feature. Mobile App and Web designs were aligned for consistency.
​
This enhanced clarity, accessibility, and design consistency for a seamless and user-friendly shopping experience.
2. Improving Shopping Experience (Catalogue & Item Page Revamp)
Problem
Inconsistent use of colours, padding, and font sizes resulted in scattered focus and an overwhelming user experience. The favourites button's design distracted from the key information about items and lacked a compact, visually appealing layout. Mobile web and app showed visual inconsistencies and usability challenges made it difficult to ensure a cohesive and user-friendly mobile shopping experience.
Item Page Revamp
Solution
Enhanced the shopping experience with immediate cart confirmation, intuitive navigation with Added to Cart feature, and a cohesive mobile design. Revamped visuals, streamlined layouts, and compact features boosted engagement, reduced cart abandonment, and ensured seamless usability.
​
Note: Detailed specifications were not addressed in this project due to time and resource constraints.
Problem
The catalogue page was hindered by an outdated item card design, unclear side navigation, and an infinite loading loop, which negatively impacted engagement, usability, and website loading speed. Additionally, it lacked a way to effectively highlight promotional content.
Catalogue Page Revamp
Solution
Introduced pagination to replace the infinite loading loop, improving website loading speed and user experience. Refreshed the item card design and enhanced side navigation for greater clarity and usability. Added an optional marketing banner to effectively showcase promotional content, resulting in a more seamless and engaging browsing experience.
3. Showcasing Marketing Promotions
Empowering marketing with greater control over promotions through customizable tags and a tailored catalogue view. This helped marketing to add flexible campaign strategies, add targeted promotions, and increased navigation efficiency.
4. Cart Revamp
Problem
The previous cart page lacked design consistency, with misaligned elements and an overly minimal layout. It failed to provide key information like the total item weight or savings, which limited its functionality and user engagement. Additionally, users faced delays during page loads without any visual feedback, causing frustration and uncertainty
Solution
Revamped the cart page to align with the overall design consistency across the platform. Introduced new features, including a "Total Item Weight" section and a "You Saved" section, enhancing the utility and transparency for users. To address loading delays, implemented a loading skeleton to provide visual feedback, keeping users informed and engaged during wait times. These changes elevated the cart page into a more functional, user-friendly, and seamless experience.
Research
Competitive Analysis
I performed a comprehensive analysis of direct and analogous competitors with a focus on impact-conscious consumption, evaluating brands such as:
-
Direct: Home Depot, Rona, Home Hardware
The research revealed that these platforms prominently highlighted promotions, sales, and membership price differences, fostering customer trust and confidence in their pricing strategies.
Design
User Testings & Iterations
I explored multiple design solutions by creating 2–3 iterations for each. After collaborative discussions with the Marketing team, Project Manager, and developers, we finalized two prototype iterations to move forward with. These prototypes were tested through A/B testing to identify the most effective solution.
Key Learnings
Communication and Collaboration
As my first major UX design project for this company, I gained a deeper understanding of the importance of aligning with company values. I realized that open communication, even if it involves iterative back-and-forth discussions, is essential for producing meaningful designs that truly reflect the company’s vision.
Establishing a Design System
At the start of the project, there was no clear design system in place due to a lack of continuity from previous designers. This project became an opportunity to establish and refine a cohesive design system, collaborating with stakeholders to align on a style that resonates with our customers and represents the brand effectively.