Ways of working UX strategy - Introducing a UX design system: Blue Print

Internal communication is as important as how you speak to external stakeholders, customers or clients. Without it you will not be able to convey your ideas to other teams and achieve your business goals by effecting positive change for users.

Initiative: 

Business goal - Re-introduce the UX process back into Louis Vuitton to help the wider buisness make more informed descions

Design (UX / UI) - Look at how and what the introducing the UX process looked like and the tools that would be needed to do so.

---

Contents

1. The current state of play

2. Exploration of approaches

3. Back to the drawing board

4. Utilising Variables

5. Summary

01 The current state of play

I was asked to spearhead the reintroduction of UX into the LV business process. One area I focused on was the lack of flows and wireframes. The existing design team setup was to go directly from brief into high fidelity UI screens. This meant many fundamental processes were missed which negatively impacted elements, states and journeys. There were even cases where some other teams/stakeholders were producing wireframes and journeys to compensate for this. As a positive this demonstrated a desire to utilise UX processes; however, the outputs were high level and too inconsistent to have meaningful impact. There were also parts of the organisation which struggled to see past UI design, considering UX as unfinished or even unnecessary. This existing process was fragmented and needed improving and LV required help reintroducing the UX and conveying its importance across projects.

---

02 Exploration of approaches

I began exploring options with the team, one method suggested was to alter the design as needed and use a filter or an overlay that was blue to imply it was a wireframe. However this quick and dirty approach would not meet all needs. We would need something flexible for both high and low fidelity. Another approach explored a Figma plugin but depending on how components were set up it would work in some cases and not others.

---

03 Back to the drawing board

Example: Low fidelity Wireframes: This felt like unnecessary duplication when existing signed off components in the UI already existed and were signed off

In order to manage the change in a way that would be less disruptive and increase buy in I implemented a UX design system that could exist alongside the existing signed off UI. To do this I used the existing UI only design system as a base reference. This was challenging as the existing system was largely non-compliant with UX principles; however, the benefit in doing this was that it produced a clear set of improvement steps. This approach also minimised friction internal team process as they rebuilt existing components since the UX wireframes layered in with the existing high fidelity designs of signed off components

---

04 The Solution

This seemed like a great opportunity to use the new variables feature in Figma, easily switching between UX and UI mode. The UI was called Monogram and the UX system was called Blueprint. Luxury design heavily uses grayscale tones so Blueprint was inspired by architectural contact prints comprising paired blue tones to clearly distinguish them from the UI greys. Along with the variable colours and border radiuses we also prepared the system to support typography variables due in an upcoming Figma release.

---

05 Summary

This project was a great demonstration of how even the application of a light touch of UX oversight can have significant impact without negatively effecting existing business process. The advantage of an approach like this is that it lays the foundation for UX best practice and workflows to seamlessly integrate into the organisation. In this case the UI design system could quite literally switch to UX mode at a click of a button.