L'Oréal 2023 Annual Report: Bringing Brand Values to Life with Eco-Friendly Design
Project Overview
For the third consecutive year, L'Oréal entrusted Epoka with the challenge of presenting its annual financial report to investors through a digital platform. This year’s objective went beyond simply displaying financial data: the report needed to reflect L'Oréal’s commitment to sustainability and innovation, providing investors with an engaging, eco-friendly experience on both desktop and mobile platforms.
My Contributions
As the UI designer, I focused on creating an intuitive and visually cohesive interface, adapting the senior designer’s initial desktop screens to responsive mobile views. I also adapted the desktop and mobile screens into an eco-mode option aimed at minimizing the environmental footprint of the site.
.png)
Sustainable DesignThe eco-mode feature aimed to reduce energy consumption on the website without sacrificing the sleek, professional aesthetic that investors expect from the L'Oréal brand.
Mobile OptimizationWhile desktop layouts were already in place, adapting these screens to mobile required careful reformatting for clarity and functionality on smaller screens.
User Feedback IntegrationIncorporating insights from user interviews, particularly concerning site structure and navigation, required agile updates to ensure a smooth user journey.
Implementing Eco-Friendly Features with Figma Variables
ChallengeDesigning a sustainable mode that was visually consistent and easy to maintain.
SolutionLeveraging Figma’s new variables feature, I created two color modes (light and eco) within the same design file, enabling rapid toggling between modes. For eco-mode, I implemented a pure black background (#000000) to reduce energy use on OLED screens. Additionally, images were disabled, only displaying when specifically requested by the user, which minimized data transfer and power usage.
OutcomeFigma variables saved valuable design time, allowing us to seamlessly apply eco-mode styles without duplicating work, ensuring consistency and efficiency across modes.
.jpg)
ChallengeThe desktop screens needed to be adapted for mobile, maintaining clarity and ease of navigation.
SolutionI simplified the desktop layouts for a vertical scrolling mobile experience, emphasizing readability and accessibility. I created a compact navigation menu and carefully restructured content to enhance usability on smaller screens.
OutcomeThe responsive design provided mobile users with an optimized experience that was equally informative and easy to navigate.
ChallengeUser interviews, run by a service provider, highlighted areas of friction in the site’s navigation, specifically in finding key financial information.
SolutionThe team analyzed the user feedback and identified an opportunity to merge two similar pages, streamlining the information architecture for more intuitive access.
OutcomeThe restructured site improved navigation, enabling investors to locate key content with fewer clicks and enhancing overall usability.
This project demonstrated the importance of adaptable design tools in problem-solving for complex requirements. Using Figma’s variables enabled efficient dual-mode design, and user feedback played a critical role in refining usability. By prioritizing sustainability and user experience, we delivered an annual report platform that resonated with L'Oréal’s values and provided a seamless, accessible investor experience.
.png)
