Quick Design Projects
Matches
Overview
This page features quick design projects for Matches that did not require, or have time for end-to-end planning.
Role
Product Designer
Platforms
Desktop and mobile web
App
Skills
UX/UI (using Figma)
User research
Stakeholder negotiation
Presenting
PDP Carousels
Objective:
I was approached by a Web Product Manager for advice on how we could improve the product recommendation carousel on our product display pages.
Problem:
Customers were not engaging with the tabs because this design hides other product images.
Solution:
I suggested making the carousel more visible by stacking out the carousels (reducing the number of clicks needed to view each one.
For mobile, I suggested that we don't add arrows because showing a snippet of the next item behind the side of the screen shows the user there is more.
For desktop, I suggested adding arrows because otherwise, the user would have to click and drag the carousel which is an awkward action for mouse and trackpad users.
I also suggested left aligning the titles to make it consistent with the rest of the page and removing capitalised letters as they aren't accessible, but the developers said this wasn't possible.
Improving Links on PDPs
Objective:
I was approached by our Web Product Manager to help tidy the links on our product pages.
Problem:
Below the accordions, we had various links that users weren't engaging with such as social icons and category recommendations.
Solution:
I suggested removing the social links since these are also (and typically) displayed in the footer.
I also designed the recommendation links as chips to make them more visible and engaging.
Web to App discount
Objective:
I was approached by our App Product Manager to design a user journey for applying a 15% discount code, for new app users.
Problem:
When users previously saw the offer on web they were not reminded of it in the app and could not remember the code, leading to increased customer care assistance. Users also could not see a list of excluded brands, so when adding items to their basket they were disappointed that they could not purchase the restricted items.
Solution:
I suggested adding an unintrusive bottom banner with the discount messaging, a button taking them to the app and a close button incase they do not want to engage.
Once in the app the user would be reminded of the code which they can copy. There is also an accordion revealing a list of excluded brands.
In the shopping basket they simply paste the code into the promotions field.
