Le Guide du Mobilier (GDM) is a Grenoble-based startup, incubated at Moonshot Labs, striving to revolutionize the professional furniture sales market with its user-focused and sleek web product, designed with a modern and inviting interface.
GDM is a one-stop B2B solution that streamlines the office furnishings process. Its defining characteristic is a powerful configurator that offers a multitude of personalization options, ensuring that furniture seamlessly fits within space and color parameters. And with its intuitive visual feedback, the user is always in control, effortlessly able to understand the consequences of their design decisions.
For this project, I was the driving force behind the creation of a user-friendly interface, starting with the wireframes provided by the product designer. I also established the foundation of a comprehensive design system to ensure a seamless transition from the conceptual phase to the development phase, eliminating any potential design inconsistencies.
Key stakeholders:
- Product designer —> Working together to ensure usability; discussing wireframes and functional logic.
- Moonshot PO —> Communicating clear guidelines, writing documentation for Front-End teams.
- GDM Founders —>Jointly defining the brand vision and explaining/justifying/negotiating interface choices
I came onboard the project following the successful completion of the strategic and UX sprints, executed by product designer, to take the design to the next level.
User interface sprint = 5 days
- Working in tandem with the product designer to ensure interface consistency.
- Collaborating with the GDM team to establish and validate the product's visual identity.
- Designing the UI for all desktop and mobile screens.
Design system sprint = 2 days
- Focusing on building a scalable component library (for both desktop and mobile).
- Supporting the PO and dev teams by providing accompanying documentation for the Design System, simplifying the development of components and layouts.
Project Scope Definition
- A comprehensive product design is planned for completion within a one-month period, with shared responsibilities between the product designer and UI designer.
- The UX strategy places a high emphasis on the configurator's critical role for end-users, making it the core feature of the MVP.
- Extended development time is anticipated.
- Documentation will play a vital role in ensuring a successful product launch.
Brand identity
Modern / Minimal / User-Friendly / Warm and Personal
The visual direction taken in collaboration with the product's founding team is firmly focused on the human aspect and emphasizes comfort and warmth provided by GDM furniture.
- A warm color palette
- Illustrative elements that convey a sense of comfort
- A serious Barlow font contrasted with a playful and human Dancing script, with its handwritten character."
To gain a clear understanding of the product, a significant part of the UI design work was done before creating any assets or components. Indeed, the most important thing was to thoroughly understand the product's specifications, for which several detailed discussions with the product designer were necessary.
The main challenges identified in the wireframes :
- Usability and versatility of the configurator
- A checkout process with successive steps and constantly accessible information to make the procedure reassuring and straightforward to complete.
- Streamlined Catalog Navigation through Dynamic Filters and Breadcrumb Trails, with Card Size Variations on Hover to Engage the User
- A Navigation Drawer Menu Tailored to a Large Number of Navigation Items
UI Goals to Achieve
- Clear structure to enhance the flow despite the abundance of choices
- Guide the focal points
- Ensure adherence to the wireframes and element hierarchy.
- Make the platform warm and pleasant to navigate.
For seamless communication with the development teams, the Product Designer and team have agreed to design the interface layouts to the highest standards of quality: pixel-perfect. To ensure that the prototypes are easily comprehended, it is critical that they be designed with the utmost attention to detail. Given that we will not be able to provide ongoing support beyond a few weeks after delivery, it is essential that the prototypes clearly convey the logic behind their construction.
Key Guidelines for Front-End Communication
- Strict adherence to vertical and horizontal grids
- Sufficient white space around interactive elements
- Consistent scaling of graphic assets
- Appropriate use of typography based on the intended purpose."
At first glance, incorporating a design system into a project that is still in its early stages may seem counterintuitive. However, given the transient nature of the designers' involvement and the extended periods of development without updates to the prototypes, Moonshot Labs has discovered that having a well-documented design system in place can greatly enhance the development of components and minimize visual and functional inconsistencies for a successful MVP launch.
Why implement an Early Design System?
- Avoid UI debt.
- Clearly communicate component and layout key elements to developers to ensure strong visual consistency.
- Facilitate project transfer as the UI Designer will not be overseeing development.
- Communicate specifications to the future design team to make it easier to take over the prototypes/mockups and graphic assets. "
Documentation :
Here's an example of an element from the Design System that demonstrates the construction logic and the beneficial impact on the user experience for components crafted with precision (balanced size/proportions/pixel-perfect design). This serves to inform stakeholders of the importance of these “details”.
Lessons Learned from GDM
- The rigor necessary for establishing a sturdy framework
- The importance of anticipating problems beyond the delivery stage
- The value of clear and effective communication within the team.
