Upon being tasked with this project, our team went through the current CMS looking for problems we could identify with the system as it currently is designed. To begin this process, we compiled a list of all the actions within the CMS and attempted to complete each task, taking notes where issues arose. Some of the inconsistencies and user experience issues that our team were able to identify included:
Throughout the entire system, we noticed that there was a lack of feedback when interacting with different components of the UI. Actions such as hovering, dropdown’s, button presses, image uploads and text inputs all had little to no feedback, which ultimately left users confused when interacting with the CMS.
Repeating buttons and icons with the same style were used throughout the interface, however in different sections, they performed different actions. This once again was very confusing as users had to re-learn the actions related to each button and icon in the different areas of the CMS.
Dropdown and text input labels are placed within text input areas. While this doesn’t initially pose any issues, when users interact with the system and begin applying filters and filling out text inputs, they are left with a system that doesn’t remind them of the selections they have made and are forced to remember the category of each filter.
After analyzing the current pain points within the CMS and identifying the areas that required the most attention, we then took a step back and mapped out the user journey flows for each section.
After compiling an asset library and identifying the individual components within the interface that needed the most attention, we were then able to re-design each section of the CMS. The sections that we focused on included:
The current dashboard is quite simplistic, and provides a quick overview of the number of products, stores and images within the CMS. While this quickly provides users with the most important information within the system, the dashboard could provide much more information given the large amount of unused space in the screen.
When updating the navigation, our team decided to employ a fixed vertical navigation on the left side of the screen. By default the navigation is collapsed, however, when users hover on the navigation, it expands and acts as an overlay on the current screen. This was intentionally designed in order to maximise the screen real estate due to the nature of the content being viewed.
The overall functionality of the product management section didn’t change a lot during our re-design, however the ways in which text input and dropdown filters worked certainly did. As stated previously, a main goal of our re-design was to provide a constant communication for every action that was completed in order to improve the feedback states between the system and user. These included various hover states, text input selections, as well as dropdown filters.
A key focus of our re-design was to improve micro-interactions in order to improve the communication between the user and system. This challenged our design team to think about all the different states of interactable elements within the CMS and design them in a way which clearly communicated the status of the system to the user. Demonstrated below is how all text input fields work within the various interactable states of the CMS.
Designing the CMS Home Builder, was one of the most challenging design problems I’ve ever attempted to solve due to the large complexity and number of features within the section.
The Home Builder section allows employees to build “homepage blocks” that are accessible through the iOS application used by employees in-store. Each home block is completely customisable and can be viewed across all LVMH stores or specific regions, and markets depending on the content being promoted.
When re-designing the Home Builder section, we wanted to construct a process that was incredibly simple and efficient for employees by reducing the number of screens they had to interact with. Focusing on this design goal allowed us to completely re-structure the Home Builder section in way that provides as much information as possible to employees as quick as possible.
While these improvements in the interface corrected a lot of the exisiting issues within the Home Builder section, there were now additional features that needed to be added into the overall functionality to provide employees with a more powerful system. These new features included:
The communication tools section allows employees to manage specific advertising campaigns for collections created throughout the year. Depending on the collection, employees can upload a selection of product related photos and from there, they have the ability to manually add related products to each photo. This allows for employees to showcase LVMH photos to clients, while also providing them with a direct link to view each product within the photo.
Throughout the re-design, the functionality of the communication tools did not change much, rather we sought ways to improve the interface by utilsing the best UX practices and maintaining a consistent look and feel throughout the CMS.
Similar to the Home Builder, employees have the abilitiy to customise the cover of the Ad Campaign as well as the content within. Once the details of the cover have been established, users can begin to upload photos to the collection where they then have the ability to tag related LVMH products.
The LVMH CMS re-design was a very large and complex working tool that took several months to design and create. In order to arrive at the final designs of the CMS, we completed a thorough analysis of all the sections, identified components that needed to be updated, and worked with the brand to ensure all their demands were met in terms of overall performance. After multiple design iteration sessions, we were successfully able to re-design the CMS in a way that corrected all of the prior usability issues, while also improving and adding many new features.