With over 3.5 million active users, Trade Me is the largest Internet-auction website operating in New Zealand. The website is visited more than any other in New Zealand (beating out Google New Zealand) and generates over 60% of all New Zealand web traffic.

Trade Me came to us when they were looking to port their existing iOS app to Windows 8.1 and deliver an immersive experience that would delight and engage their customers.

Primary Project Goals

  • Make an impression on realestate agents and buyers by delivering an outstanding app experience
  • Deliver a beautiful, immersive listing page worthy of showcasing multi-million dollar properties
  • Facilitate an innovaive, efficient location based search experience

back to top

Strategy & Ideation

Trade Me has millions of users. Designing an experience that will appeal to everyone and deliver on business goals is no easy task! The first point of action for us was to get a good grasp of what we are trying to achieve and set a plan for how we would achieve it.

Vision and strategy

Workshop on goals, vision and strategy

Aramex Van

Information architecture & user flow

back to top

Design & Refinement

Once we felt we had a clear design vision, we began brainstorming a solution. We came up with the overall information architecture and fleshed out how users would navigate the app. We then began conceptualizing how we would fulfil project goals.

Low Fidelity Concepts

Immersive Listing Hub

Magazine

Goal was to replicate experience of flicking through a high end real estate magazine

Aramex Van

Low fidelity sketches of listing hub concept

We ended up settling on a hub page design that immediately presented the user with a rich image of the listing. Peeking content teased the user to explore for further information and we made sure it was displayed in a meaningful and structured way.

Hub Page design

Innovative Location Based Search

To tackle the location based search challenge. Our first point of action was to try and spot flaws in the iOS experience. After some inspection, we decided we should try to improve on the following issues:

  • It was common for search results to drop down a sea of pins, many of which were too close to each other to distinguish or individually interact with.
  • Generic search results i.e. ‘All listings in Auckland’ would return far too many listings to display and leave the map in an unusable state with a note “Zoom in to refine your search”
Zoom in iOS app

‘Zoom in to refine your search’ was often shown when searching iOS app

Many pins

Broad search results often displayed so many pins it rendered the interface unusable

We felt if we solved these issues we’d be well on our way to improving the experience. The first task at hand was to make the data more useful so users could make better sense of it and interact with it in a more meaningful way.

Heat Map Sample

Drawing inspiration from ‘location heat map’ image search

Map experience design

Sketches from design and development team brainstorm session

A quick image search for ‘location heat map’ gave us plenty of inspiration to draw off and provided a great starting point for our brainstorm. The entire design and dev team sat down and we fleshed out what we thought could solve this problem.

Map Experience Design

Once we were happy that we could technically achieve the design we had in mind, the design team fleshed out exactly what the interaction would look like.

High Fidelity Design

For the final stage of the design phase, we put together pixel perfect images of what the final experiene will look like and outlined every aspect of the interaction. This gave us a good chance to ensure our vision for the app was aligned with that of Trade Me’s.

back to top

Final Product

The final result was one that we were very proud of. We were able to really innovate on existing Trade Me property mobile apps and showcase what was possible to achieve with Windows 8.

Search Experience

Upon launch, users are presented with a powerful search and sorting experience that is packed with functionality but doesn’t intimidate or compromise on visuals.

Custom Controls

Every button, picker and text input field on this app was custom designed and developed to achieve a look and feel that was unmistakably ‘Trade Me Property’ while staying true to the Windows design language.

Hub Page with hero image

The listing hub greeted the users with a visually rich ‘hero image’ and bleeding content teased further exploration.

Portrait Experience

Much effort was placed into ensuring the app worked flawlessly in all the various Windwos 8 usage scenarios. We customized every scren to adapt to the user’s needs and it just worked regardles if the user was browsing the app on their Surface tablet via touch or on their desktop PC via mouse and keyboard.

Map Experience

Our favourite feature of the app is the location based search experience. No matter how many search results are displayed, our custom heat map algorithm ensures the interface is meaningful and can be interacted with easily. Smooth, fliuid animations are used to help guide users while navigating the interface and give it that extra wow factor.

We always had a good feeling about the direction this project was going in from the start however when the app finally hit the Windows Store we had further validation that we did a good job. The overall response from both Trade Me and their customers was overwhelmingly positive. THe app quickly shot up to the top of the Store charts and maintains an average 4.7 star rating.