Vision Direct (Luxottica)

Plugins used

💡
How to update component copy back and forth with the DS

Button arangement

The initial taxonomy was based for Figma, so changing the

Before

After

Merge two component set of variables

Prices for all markets

As we created Homepage and PDP pages up to seven markets we run into an issue of how to display prices on product tiles. Even if we had the price euro sign ⟨€⟩, the display was slightly different in some eurozone countries. For example in Ireland, the euro sign comes before the price with no space (similar to how pounds are displayed in the UK), the dutch (and BENL) version is the same but has a space between while the rest of eurozone has the sign.

These differences are largely a matter of local convention and tradition
These differences are largely a matter of local convention and tradition

Manually copying and pasting for each instance would have been intensive and would modify too much the components that would create issues in the future, so the realistic solution would be create variants of the product label section which is was already a component.

image

Updating the component over 477+ instances required a bit of planning, naming for the price was kept the same to match the current price and the extra currency symbol were deleted using the search and replace feature in Figma.

Original vs New Layer Setup. The new directories and text layers are highlighted in green
Original vs New Layer Setup. The new directories and text layers are highlighted in green

The result was a set of tiles that would easily interchange maintaining the edited price, while switching the currency symbol in the appropriate place depending of the market.

image
💡
* A note was created to push the component further by using the new variables feature in figma to create a close to realistic conversion between Pound → Euro by multiplying £ x 0.87 ** The decimal separator varies from country to country as well, it defied the purpose to separate the integer from the fractional part of a number, so after the component variants were changed, we searched and replaced the dots with commas or the other way when necessary.

Setting pages

As we added features we stacked all of them into a page and split into sections rather than a multitude of separate pages. However one inconvenient was we had to create a logic of how these sections would be individually saved.

So we talked with the tech team and the best solution was having autosave on all input fields without the need to hit a save button every time. This required a thorough evaluation for all input fields and think over where signposting is needed.