eBay AU Catalogue

eBay Australia wanted to create an omnichannel approach in regards to reaching its buyers by launching its first Australian paper catalogue in tandem with an online version. It was more challenging than I thought it would be to build initially as these things so often are. Unexpected challenges arise out of every corner sometimes, just to keep you on your toes which is all part of the fun and games.

After carefully going through the brief, a few things stood out that would be challenging:

• The sheer amount of product links (in different places for mobile and desktop).
• Being able to search through and jump to that page.
• Having a different version for mobile and desktop.
• Being able to scale the catalogue without breaking the position of the links.
• The overall file size of the page.

I decided to code it all from scratch as it would be a fun project to learn on. At the time, almost every one of those points would be something that I have never had to overcome before. I planned in the beginning to make the code as scalable and re-usable as possible in case it needed to be used for different catalogues of different lengths. So the pages for the catalogue are generated by JS using the data that is input.

The first was simply showing different content on desktop versus mobile, something many developers have had to do and is very simple.

Search

Writing code to allow the user to search through the page and then take the user to that specific content was something brand new to me, so I had to go away and do some learning for that.
There was quite a bit of preparation work to do for this, because each product needed a link for desktop and mobile and there were a lot of links.

The first task was to gather the data for all the possible search terms in an excel doc, then I needed to create an array of the search terms for each page in a separate variable (both desktop and mobile). The data gathering and generation side of this project was quite the task in itself, so I ended delegating out some of these tasks to people in the office to speed up the overall process. Even after spreading the work between a handful of people, it still took quite some time.
I also added some validation to let the user know if their search string existed.

Scale

It might not sound hard on the face of it, but I had to map the links over the background images for each product. Much like the search problem, this started as a very manual process of gathering data. I needed the width, height and position for each product so I could map them out onto the page. Then each link needed to be able to scale up and down as the browser did or depending on the device width it was viewed on.

Above is an example of the data for each link and below is an example of how the links would look on the page (minus the red border obviously).