The benefit of a Design system
The LVMH website project was subject to very tight deadlines. We needed a way to design efficiently at speed and avoid repetition. These designs needed to be communicated to stakeholders for feedback/sign-off and also easily handed over to the development team.
Initiative:
Business goal - Deliver an MVP website in time for the launch of the new STELLA beauty branch in September 2022. Be able to follow up the MVP with a series of iterative enhancements to the website
Design (UX / UI) brief / metric - Create a design system that would enable rapid design and efficient handover. This needed to include basic repeatable elements such as typography, colours and buttons; which could then be used to compose more complex components and modules.
Contents
The base system
Building out the design system
Refining the design system - (including accessibility)
Hand over for development - (Micro animation & Transitions)
Summary
01 The base system
First I produced a simple wireframe version of each element listed in the creative concepts. This meant I could begin designing knowing that these elements could get updated easily once the final branding had been defined; this was happening in parallel in collaboration with marketing and a design agency.
02 Building out the design system
Once the final brand book and concepts were finalised I was able to quickly apply these to existing base styles, making updates and additions as needed. I also ran a workshop/education piece harmonising branding and creative design with UX best practices. This helped the design agency in iterating their concepts into user-centred web components, which were then folded back into the design system.
03 Refining the design system
As the project progressed the design system grew to include new elements and components. The entire system could be quickly updated to include iterations from testing and stakeholder feedback as well as updated assets.
Accessibility
Accessibility was a top priority for this project. I have a great deal of experience in this area and ensured that all branding and design concepts were tuned to comply with Web Content Accessibility Guidelines. I also had access to an accessibility agency which helped reinforce the importance of compliance with more brand-focused stakeholders..
04 Hand over for development
I took the development team through the design system highlighting the key features and sharing that it will be updated throughout the project giving them a foundation to start building with.
Micro animation & Transitions
After the design QA of the first development milestones it became really clear that micro animation & transitions were missing throughout the build; this was most likely due to the rapid turnaround times and introduction of new developers. However, being a luxury brand these small details actually have a huge impact on the overall feel and experience for the user. This made me think that the micro animations and transitions were not communicated clearly, so I added an extra section to the design system with clear examples for each so any developer could use it to inform a build.
05 Summary
Producing an initial base system which then evolved into a full design system allowed efficient, accurate and consistent delivery of designs. The system made it simple to roll out small or large changes as needed, based on feedback and new features. The addition of micro animations will be particularly useful as the website is refined post MVP.