Matrix

Context

Introduction to the subject

The Manufacture Digitale is an EDF team focused on improving digital tools and processes to make teamwork easier and optimize processes.

Their goal was to simplify project kickoffs and support faster Go/No-Go decisions.

In the long term, the idea was to create a tool to support this process and ensure that each project delivers a good return on investment.

Another objective was to better define how projects are prioritized and to improve the way requests are managed, for example, by reducing the excessive use of emails.

The old process was a sheets based table system.

The process

User research

WORKSHOPS (branding, user needs)

We ran several co-design workshops with target users, ensuring the solution was tailored to their needs.

Two workshops focused on identifying user needs, and one explored branding. Questions like “What do we want to display?” helped define a rough architecture for the design.

The branding workshop then gave me all the information I needed to make a user informed decision on the global theme, naming, and colors of the web app. This was done through various exercises of brainstorming, word associations, and a voting system that allows the end user to be directly implicated in the final look.

Design

UI research

To define the visual direction of Matrix, I benchmarked a range of platforms and applications with strong UI patterns and clear visual structures.

I focused on layouts, component composition, color usage, and interaction behaviours, particularly in data-heavy interfaces. The goal wasn’t to copy designs, but to understand what works well and apply those principles to Matrix.

This research was carried out with a key constraint in mind: the project relied on an existing EDF design system, which did not allow the creation of custom components. All design decisions therefore had to stay within predefined components and patterns.

The benchmark helped me explore how far the design system could be pushed through hierarchy, spacing, layout, and interaction details, while remaining consistent with EDF standards.

Wireframing & navigation

Once the structure was clear, I created wireframes to translate ideas into concrete screen layouts.

Wireframes focused on hierarchy, content placement, and user flow, keeping visuals minimal. This allowed quick reviews with the product owner and ensured the right information was displayed.

The examples shown illustrate how key screens were structured early on, before moving into higher-fidelity design using the existing design system.

I mapped the navigation structure to define how content was grouped and how users would move between sections, clarifying the overall product structure.

Branding & UI kit

Before high-fidelity screens, I created branding and a UI kit to ensure a consistent visual foundation. This included logos, thumbnails for light and dark backgrounds, and a color scheme based on Google Material guidelines.

I also explored the use of AI during the early research phase to generate logo inspiration, which helped quickly explore different visual directions before refining a final approach.

The UI kit used master components in Figma, letting me update elements in one place and automatically reflect changes across all screens. This sped up iterations and kept the design consistent.

High fidelity screens

With the visual foundations in place, I designed the complete set of high-fidelity screens in Figma, covering all flows and key states.

Interactions were defined in the designs, with detailed annotations explaining behaviours, edge cases, and layout logic. These served as a shared reference with the developer, reducing back-and-forth and aligning design with implementation.

The result was a complete, implementation-ready design file that could be easily navigated and maintained as the project evolved.

User testing

Creating and testing scenarios

User testing was conducted with three key users to evaluate the design through realistic tasks within the app, using Figma’s prototyping tool.

Participants were asked to think aloud while completing tasks. Feedback was collected through observation and a short survey, including task completion, satisfaction ratings, and open-ended questions.

The tests confirmed users could navigate the app, complete key tasks, and understand the information hierarchy, while also revealing areas for improvement to guide the next iteration.

Processes & Collaboration

I worked closely with the Product Owner and developer to align on priorities, requirements, and implementation. Early developer involvement in reviewing flows and estimating effort helped the team plan realistically and make feasible design decisions.

Specifications were managed using a mix of Jira and Figma, combining written requirements with annotated designs. This collaborative workflow enabled fast iteration, consistent screens, and developer-ready assets.

Next steps

Based on user feedback, several opportunities for improvement were identified alongside what worked well. Users found flows intuitive, the design clean, and the use of color effective, with an average satisfaction rating of 6/7.

Next steps include adding a dedicated section in the documentation for user feedback, including an annex with raw data, and refining flows and screens where users experienced minor friction. These actions will help ensure the app remains clear, consistent, and aligned with user needs.