Vision Direct

SUMMARY

Background

I joined Vision Direct in October 2023, initially on a short 3-month contract as their only UI designer to adopt the look and feel from their parent companies new design system into Vision Direct’s new website. Vision Direct is an e-commerce platform who sells an array of contacts including coloured contacts, daily disposables, weeklies, multifocal contacts and toric lenses for astigmatism. They sit under the umbrella of Essilorluxottica along with other brands.It wasn’t long before I identified issues with the design system they we’re trying to adopt.

‍

Outcome

‍

DETAILS

Scope and considerations

The design system they were trying to use wasn’t fit for purpose as it adhered to the more boutique optical brands that sit under Essilorluxottica who didn’t have the same capacity or volume Vision Direct, as an e-commerce platform had.Work had already begun on development before I came onboard so I had to convince my PM and Head of Product to halt production before they carried on down the rabbit hole they were going. I knew the current DS wasn’t appropriate but I also knew that any new system would have to scale fast, as I would have to audit the existing one, have difficult conversations with the Essilorluxottica design team and plan a roadmap for the new design system so I had to approach this challenge strategically.Working with Head of Product and Front-End Engineers, I established a set of short term and long term priorities. Rapid scalability and modularity were some of the guiding principles, working towards a tight deadline for the launch of the MVP. We showed diplomacy when collaborating with the Essilorluxottica design team reusing existing components and guidance where possible and creating new ones where needed.

‍

Scope and considerations

Obviously we were running well behind having stopped production while we re-evaluate the best way forward. My argument was that if we keep on going the way we were we may never have a finished system in place but if we did it the way I suggested we would still be late on delivering but we would have a consistent product that we could deliver to the masses and receive invaluable feedback.Unfortunately we didn’t have the time or resource for user testing (an imperative in my opinion) so I had to use my experience to make assumptions and I’ve worked with many UX professionals and Accessibility designers and created many websites and worked on many design systems to make informed decisions, all that being said, nothing replaces the feedback you receive through testing your product.Along with the production of the design system I was responsible for the new look and feel website adopting the system we were working on, there was a lot of plate spinning going on, reverse engineering in many cases, organised chaos.

‍

Laying the foundations

The brand assets had already been supplied and signed off so Typography, base colours and iconography had already been created. I therefore created an extended palette, a set of background greys and feedback colours. It was imperative to adhere to the brand tone of voice when creating the primitive assets.I used the Atomic Design approach and sectioned off my atoms, molecules and organisms and rather than creating a component, testing then iterating I was auditing each page of the existing website, deciding whether that component would exist in the new world and creating the ones that did and discarded the ones that didn’t, it was a very different way of working for me but it challenged all my decisions as these needed to be on point to save any further delay. I adopted a unique approach to establish the groundwork by utilizing a variety of page templates. I examined several strategies for structuring information, navigation, and sidebar configurations. Collaborating closely with the front-end engineers, we established the grid for essential breakpoints, aligning it with their configuration in Material UI.

While working closely with developers, we made sure that our naming conventions and how we organised components worked well for everyone. We reflected our Design System in Storybook, and this teamwork really helped streamline the whole process.

‍

Accessibility is key

Building a Design System from the ground up allowed us to integrate accessibility into our workflow from the outset, rather than treating it as an afterthought. Key principles we focused on included: verifying colour contrast across various backgrounds and interaction states (which involved an in-depth exploration of accessibility standards for disabled buttons), ensuring appropriate font sizes and touch targets for mobile devices, incorporating text labels alongside icons in mobile navigation, and maintaining consistency across layouts and similar UI elements. While there is certainly room for improvement, as trade-offs are inevitable and time constraints limit our ability to meet all standards, this approach positions us on the right track and fosters a collective commitment to upholding accessibility standards.

‍

CMS baptism of fire

Midway through the system build I was informed of the CMS page structure we, well I, had to create. My CMS knowledge at the time was quite limited so this was chucking me in at the deep end but it had to be done. 
So, I audited the current site, where we used the CMS, blogs, articles, promotion pages etc and put each component type into categories.
From this I created a variable component that would work for each category. To test these I created templates to show how these components would work and what fields would be edited.This was one of the examples I referred to when discussing how Essilorluxottica design system couldn’t fit Vision Direct as their CMS covered a few pages whereas went into the hundreds, it just wasn’t viable.

‍

Results

In the eight months since I began this role, I successfully launched the first version of the Design System and established a streamlined user journey for the website. This initiative not only created a unified aesthetic for our rebranding efforts but also provided a clear framework. Additionally, it optimised the design workflow, which was crucial for my role as a solo designer, and significantly reduced the time from design to market by equipping developers with a reliable source of truth and a collection of reusable components and patterns.