top of page

Order History Revamp

Collaborated with stakeholders to identify and address key improvements in Order History. Revamped the design to ensure a B2B-friendly experience on the website while optimizing mobile for a more B2C-focused approach.

Project Type: E-commerce, Web & Mobile Experience, B2B, B2C

Role: UX Designer, Biiibo Inc.

Contribution: UI & UX Designs, Wireframing, Hi-fidelity Designs, Prototyping, AB Prototype Testings, Cross-team collaboration, Design Documentations, UAT Testings

Tools: Figma, Notion, iOS, Android Studio Emulator

Team: 1 UX Designer, 1 Marketing Manager, 1 PM, 2 Developers

Duration: 6 weeks

Orders.png

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

Users struggled to access invoices and order details efficiently, causing delays and confusion, especially in B2B workflows. The existing Order Details page lacked clarity, reliable status indicators, and actionable features. Stakeholders needed a B2B-focused solution that also offered a more intuitive, B2C-friendly mobile experience, highlighting the need for a scalable, user-centred revamp.

Design Problem

  • Invoices lacked clarity: Users found invoice layouts difficult to read and understand.

  • No centralized view: Order and invoice information were scattered, making it hard to access related data in one place.

  • Accessibility issues: Typography and layout did not meet accessibility standards, reducing usability and efficiency.

  • Need for emphasis on key actions: Important items like unpaid orders weren’t visually prioritized, making it difficult for users to act quickly.

  • Broken order status logic: The current status indicators are unreliable due to complex logic. While this will be addressed in future work, the current design was built to remain flexible and adaptable for when the system is improved.

Design Impact

The redesign simplified complex user flows and made key actions like paying unpaid orders and downloading invoices easier and faster. By streamlining navigation and improving clarity, we enhanced usability for B2B users while laying a flexible foundation for future updates.

Built for Business in Mind

Designed a B2B-friendly web interface with advanced filters and bulk invoice downloads.

​Smarter Navigation​

Integrated advanced filters and sorting options to make information easy to locate and understand.

Unpaid Order Visibility

Used clear status indicators and a structured layout to help users take quick, informed action.

Mobile Web Friendly

Designed with on-the-go users in mind, our mobile-friendly interface ensures smooth navigation and accessibility across devices, providing a seamless B2C experience.

Order History & Details

How might we ...

Centralize invoices and order information to improve clarity and help users quickly identify and act on unpaid orders, without relying on status indicators?

Designs Before

My Orders & My Invoices

My Orders before
Invoices before

  • "Order Details" links was redundant and added unnecessary friction

  • Order Status was unclear, causing confusion for users

  • Invoices were housed in a separate navigation tab, making them harder to find

  • Small font size reduced readability, especially for professional users

Designs After

Order History (Previously, My Orders)

Order History (previously, my orders) after revamp

  • Removed the ambiguous Order Status feature to reduce confusion and address technical limitations (future work)

  • Streamlined navigation by integrating Invoices directly into the Order History page

  • Introduced bulk invoice download capabilities for more efficient record management

  • Implemented advanced filters and sorting tools for easier search and organization

  • Improved visual hierarchy and typography for better clarity and accessibility

Order Details Before

Order Details before

  • Delivery details lacked clarity, leaving users uncertain about shipping timelines

  • "Print Invoice" only displayed the most recent invoice, even when multiple were associated with an order

  • Information was grouped inefficiently, making it harder to locate specific details

Order Details After

Order Details after revamp

  • Content was reorganized into clearly labelled sections for faster information discovery

  • A dedicated Invoices section was added, allowing users to download invoices individually or in bulk

  • The layout was designed with future scalability in mind, ensuring flexibility for upcoming features

Order Details (Unpaid Order) Before

Unpaid order before

  • No clear visual distinction between paid and unpaid orders

  • The “Pay” button appeared subtle and was easily overlooked

Order Details (Unpaid Order) After

Unpaid Order After

  • Introduced a prominent attention notice to highlight unpaid orders in the absence of Order Status

  • Improved visual cues guided users to take timely action on outstanding payments

  • Removed the "Cancel Order" option due to technical limitations and to allow flexibility for future feature improvements

Research

I conducted an in-depth analysis of both direct and analogous competitors, focusing on platforms that prioritize impact-conscious consumption. The brands examined included:

  • Direct Competitors: Home Depot, Rona, Home Hardware, Lowe's

  • Analogous Competitors: Amazon, AWS, Walmart

 

The research revealed that these platforms placed significant emphasis on the structure and visibility of their order lists and order details, offering valuable insights into user needs and expectations.

Design Solution

Design Iterations

To improve clarity and usability for B2B customers, I approached the Order Details page redesign with a flexible, future-proof mindset.

 

I began by exploring three distinct design directions, each developed as mid- and high-fidelity prototypes to test different layouts and interaction models. After presenting them to stakeholders, one direction was selected for further development. From there, I continued refining the chosen design, focusing on key interactions like invoice downloads and unpaid order visibility, while enhancing visual hierarchy and accessibility.

 

Early iterations also simplified invoice access by merging it into the Order History page, making the overall experience more intuitive and scalable.

User Flow (Before)

Accessing invoices required users to navigate from “My Orders” to “My Invoices,” then manually return to “My Orders” to complete other tasks, causing unnecessary confusion.

User Flow (After)

We streamlined the experience by integrating invoices directly into the Order History (formerly “My Orders”) and Order Details pages. This allows users to view and download invoices without leaving the primary flow. We also introduced a dedicated path for managing unpaid orders, making actionable items more prominent.

​

This redesign reduced cognitive load and made it easier for users to manage orders and invoices in one unified space

User Testings

I conducted comprehensive User Acceptance Testing (UAT) across staging and live environments on both desktop and mobile. Scenarios included:

  • Accounts with no orders

  • Active orders

  • Unpaid orders

  • Invoice downloads (single and bulk)
     

Feedback was used to refine interaction patterns and ensure consistency across platforms. The final experience delivered:

  • Faster access to invoices

  • Clearer visibility of unpaid orders

  • Improved accessibility and responsiveness

  • A scalable foundation for future logic enhancements

Outcome & Impact

The revamped Order History experience:

  • Made unpaid orders more visually prominent, encouraging faster user recognition and action

  • Increased invoice visibility and download completion rates

  • Improved user satisfaction across B2B workflows

  • Laid groundwork for future improvements in order status logic

Conclusion

The Order History revamp focused on improving invoice management, creating a more B2B-friendly design, and highlighting unpaid orders for Order Details screen. Key challenges included the complexity of multiple status indicators, which were hindered by unreliable conditional logic, and the need to make unpaid orders visible without depending solely on statuses. We also designed with future flexibility in mind, allowing for features like delivery tracking for Order Details. Despite these hurdles, the updated design significantly improves usability and better meets user needs.

Future Work

Given our limited development capacity, we plan to focus on streamlining the codebase to support future feature additions like adding an alert in Order History to notify users unpaid orders, improved status indicators and delivery tracking.

Key Learnings

Designing with B2B Needs in Mind

Prioritizing the specific needs of B2B users, such as efficiency, clarity, and actionable insights, is crucial for creating solutions that streamline workflows and improve usability.

Designing Beyond Constraints

​Tackling challenges like the broken status system showed the value of designing without being overly restricted by current limitations, allowing for more creative and adaptable solutions.

Building for Flexibility

Ensuring the design is flexible enough to accommodate future features, such as enhanced status systems or delivery tracking, is essential for creating a scalable, long-term solution.

bottom of page