Process

Research & Discovery

I documented the whole end-to-end journey: from adding an item to the cart to the final confirmation screen. Every interaction was mapped, and every detail was reviewed for clarity, visibility, and flow.

As I analysed the structure, copy, and interaction patterns, I uncovered multiple usability issues, ranging from hidden payment previews to overloaded CTAs, misaligned visual hierarchy, and confusing placements of key features.

These issues weren’t just for aesthetic purposes. They could slow users down, break trust, or trigger abandonment.

Define

Every moment of friction revealed an opportunity to ask better questions:

1. What’s missing that makes the payment method feel invisible?
   Instead of a clear card preview or payment icon, users are left guessing what they’re paying with.
   
   

2. Why prompt users to check out before they’ve even seen their subtotal?
   The CTA button appeared out of nowhere, disrupting the natural decision-making flow.
   
   

3. Do promo codes and lengthy legal disclaimers belong in the most critical action zones?
   These elements distract users at the exact moment they need clarity and confidence.

By framing each breakdown as a design challenge, the goal was to rebuild the experience with the user’s decision-making flow in mind, not just the interface.

Design

Redesigning the checkout wasn’t about reinventing the wheel. It was about removing the sand from the gears.

I focused on realigning the structure, reducing cognitive load, and making decisions feel more intuitive, especially for users in Singapore. Each change was guided by actual user friction I encountered, and informed by design principles like visual hierarchy, information architecture, and trust-building.

Here’s a breakdown of the six key UX recommendations that shaped the improved experience:

Improved Checkout Page Section Structure

for Clarity & Flow

Users don’t make purchase decisions backwards. They want to confirm the item, check the shipping address, choose delivery options, and then pay. I reordered the flow to reflect that cognitive process, ensuring users see the correct information at the right time.

Add an Icon to Improve the Visual Recognition of the Shipping Section

The original layout used plain text with little affordance. I added a location icon and clearer spacing to help users instantly identify their address block. A small visual anchor that improves recognition and trust.

Improved Visual Hierarchy & Interaction in Product Section

The product block was visually flat and overloaded. I separated information types (price, delivery, quantity), introduced a clearer hierarchy, and swapped the delete icon with a minus symbol to avoid accidental item removal.

Clear Payment Method Preview & Separated Promo Code Field

I introduced a visual preview of the selected payment method, added the PayNow logo to reflect Singapore usage, and moved the promo code input outside the payment section to reduce distraction during payment confirmation.

Clearer Order Summary with Emphasised Delivery Savings

and Discount Field

The original layout showed identical values for “Items” and “Order Total”, which was confusing. I relabelled “Items” to “Subtotal”, restructured the line items for clarity, and highlighted “Free Shipping” as a user benefit.

Streamlined Legal Disclosure and Improved Navigation Placement

The legal disclaimer was overwhelming and visually disruptive. I rewrote it into a concise sentence and moved the full policy into a collapsible link. I also removed the “Back to Cart” button at the bottom, relying on the more intuitive top-left back icon for consistency.