Listing card design pattern
Content writing • Design and layout
Listing cards that appear in search results on Trade Me across our four main business areas, representing Trade Me Property, Motors, Jobs and Marketplace listings. My challenge was to create generalised guidelines that accounted for different content types, and highlight the principles that underpinned the listing card design.
Describing the characteristics of our listing cards allows designers to iterate on designs to meet business needs within an existing framework.
Capturing information around hierarchy of content allows designers to make informed decisions in their designs, and make sure that emphasis is put on the right information when customers scan content in search results.
Alongside the higher level principles, we provided practical details to help teams with technical implementation such as typography and responsive behaviour.
Listing cards have specific requirements for how they respond across breakpoints.
The guidelines have allowed for designers to successfully create new variations of the card pattern, while retaining the elements that identify them as a Trade Me listing card.
Examples of different listing cards designed using the design pattern guidance. Compact variations created to show more saved listings in a small space, while premium listing cards showcase real estate agent branding and larger imagery.