Open rak3rman opened 6 months ago
The mock item component UI design features the name and brand stacked on top of one another in header text. These descriptors take up the main space of the card, apart from the image of the item itself. Size and type of clothing is put in chips which I argue could benefit from being drop-down-esque state changes on click rather than in-place edits. I am not sure if there is the space to display all the sizes and layers unless they are put into icons.
Additionally, there is a rating system near the bottom of the card, with the 5 stars displaying the rating. The idea is that the user will be able to "slide" their finger or cursor across the stars to change their rating. The "282" number represents the number of times it has been worn as I think it may be convenient for the user to know the frequency/popularity of the item they have worn. Some users may use this as a way to change up their style or continue with what has worked.
The top-right circle represents the color of the item. I think this could be something we do on our side -- to detect the primary color of the clothing item and be able to sort items by primary color.
I was unsure about how to include a last worn metric. It feels like it distracts from the item display as a whole.
Open for some feedback as I am sure there will be lots of points we want to get across that I may have missed. Thanks!
Feedback Formatted as a check list if you wish to track/address each piece of feedback.
Running through a quick sketch of these feedback points quickly so I can get more feedback before I increase fidelity!
Questions
Description
Design the UI for the mock item component using a graphic design tool or something like Figma, whatever the designer prefers. This UI mockup will be translated into an actual component on the frontend.
Ideally, this component will be simple and powerful enough such that the user does not have to open a modal or other popup to edit item details. Each button/text field should have a distinct and arguable purpose. The use of the component should also be easy to pick up for new users. Make this component exceptional as the heart of Shafa will focus on this component. See the existing frontend for initial mockups (
/outfits
page?).What follows is a sample item returned from the backend. See the implementation for more details. Feel free to argue for the use of new data fields (like last worn data, how many times the item has been worn in the last 30 days, 1 year, etc).
Acceptance Criteria
/outfits
page)