component: individual intent casting

[sarah-arrrgh]

creating the individual intent casting view so it can be tested and tweaked

#20

[sarah-arrrgh]

TODO:

• min, desired & max values correspond to a number scale passed in
• min, desired & max relate to each other sensibly
• if you move desired, min and max move
• on initial click, set min to be < desired and max > desired
• visual cues to show min+max - vertical lines, boxing in around desired
• style slider lines to be dashed

NICE TO HAVE:

• initial click > smooth transition to three sliders

[sarah-arrrgh]

Initial UI for member intent casting for a product:

Three sliders with dashed lines:
Top slider = minimum
Middle slider = desired
Bottom slider = maximum

• On load, only middle slider (desired) is visible. (if a member doesn't want any of that item, we don't need to know that their min and max is also zero)
• On click, top and bottom sliders appear, with an auto min + max value applied (customised per item)
• Solid vertical lines show order range, left line = min, right line = max (unsure if these will be square brackets as in picture or simply vertical lines)
• On change of min or max, the order range changes size (i.e. the box grows/shrinks)
• On change desired, the order range remains the same size (unless it hits zero, then min will be zero and order range will shrink)
• Slider max value will default to some sensible number (decided by group admin for each product?), like 5kg of apples
• If member wants more that slider max value, they can drag the slider-dot to the max, hold it there, and the slider max will increase. This would change the max for all three sliders.
• Can set a minimum tolerance/range for each product (e.g. if I want 2kg apples, the min tolerance is +-0.5kg)

[danalexilewis]

@sarah-arrrgh can you add some text explaining the image?

[danalexilewis]

Design questions for anyone:

• why are there three sliders?
• what does the box created by the verticle lines signify? A target?
• can I only move desired?
• if on the initial click min is desired is there then nothing in the middle of the box?
• what's the difference between min and desired?

Not expecting a change to what's being done - rather documentation of why we are doing it this way.

That way we have documentation to reference when we test via showing the dumb component to peeps via storybook.

[sarah-arrrgh]

@agentlewis have added some notes to the photo comment, let me know if you are still unclear on anything!

[danalexilewis]

Great thanks

Design questions that remain unclear to me:

• you added notes saying what the 3 sliders are, can you also explain why there are three and not one. Or something else entirely like fields, dials. Buttons etc. what is the desicion that led to there being 3.
• it would be great if you do some ux testing of these sliders as soon as possible and see if it's intuitive what they are. Ie can people use it without direction. Storybook should make this easy. Maybe even render 3 sliders without the lines and see what peeps say and then with and see if it's different.
• I still don't see what the difference between min and desired is. But see it as better to build in the feature of having it then not. Ie we can always make a type of item where min and desired are the same and it has a slightly different ui component.

New things:

• Given this is being computed in real time with other peeps how will I be shown what I am likely to get?
• I see no numbers in the sketch are there meant to be some? If so where?

[sarah-arrrgh]

[sarah-arrrgh]

TODO:

• make mock product data
• scaffold product list component
• scaffold single product component
• create sub-component for selecting facets in single product view
• create sub-component for price points in single product view
• make it all look pretty-ish

[sarah-arrrgh]

Question:

• What does the data model look like for facets?

[ahdinosaur]

@sarah-arrrgh here's a draft attempt: #146 (comment). what do you think?

[sarah-arrrgh]

End of day/week report:

• scaffold product list item in storybook
• wired up single view product in storybook
• wireframed single view product on whiteboard (including facet and price point components)

[sarah-arrrgh]

[danalexilewis]

@sarah-arrrgh to me the view on the left looks like a mobile view and the right the view on desktop.

The view on the rleft reminds me of a card and I can imagine a list of cards (mobile) / grid of cards (desktop) to show items with a visually rich expierience. Is this what you were thinking?

[sarah-arrrgh]

@agentlewis the view on the left is the product list view - yes a grid of cards like you are imagining. and the view on the right is single product view, so has more info on the product including price points and facets.

[danalexilewis]

@sarah-arrrgh are you approaching this mobile first or skipping mobile?

[sarah-arrrgh]

End of day report:

• styled product list view
• styled single product view
• changed currency display from $ to NZD / {currency}

TODO:

• check out the rest of Mikey's comments in the PR
• screen shots of components in issue

[sarah-arrrgh]

Product list view:

Single product view:

[sarah-arrrgh]

@agentlewis hmmm haven't been doing this mobile first

[danalexilewis]

This is going to come up very quickly as people will say "does it work on mobile". My personal opinion is that it is easier and more effective to develop from mobile to desktop rather then the other way round. Nvm to much - functionality is more important.

I'd suggest you break out a ticket to mobilise what you have done so far. We don't need it for the 27th but will before a beta test.

[danalexilewis]

@sarah-arrrgh see above