Story 25.1. Update product page UI on MOBILE

General info

User story

As a customer viewing on MOBILE,
I want to view more product options without unnecessary buttons,
so that I can browse more efficiently with less scrolling.

Visual design

https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=7810-102842&m=dev

Acceptance criteria

01

The overall design should follow the new UI style guide, including adhering to the 4-point grid rule.

02

The black button “add to bag” should be removed from the product page.

03

The color #191A1E (brand color) should be used instead of #000000 for design elements.

04

A drop shadow should be added to the product images to make them appear clickable.

05

Given: the user is browsing on a mobile device

When: the user is on the below pages:

  1. saclac.com/bags

  2. brand pages e.g https://saclab.com/brands/bottega_veneta/

  3. Best selling pages e.g https://saclab.com/brands/chanel/?brand%5B%5D=chanel&model%5B%5D=timeless&in-stock=0

  4. Pages with Landing page template

e.g https://saclab.com/designer-summer-bags/

Screenshot 2024-10-08 at 11.16.34.png

Then: The page layout should follow the 4-point grid rule with updated margin and gutter to the product feed

AND the black "Add to Bag" button is removed

And the color #191A1E is used instead of #000000 for all design elements

And a drop shadow is added to the product images to make them appear clickable

ProductFeed.Mob.png

Comments

Leave a Reply