Design UI for mock item component

[rak3rman]

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).

{
        "id": "ao7sp0zbubohd65vy3z1isal",
        "name": "Red/Gray Striped Auburn Swimming Hoodie",
        "brand": null,
        "photoUrl": null,
        "type": "layer",
        "rating": 1,
        "createdAt": "2024-02-21T22:48:07.966Z",
        "authorUsername": "rak3rman"
},

Acceptance Criteria

Generated by Zenhub AI

• [ ] Scenario: Mock Item Component UI Design
  • Given the designer is using a graphic design tool or Figma
  • When the designer creates the UI mockup for the mock item component
  • Then the component should be simple, powerful, and easy to use for new users
  • And the component should have distinct and arguable purposes for each button/text field
  • And the use of the component should be easy to pick up for new users
  • And the component should be exceptional, as the heart of Shafa will focus on this component
  • And the designer should consider the existing frontend for initial mockups (/outfits page)

[SengdowJones]

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!

[rak3rman]

Feedback Formatted as a check list if you wish to track/address each piece of feedback.

• [x] Displaying and collecting the item "size" seems redundant. I feel as if most users already know what sizes of what are in their closet (for example I know I always wear a size M t-shirt, waist size 28 (and how would we handle multiple different size types???), etc..). I'd keep the idea in the back-burner thought, if I tend to shop at multiple different brands and they all have different sizes, it'd be nice to reference a virtual closet so I don't have to remember.
• [x] Not sure about the "slide" functionality on selecting star count. Seems very 2000's iPhone lock screen esque. I think just offering "click" for now can suffice.
• [x] When I took a look at the UI for the first time, I had no clue what the 25/282 was (maybe product rating counts??). Maybe a calendar icon next to it to make it more obvious? Or some other metric.
• [ ] I think some way of incorporating "last worn date" is crucial. It doesn't have to be shown in date form (maybe "Worn XX days ago") or some other quantitative metric.
• [ ] The top right color circle seems redundant, as a user I can clearly tell that the color is red from the photo so why have it tell me again?
• [ ] (Up to debate) you could also have an alternate way of editing an item/seeing more details via a "lip"/"drawer" that appears below the item tile when the item is clicked on. Think of this like a matchbox where at rest the matchbox is closed, then once a user clicks on it the matchbox opens downward and makes the background a bit darker. You could fit more details/actions (like item deletion/archiving) if you so choose.
• [x] (Up to debate) but I was thinking that the item type indication could be presented solely in the form of icons. See the sketch below. Normally, the item displays the icon representing what type it is (top in this case). Then when the user clicks on it, more icons appear around the selected "top" icon, where the user can then select a different item type. When they select a new option (say "bottom"), the "bottom" icon replaces the "top" icon and the other options collapse/are hidden.

[SengdowJones]

Running through a quick sketch of these feedback points quickly so I can get more feedback before I increase fidelity!

Questions

• How do we feel about something like the first frame where clicking the main item type icon will drop-down a list of type icons that will change the type?
• Should the visual star rating be scrapped for a explicit decimal rating instead? (0 to 9.9, potentially based on stack ranking because ratings are hard to make unless relative?)
• Drawer arrow button on the right may be hard to understand what it does initially? Could either replace with a literal drawer icon or add text help.
• Besides deleting and archiving a item, what else might fit well in the extended drawer?
• Putting last worn data on the bottom seemed most natural considering all the descriptors of the item itself are up top, drawer is on the right, and the item types are on the left.
• Some design decisions to be made about the title ("Puffer Coat") and whether the brand name of the item should also join the title. I experimented with the stars but it does not feel like they fit in with the aesthetic. I think the item title looks best aligned with the main type icon. Brand may belong right below.
• Where would the rating go then? It could fit on the bottom where we have "9.6 • worn 3 days ago" or something of that nature, with visual cues that help hint the user to the fact that it is a rating.