Wireframes
Early versions of wireframes, both low and high-resolution.
Design System and Grids
As the lead designer, I developed a Design System that, when integrated with the Registry’s design, created an interconnected, continuously updated prototype. This setup ensured that any changes to core elements automatically propagated throughout the entire prototype.
The MRV platform shares the same component base as the Registry’s Design System, ensuring consistency across platforms and reducing the effort required for design management.
Additionally, we utilized Storybook along with a Figma plugin, directly linking the design system to the development environment, streamlining the process of managing design updates.
Prototype
I developed the prototype in Figma, like all the other Riverse products. The prototype in question uses:
- Riverse’s Figma Design System (updated with new components using the Atomic Design principle)
- Responsive design thanks to auto layout, constraints, and grids
- The prototype can be tested with Figma preview (all animations and hover effects are fully functional)
Results pdf template
The customer has the option to print a PDF with all the details of the claim results, which are part of the LCA (Life Cycle Assessment).