Theme

SYB UI redesign

Written by

in

General Info

We’re redesigning parts of our SYB feature to improve the UI

01: Timeline

  • old timeline lacked info about steps, user wasn’t able to switch between steps

  • new timeline: Clear breakdown into 3/4 steps, user can switch between steps

02: Price suggestion field

  • we want to suggest “good” prices to the user. If the input price by a user is within a certain percentage-range, the user gets feedback “thats a good price, good change of selling” or “low price of selling”

User Story

As a seller on saclab, I’d like to submit my bag via the “Sell your bag” function. I want to use this multi-step feature to find out how much my bag is worth and to sell it in the end.
I’ll submit data on the bag, will upload photos of my bag, login or create an account and finally, review the bag to submit it.

Design / Flowcharts

SYB Timeline design, including Prototype: https://www.figma.com/file/jRmae5jji2sfGH3zANnsdv/Julie-Espinosa?type=design&node-id=10644%3A5294&mode=design&t=tMgVmgG7E39GYTCO-1

SYB Price suggestion field, including Prototype: https://www.figma.com/file/jRmae5jji2sfGH3zANnsdv/Julie-Espinosa?type=design&node-id=10605%3A3865&mode=design&t=tMgVmgG7E39GYTCO-1

Acceptance criteria

01

Given: user visits https://saclab.com/sell/

When: user lands on page, goes through steps to submit the bag
Then:

  • show progress in new Timeline redesign

  • if user is signedIn: display 3-step design

  • If user is not signedIn: display 4-step design

  • Switching between Steps:
    additionnaly to switching steps via buttons “Next Step”/ “Back”:
    allow users to click and switch between steps on the new timeline

    • “going backward” in steps via the timeline-dots should always be allowed, the data input should be stored

    • “going forward” in steps via the timeline-dots is only allowed, if the action to reach that step has been previously fulfilled via button like “NEXT STEP”.

    • further rules/logic: see design rules or prototype

Screenshot 2024-03-13 at 11.59.36.png

Screenshot 2024-03-13 at 12.44.47.png

02

Given: user reaches “Photo upload and find your price”

When: user types in Price

Then: display info (e.g. “good change of selling”) around redesigned SYB Price suggestion field

Rules: 

0 to -40%: None
-40% to +15%: “GOOD CHANCE ..”
+15% above: “LOW CHANGE …”

  • Admin should be allowed to change the percentage-ranges (e.g. 0 to -40%) from our WP backend

  • Amin should be allowed to change the text “LOWER CHANCE OF SELLING” and “GOOD CHANCE OF SELLING” from the WP backend

  • full list of rules can be found here

Screenshot 2024-03-13 at 12.02.35 copy.png

New design example of price suggestion field:

image-20240313-112323.png

Comments

Leave a Reply

More posts