Vision Direct is part of Luxottica and it slowly migrated to their main E-commerce platform, which hosts a series of websites as David Clulow, LensCrafters, Pearle Vision, Spectacle Hut, Ray Ban among others.

So they needed a Design System Specialist to assist for component migration and restructuring, as well as some redesign of some features like prescriptions, payments, address saving, shopping bundles, reset passwords and account updates.

The work started with IT version, then UK, followed by all Vidion Direct markets like ES, FR, IE, NL and IE.

We worked in a fast-paced team along with a Lead Designer, Technical Director, Project MAnager and multiple copyrighters for each respective market.

The initial taxonomy was based for Figma, so changing the

Before

After

Merge two component set of variants

Product filtering

As we created the 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.

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.

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.

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.

As we added features we stacked all of them into a page and split them into sections rather than a multitude of separate pages. However, one inconvenience 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 thinking over where signposting is needed.

We’ve made a set of rules when things are wrong before throwing the blame Figma, one of those was to check naming before something else. As design systems are two separate entities linked together the common denominator

Figma has layered (pun intended) many ways to bring components into a design, like the ‘Assets’ tab next to the ‘Layers’ one or by switching from a component to another from the sidebar. But I’ve run into an issue — How to set the ‘main’ component variant? The first one that would appear when you browse or search for a component.

Strangely I have’t found a way to set it manually, rather it takes the closest variant to the title of the component set, that is the X and Y origin.

A common nerdy question would be: ‘What if we set all the variants to the same position?’ The respoce is: ‘The blue one’. I don’t know why it prefers to favour the blue one, no matter how much I’ve tried to replicate and figure it out, the blue one was chosen as a thumbnail.

One issue that we’ve found when doing an audit over the journeys was that in some cases we only had one radio button, this defies the whole yang yang of radio buttons in general. As you cannot unselect once the instance is selected, better to use a checkbox component in that case.

This issue segwayed into rethinking the whole mechanics of the payment tiles

The payment system consists in one main payment (mostly card) method and the secondary ones. In previous designs were scattered over different market specifics, for example in the Netherlands the primary payment method was iDeal, an e-commerce payment system started in 2005-2006 by a consortium of NL banks. Same in France and Belgium with Bankcontact, these services lost market share as new Genz have more trust in giving credit card details as they manage their accounts via banking apps.

So the push was to push to the customers to use cards as much as possible, prioritising saving and gathering credit/debit card data rather than using third-party vendors. Also making sure that new financial services that offer post-purchase payments (buy now, pay later), like Klarna, Affirm & Sizzle.

When a first-time user gets to the checkout, or we don’t have any stored card in the system, we show the new card tile by default open, aside from the other 3rd party payment methods.

On a recurring visit, we want the least amount of friction or decision-making possible so we worked out the easiest flow possible considering the legal and technical requirements.

When a recurring customer is at checkout the card from the previous session is stored and shown as a preview (last 4 digits & payment network logo), once they accept the T&C’s the checkout is complete.

As we tackled multiple markets one of the key differentiators was payment types as every country favoured a specific payment method.

We had a task to unify the product quantity dropdowns, which were initially separate and were able to order a different quantity of lenses for each eye. With this change, we sought to review the experience and see if there is any room for improvement as a matrix of dropdown input fields didn’t seem the best practice.

We went on the common variation that includes an input field with [-] and [+] buttons on the sides. The main reasons were:

To prototype all the edge cases we used variables in Figma as we wanted to showcase how the component would really behave within the edge cases that we had. The main advantage of using dynamic prototyping in Figma is the access to the Design System and the usage of if then that & boolean actions.

As we prepared for the unified system over all markets we wanted to improve the overall experience. We worked out two pain points in the checkout, the billing address and how we manage payment cards.

For some technical reasons, we could not migrate the Irish users to the new unified platform without a password change. This process would be a one-time event per account and the concept was to make it as seamless as possible without any blockers or

Initially, a page was set in place that was based on the ‘Wrong Password’ template, featuring an ‘Alert’ banner with just a copy change. However, in testing, this didn’t go well.

The key was to differentiate the “Reset Password” to the “Forgot Password” flow, make signposting less alertness and stick the email

A tailored page was created, without using the ‘red alert’ components like before pushing users to reset their password. We took patterns and ideas from the situations like when your password was compromised and we worked with copyrighters to make sure we’re delivering the right tone of voice.

So a new ‘Reset your password’ page was created that will appear once per user that never changed their password. The red alert bar was removed and a bunch of lines of copy were added explaining the situation as long as showing the email that is involved.

Main CTA: Reset your password will redirect users to the ‘Forgot your password’ flow, while keeping an option to go back to login in case they have multiple accounts or any edge case that may be around.

One of the tasks was to adhere to a unified design system called ‘Crossbrands’, which has a unified naming convention according to the front-end token system.

Even if those shades look, in reality, this 4 yr old system was the result of two brand systems merged. The main issue was that lots of

A bit of a tedious process was to reverse search colours and the first question is why would you need this. Well here is the point, large design systems in such big crossbrand organisation often witnessed a lot of merging and rebrand attempts, they never look like a ‘design system template’ from the figma community.

Aside from looking like you would football match strategy plan, this was necessary to plan which

Even if Figma’s ecosystem offers a lot of plugins, the process is not entirely automated. For example in this case the plugin can ‘see’ where a specific colour style is used and it has the option to ‘swap’, but that doesn’t change chronologically (as in Atoms first, molecules, orgasims).

If we run here the plugin scripts it will ‘modify’ all component colours, so when a change from the ‘Atoms’ is made the instances will not change as it was modified by the script. This tool makes a great assistant to navigate us and teleport to the right place and do the changes strategically.

The result was removing over 20 colour styles that were hardly used, defaulting into a solid set of colours that were according to the brand guidelines. This was a move that not only helped developers to reduce errors and maintain the front-end but helped us designers with the everyday tasks, to assign colours seamlessly to new components.

These two markets have a fiscal code with is optional however important enough to take into consideration as lots of people are using it, especially when buying med-related items.

The main task was to find a way to relocate the fiscal code in the account and showcase it in the checkout flow for confirmation. The main pain point was to understand the hurdles of the tech team while providing the best user experience possible.

For our presentation purposes, we will showcase the fiscal code for Italy, with a lot of copy bits in English. After the proof of concept was validated we translated everything into IT and ES. Swapping the Fiscal Code (Codice Fiscale) with NIF Code for the Spanish market

We created a widget

Route A — The user adds a fiscal code from the Account and then gets to Checkout where the widget is prepopulated.

Route B — The user has no Fiscal Code in the account but adds one while in checkout

A third category is the users that already have entered a FC/NIF in the system and they need to be updated to the changes that occur in their account

For the users who have entered a fiscal code in the system already, a way to signpost the changes via info bubbles.

One of the most weary yet exciting tasks was to finally change the Twitter logo into X.com, changing all the multiple elements where Vision Direct showcases its social media presence, like footers, navs and email components. To get everything right we composed an elaborate strategy for this task as follows:

.

.

.

.

.

.

.

.

.