Ironhack UX/UI prework Challenge 2: Catawiki
For my second pre-work challenge, I am taking a look at the auction app Catawiki. The goal is to reverse engineer the app back to wireframes and prototypes. The low fidelity prototype is a simple illustration of the user flow. The wireframe prototype is done using Figma.
What is Catawiki
Catawiki is an online auction platform for buying and selling special items and collectibles. It was founded in 2008 by René Schoenmakers, a Dutch comic collector, and Marco Jansen, a Dutch developer. It was originally an online community for collectors. Since 2011, the company has been hosting weekly online auctions, in various categories such as vintage comic books, model trains, coins, watches, art, jewellery and classic cars.
How it works
Catawiki has been curating weekly auctions since 2011, across a number of categories such as art, books, curiosa, model trains, stamps, wine and classic cars. Catawiki’s auctions are online-only. Bids are open for all to see. Winners pay what they bid via a secure payment service to receive the object from the seller. Catawiki operates a network of over 100 experts who value, authenticate and curate objects.
The user flow I chose to work on
Unsurprisingly the landing page is our starting point. The user is launching the app, perhaps for the first time.
- First thing that should catch the user’s attention is the selection of featured products from different categories on an image carousel. The selection aims to showcase very different types of products from a wide range of categories. The items are also very attractive “hand picked” objects.
- The user browses through the category menu to see the range of curiosities the app has to offer.
- After selecting a category, the user will land in a subcategory menu.
- Once the user selects a subcategory they land on the product grid page, with some featured auctions at the top. The user notices an interesting item (thanks to the image and/or description) and interacts with it.
- We now see the product and its full description. This is a key page of the app that aims to trigger the purchase.
- The last screen is the bid interface. At this stage, the user is already convinced and will be looking for a quick, easy and painless way to finalize the transaction.
Why it is interesting to look at this specific workflow
We’re looking at the path taken by a user that becomes a customer, which is the ideal path for our app. Analysing the steps of that path allows us to identify potential points of pain, evaluate the quality of the comprehension of the elements of interface and optimise the overall experience. We avoid usage of unnecessary steps or useless UI elements. The wireframe prototype allows us to test and come up with relevant ways to use the proportions of images and UI items to ensure an efficient and happy customer experience.
Observations
As a graphic designer I find this wireframe step of conception very interesting, I sometimes used similar techniques to establish design rules for catalogues or magazines. Avoiding the distractions of a fully fleshed product allows a clear perspective in the way information is delivered. I see this step as crucial to ensure the efficiency of the end product.
Looking at the Catawiki wireframe prototype, some possible optimisations come to mind:
- Landing page: The access to the different categories can be reached only through the bottom menu bar and most of the space on this page is allocated to a few featured products.
- Category and subcategory menu: Using the shape of the logo as a mask for the teasing images is interesting but we can see on the prototype that it drastically reduces their size and consequently their impact.
- Subcategories or product grid: There are a lot of blank spaces that push down the main grid of products, the user has to scroll to even notice it is present. Usage of respiratory spaces is important and gives a premium feel to the app but it shouldn’t interfere with its key functionalities.
