Mainline Menswear is a prominent online retailer specialising in high-end designer menswear. Catering to men aged 25-45 with mid to high-end incomes, Mainline offers a curated selection of clothing, footwear, and accessories from luxury brands like Hugo Boss, Ralph Lauren, and Emporio Armani. The company's mission is to provide a seamless and sophisticated shopping experience that reflects the quality of its products.
Picture this, you're trying to complete a puzzle, but each piece is crafted by a different artist with no common vision. While each piece is beautiful on its own, they don’t fit together seamlessly.
This was the design situation at Mainline Menswear. With no design system in place, the team designed as they went, leading to a lack of structure and consistency. The challenge was to unify these non functional elements into a cohesive design language that would guide the team moving forward.
To address this, I focused on creating a robust design system in Figma. Here’s how I approached it:
Component Library: I built a seamless library of over 580+ UI components. This included everything from buttons to navigation elements, all standardised to ensure consistency.
UI Documentation: Detailed documentation accompanied the components, providing guidelines on how to use them correctly. This was crucial for onboarding new team members and maintaining design integrity.
Design Principles: I integrated industry-standard principles, such as a 4px grid system and button states for prototyping. This helped maintain a clean and consistent look throughout the app.
The new design system brought significant improvements:
Efficiency Boost: Design-to-development speed increased by 76%.
Full Adoption: Every developer adopted the new system.
Better Communication: Misunderstandings between designers and developers dropped by over 40%.
Robust Library: With over 580 components, the system provided a solid foundation for future projects.
Feedback from developers was overwhelmingly positive. They found the system intuitive and helpful, although there were requests for an introductory document to help new users get up to speed.
Looking back, I realise that starting with the design components and saving the documentation for later would have been more efficient. Given the time constraints and the scope of the project, focusing on the essential components first would have allowed for quicker implementation. Additionally, better communication with stakeholders about the project's scale and timeline could have helped manage expectations more effectively.
Overall, the project was a success. It underscored the value of a well-structured design system in improving efficiency and consistency. Moving forward, I would continue refining the system based on feedback and evolving needs, ensuring it remains a valuable asset for Mainline Menswear.
