SEE LIVE DEMO

This is a tutorial on how to set up a bra recommender.

Bra Size Methodology:

Almost all the bra size is calculated based on 2 measurements:

Bust measurement
Under-bust measurement

Two major aspects of a bra size is the band size and the cup size. And the calculation is usually something like this:

The band size is determined solely based on under-bust.
The cup size is based on the difference between bust measurement and band size (or under-bust directly in some brands).

We will use American bra size as an example:

Band size: Measure the under-bust measurement and round to a whole integer. Then if it's even, add 4 inches and if it's odd, add 5 inches to get the band size. For example, if the measured under-bust is 29 inches, your band size is 34.
Cup Size: Measure the bust size and round to whole number. Then calculate the difference between bust and band size then then check the following list. So if your band is 31 and bust is 34, then your cup size is C.

Note that some bra size calculation uses difference of bust and under-bust (not band) directly. The example here would be using difference of bust and band size.

Bra Recommender setup

Now let's see how we can translate this logic into a custom recommender. We will create a custom recommender to achieve this.

Overall all steps

1. Open Custom Recommender Editor

Open the custom recommender pop-up!

Click "Create new custom recommender"

Now for simplicity sake, delete all the default recommender steps.

2. Add Bust and Under-bust measurement input

Click on "Add recommender step", and add a Number Input.

You will see the Number input editor show up. Next, update the following places:

Label: add the under bust label
Help text (optional): add a brief description for how to measure
Change the display mode to "Slider"
Change the unit to "inches -> centimeter"
Change the min and max to something reasonable. We use 22 inches and 40 inches here.

Now you have set up the under-bust measurement, and we'll add the bust measurement in a similar fashion:

Now, note that both measurement input are in inches. In later steps when we make calculations, we will stick with the imperial unit system. So if the customer select their bust/under-bust in cm, internally our app would convert them to inches before passing to later steps.

3. Round the under-bust measurement

Band size is calculated based on under-bust measurement. Because the recommender allows customers to input in either cm or inches and we make unit conversion, we would need to round the under-bust numbers to a whole number before calculating the band size.

So first add a new "Formula Result"

Then make the following changes:

1. Change the label to something descriptive of this step: like "Round up under-bust". The actual text doesn't actually matter because we will hide this step so it's not visible to your customers. But this can be useful when you debug this recommender

2. Use "Imperial unit system". We will use this for all the remaining steps. What this does is that, despite whatever unit system the custom decide to use to input the recommender, we would convert that number to the selected unit system. In this case, if user inputs 68cm, internally we would convert that to 26.378 inches.

3. Use the following expression.

Math.round(#1)

Math.roundis Javascript function to round a given number to the nearest whole number (i.e. 4.5 becomes 5, 9.1 becomes 9). #1 here refers to the value from step 1 which is under-bust measurement input from customer.

4. Change the step to Hide. When this is turned on, this step will be hidden to your customers and only visible within the admin app.

As you can see in the screenshot, if you change the "Preview unit system" to metric, you can try inputting in centimeters. If we slide the under-bust to 68 cm (26.7717 inches), you can see that the rounded number is 27 inches.

4. Calculate band size

Next add a new "Switch Result"

Then make the following changes:

1. Give it a descriptive label text

2. Change the step to Hide.

3. Add the conditions. As mentioned earlier, the logic for band size is:"If the under-bust measurement is even, add 4 and if it's odd, add 5 to get the band size". #3 refers to the value from step 3 which is rounded up under-bust measurement.

So if under-bust is between 23-24, the band size is 28. 25-26 is 30, and so on.

4. If the under-bust measurement does not satisfy any of the condition, put "none". This will be used later.

You can already play with the preview on the left. If you slide the slider to 23 inches for under-bust, then the band size will output 28. See how the #3 block is a bit faded, it is to indicate that the step is set to hidden.

5. Calculate difference between bust and Band size

Then modify the options as follows:

1. Change the label to something descriptive. Again this step is hidden

2. Add the following formula

if(#4==='none'){'none'}else{Math.round(#2- #4)}

#4 here refers to the output from step 4 which is the band size. If band size is "none", then this step will output "none" as well. Otherwise, we subtract #2 (bust) from #4 (band size). This will give us the difference.

Note to use Math.round again to round the result to a whole number in inches.

3. Set the hidden state to true.

6. Cup size and final output

We are at our final step here. Add a "Switch result". This step will be used to calculate the cup size and display the final recommender result.

Add a switch Result step, then update the following places:

1. Add a label. Note this will be shown to the customer!

2. Make sure it is not hidden because we want to show this step to the customer!

3. Change the Template to "US #3#5". Normally for switch results, it will simply output whatever value of the condition that is met. However, by setting the template, you can add another level of transformation. In this case we would want to output US <band size><cup size>. While we could technically add another step to show both cup and band size, using template simplifies the flow more.

4. Add in the conditions, which follows the logic in the following table:

As an example, the first condition is

#5!=='none'AND #5===0

#5 here refers to the output from step 5, which returns the difference of bust and band size. If the value is not "none" and is equal to 0, then the cup size is AA. Other conditions follow similar logic here.

5. In the "If all condition fails, then." text box, put in the text you want to show to customer when no size could be satisfied.

6. Make sure the "Make ELSE condition as no size" is checked. What this does is that IF no conditions are met and we show a last resort text, we consider this as a "no size". Otherwise, the app would still consider the "no resort" text as a size that we recommend, and we would display the text from "label".

Now you are done!

After you apply the custom recommender to a size chart, you can immediately test it out in the preview

For example, let's say we put in 26 inches for under-bust and 37 inches for bust. We can see that the band size is calculated to 30, the difference of bust and band size is 7, and finally we recommend 30 DDDD/G size.

Case study: Bra recommender