Setting up the User Journey of selecting products and their sub-types
Core Concepts of our Product Management system
Each SubCatis a “Screen” Each SubCatlevel is akin to a “step” or screen in the wizard driven UX of your app. At each screen or step, you are asking the user to make a choice between several possible product “Attributes”.
“Type” assigned to a SubCatis the Title Bar of that screen.
Only different JSONs matter. In each SubCat, if there are identical “Type” and “Name”, they will only appear once. (more details follow below)
Each screen should use the same “displayStyle” All attributes on the same screen or level (but not necessarily the SubCat), must use the same “displayStyle”
Case Study: Wall Decor Setup
The schematic example here shows the setup of the following products in the Wall Decor category.
2 types of Wall Decor: Canvas and Poster
- In Canvas, there are 2 designs. A1 and A2 and each one comes in 2 sizes. Each size is available in Portrait or Landscape *
- Posters also comes in 2 designs A1 and A2.
- Design A1 comes in 3 sizes, but only size 3 comes in Portrait and Landscape. Sizes 1 only comes in Portrait and Size 2 only comes in Landscape.
- Design A2 only has 1 size, but available in Portrait and Landscape. Both orientations also comes with a Black or White picture frame.
* this is a fictional requirement just for illustration. Products can be setup as “rotatable”; such a product only requires you to define specs for a single orientation, and depending on the orientation of the user\’s chosen photo, the app responds accordingly. (using a Landscape photo will create a landscape oriented canvas both in the editor, the preview and the order we push to your fulfilment APIs)
UX Considerations
Because each subcat is a whole new screen in the app, as a general rule of thumb, we should aim for 3 steps (3 sub-cats). The system supports upto 8, but we have never seen that being used. (we hope we never have to!)
How many SKUs is that?
For a product hierarchy with x attributes and n number of choices at each stage, you will need to create x to the power of n.
Example: 3 subcats, each with 5 steps = 125 products.
This means you will have 125 rows for that product category in your OC Product Sheet, with 125 different labels created for Column A: “Model” !!
Demystifying the JSON which defines this
In the interest of brevity, we shall show just the top 12 product variants in the above example below. You will see 4 screens of how you would set up the 4 cats.
Although you see 12 rows here, only two of them will show up as Model-1 thru Model 8 are exactly the same. So this screen will present to the user two choices: Canvas or Poster? Using img_canvas.jpg and img_poster.jpg.
SubCat-2 is the one which asks “which design do you want?” Only two choices will be present (despite 12 rows) again because the only two unique groups of JSONs are “Design A1” and “Design A2”. A2 will show up below A1 as it has an “order” value which is higher (smaller number shows up first).
SubCat-3 asks you what “Size” you want. There are 3 possibilities here: A1, A2, and A3 sizes. However, A1 only shows up for the Poster product. We used Order = 350 for the Posters. It does not really matter. We could have used 300 for A3 Poster, 301 for A2 Poster and 303 for the 2 A1 posters, as the ranking order only matters within that sub-group on that screen. So it does not interfere with the Order of 300 for A3 Canvas (first row).
Subcat-4 is the lowest level in this case. So it has Order in the 400 series. In general, it is good practice to use the hundreds to denote the “levels” of your hierarchy and also align it with the SubCat numbers. (however, that is not required…your 400 series can be in SubCat8, leaving SubCat 4 thru 7 empty…but this would be counter-intuitive and confusing for the next person who has to maintain this.
Every single row in this chunk in SubCat4 are unique. So every single item will show up at Step 4 of your app Wall Decor selection flow.
