According to the data obtained by Usability Tests, users find it confusing to navigate among variants, to solve this. Problems listed:
- Most of them did not know which variant was selected in the AB Test sidebar panel.
- Most of them found hard to select variants from the variant list.
Border box: 1px and Primary/L1 (#80ACFF)
Background color: Primary/L3 (#F0F5FF)
We have to agree on the actions to solve the problem given our resources. Having in mind that the strongest points of the design are more surface to select a Variant, and a more contrasted selected variants.
Selected Variant - Selection area Given an variant in an AB Test When the user select the variant Then it is possible to select it by clicking in any part of the row (apart from the icon buttons) not just the title Selected Variant - Blue border Given an AB test with a variant When the variant is selected Then a blue border shows Variant Table - Sticker Given an AB test When there are variants Then the table shows with an sticker with a letter ordered alphabetically from A to Z Variant Table - Header Given an AB test When there are variants Then the Variants table shows with a header that changes regarding the status of the test. When it is *Draft * Then the table has just the variant name When it is Running with no data Then the table has the variant name and the traffic When it is Running and has some data Then the table has the variant name and the improvement Variant Table - Content Given an AB test with variants When the status is draft Then the table shows the Name of the variant and actions When the status is Running with no data yet Then the table shows the variant name and the traffic split When the status is Running with data and *Winner Declared * Then the table shows the variant name and the improvement