top of page
render

Trade Me
Design Mockup

Unclutter Information

Compare Listings

Bidding Process

Overview

This is a design mock up assignment regarding given background e.g., user feedback. Develop design based on the user feedback applying UX design thinking process and collaborate with developers.

Goals - UX

According to the given feedback, we are essntially required to update 3 areas:

1. users are overwhelmed when browsing the website.

2. users feel like to compare listings

3. address false bidding

Chanllenges

A short timeframe to complete both desktop version and mobile version on three different aspects. Time management abd planning is essential in the beginning of the project. 3-week time inclunding preparation of presentation.

Role

UX designer

Tools

Figma

Device

Desktop & mobile

Timeline

3 weeks

Design Process

2. persona.png

1.01 Persona as per given user feedback

  • Persona to capture user feedback.

2. HMW statements.png

1.02 HMW & User Stories

  • Created based on the given feedback trying to spot issues and solutions.

2. empathy map.png

1.03 Empathy Map

  • Based on the given user feedback, then define possible issues and solutions.

3. usser flow bidding.png

2.01 Bidding process - Information architecture

  • Adding extra steps to avoid false bidding.

3. usser flow comparison.png

2.02 Comparing listings - Information architecture

  • Adding an icon opposite to the Watchlist icon in a listing card and a quick review function that allows users to make informed decisions easily.

3. View similar products.png

2.03 Information organization

  • 1st: Trying to simplify the design.

  • 2nd: Aiming to tidy up the ad blocks.

4. comparison.png

3.01 Comparing listing

  • The detail card for a listing(Left) and the listing card(right). The detail card will pop up in the group based on the items added to the "comparison bucket" by clicking the newly added compare listing icon located in the top left corner of the listing card.

4. bidding.png

3.02 Bidding process

  • No.1: Steps to go through when placing a bid.

  • No.2: Bidding policy to read through.

  • No.3: Ticking the box to activate the place a bid button.

  • No.4: Viewing the latest bid.

  • No.5: Separate the "fixed format contents" from the description area to here to make the page tidier and less overwhelming.

4. organization.png

3.03 Organizing the ad. blocks and search bar

  • Making the ads the same size as a listing card can be visually pleasing and potentially increase the hitting rate.

  • Using the colour exclusively to each section of the search bar to inform the user where they are quickly.

5. roll out to mobile.png

4.02 Roll back to mobile devices

  • This mobile version is pretty much the same as the web-based app apart from the compare mode is slightly different regarding how it's presented to adapt to small screen. It's just changing the listing bar content with more details. Tapping on each listing will give the user different details.

5. test 1.png

4.01 Feedback from usability testing & Revision

  • The bidding process has almost all the feedback regarding the steps being too many for placing a bid.

  • 1st: Beginning with the simplified bidding page without an additional box to tick.

  • 2nd: Processing with integrated steps in one card.

  • 3rd: Finishing with a prompt to inform the user that the bidding process is completed.

Prototype - Desktop version

(Figma file Click here)

Prototype - Mobile version

(Figma file Click here)
5. Frame
5. Frame-1
5. Frame-2
5. Frame-3
5. Frame-4
5. Frame-5

Takeaways

  • Setting up too many steps to avoid false bidding is likely to annoy users in another way. Keeping it simple as one step by using a tick box to activate the button for the final confirmation, is much better.
  • Overseas users are not familiar with Trade Me at all hence the newly added comparison icon​ doesn't seem to appeal to them as well as the classic Wathclist icon. This would be something to discuss with PM, BA, etc.

Check out my article for more detail

bottom of page