Skills: Research, User flow, UI/UX design, High fidelity design, Prototype.
Team: X3 UX/UI Designers, X2 Design Managers and X1 Developer.
Users don’t have the ability to save items because they want to revisit their saved items without the need to repeat the same search repeatedly.
We need to add a "Save" or “Favourite” button feature to all listings to enhance the user experience. It should be easily identifiable and accessible for users. If users don’t have an account, consider implementing a user registration and login system. Build a dedicated page or section where users can view and manage their saved items. This page should display a list of items they have saved. Place the "Save" button prominently on each listing or product detail page. Users should be able to click it to save the item.
In our meeting with a team of UX/UI designers and design managers, we had discussed about the purpose of this project, who is the product for, what research method we should use, timeline, and deliverables. We initiated and formed some questions as we reviewed the feedback by our users.
I explored various of listing competitors to analyse user navigation, button design, button text, and hover staes. Given that our user demographic is older, I also considered web accessibility standards, such as WCAG 2.2.
Button design:
On Etsy, there is an icon button next to the product image (PDP) which is accessible and clear. Its default state is unfilled letting users know it is not activated or saved. When the user clicks on the button, a notification appears and the button has been activated.
User navigation:
I found that users have to click on the heart icon button (1.) next to the search bar to go to their favourite items (2. and 3.) which opens on a separate page on the same browser. The user can remove their favourite items as a registered and non-registered user (there’s a time limit) by clicking on the heart filled icon button (4.). On the next screen (5.), the checkbox must be selected to remove the tick.
Removing the item from favourites is confirmed by clicking on the “Done” button. User is notified (8.) and the heart icon button has disappeared (7.).
Non-registered:
As a non-registered user, the user doesn’t have to be signed in to click on the heart icon button (1.) to favourite the item. The user activates the favourite button and the notification appears (2.) with a message telling the users they should sign in or register to keep their favourite items for a longer time.
To access the list of favourite items without an account, the user clicks on the heart icon (2.) which takes them to a new page called “Favourite items”. There is a warning message if they don’t register or log in. However, the user does have an option to remove the item (4.). Once removed, a notification appears (6.).
When exploring various listing websites, it's common to find notifications for users, which are both beneficial and visible. These notifications serve to alert users about actions and changes, as well as accidental additions and removals, enhancing the user experience.
In addition to the notification toast, what copy should we name the button? Should it have an icon? Here are some exploration of various of eCommerce, listings as well as retail websites that use the favourite button:
The "add to wishlist" (1.) button on eBay is placed beneath the "add to cart" button, featuring an outlined border style and heart icon to indicate that it is the least prominent call to action (tertiary). Alternatively, Airbnb features a link button accompanied by a heart icon (2.), situated alongside the share link and both links are aligned justified to the right of the listing title.
On Listings Nearby (3.), the favourite button is only an icon but positioned as the primary button. Home Depot (4.) similarly has an icon button, embedded within the image or thumbnail, aiming to prompt users to utilize the prominent "add to cart" button. Home Depot (4.) also has an icon button but embedded in the image to encourage users to use the prominent “add to cart” button.
On Wayfair, the favourite icon button is placed before the prominent “Add to Cart” button.
Following discussions with design managers and UX/UI designers, I was advised to utilise Google Trends to investigate various button labels. I had analysed the findings and presented them to determine the most suitable label for future use.
By researching "love", "save", "add to wishlist","favorite", and "heart" (1.) I got valuable insights into user preferences. In British Columbia (BC), the top three preferred labels were "love", "save", and "heart" (2.) since AssistList provides listing services in British Columbia.
I delved into the button design within our existing design system, using either primary or secondary colours. Since this is our initial approach to addressing the issue, I included a notification toast to assess whether a widescreen version is necessary, occupying the bottom of the screen.
After additional feedback, we collectively concluded that creating a new button tailored to our demographic and refining the button label was necessary. There was agreement that combining an icon would significantly improve the button's visibility and effectiveness.
First initiation of a default and pressed state buttons (from the design system to follow brand guidelines) including a notification.
Furthermore, I explored into the icon paired with button label, along with the notification pop-up modal inspired by Etsy's design.
The buttons required further refinement, indicating the need for additional research. This extends to exploring notification (toast) styles and determining their placement, including considerations such as which side of the screen they should be positioned on.
I extensively explored button designs and colours from our design system. I also presented the buttons along with the rationale behind their selection.
I have put together the final designs, combining the placement of the new "save" button. These finalised designs have been prepared and are now handed off to the development team for implementation.
To see and try out the prototype on mobile, click on the Figma link.