Rollie Nation

Rollie Nation design system

Situation

Rollie Nation, known for its lightweight and stylish footwear, was embarking on a significant project: the creation of a brand new website. Recognising the need for a cohesive and efficient design process across the growing digital touch points of the brand, I took the initiative, as the only UX/UI Designer to create a comprehensive design system.

By creating this comprehensive design system, I aimed to significantly streamline the design and development process for Rollie Nation's digital presence. With clearly defined type and colour styles readily accessible, I knew anyone creating banners, social media graphics, or other visual assets could maintain brand consistency effortlessly. The library of pre-built components and established visual styles would allow for rapid prototyping and design of new landing pages for marketing campaigns or specific product promotions. Designers could simply assemble existing elements instead of starting from scratch each time.

My initiative in creating a design system for the new Rollie Nation website was a strategic decision. I believed it laid a strong foundation for a consistent, efficient, and scalable digital future for the brand. By meticulously defining type styles, colour styles, and components, and demonstrating their application in the homepage and website design, I aimed to empower the team to create cohesive graphical elements, design effective landing pages and emails, and ultimately deliver a unified and positive brand experience for Rollie Nation's valued customers.

Tasks

  • To create a cohesive and brand-aligned visual foundation for the new Rollie Nation website, encompassing typography and colour.

  • To create a comprehensive library of modular and reusable UI components that would serve as the building blocks for the new website and future digital products, promoting efficiency and consistency.

  • To create visually appealing and user-friendly templates for key website pages, demonstrating the application of the design system and establishing a consistent layout and user experience.

  • To ensure the successful understanding, adoption, and integration of the design system by the design and development teams.

Actions

  • This action significantly fostered buy-in and understanding of the design system's value across all relevant teams (design, development, marketing). This collaborative approach built a sense of ownership and enthusiasm for adopting the new system, leading to smoother implementation and fewer points of friction later on. It also surfaced valuable insights and perspectives from different disciplines that enriched the design system itself.

  • This approach struck a crucial balance between consistency and creative freedom. By breaking down components into smaller, adaptable building blocks and introducing variations, I empowered designers to create diverse layouts and experiences without deviating from the core brand language. Developers also benefited from the reusability and clear structure, leading to more efficient development cycles.

  • Comprehensive documentation served as the single source of truth for the design system. Clear guidelines, usage instructions, and technical specifications empowered both designers and developers to work independently and confidently.

  • By creating a mechanism for team members to contribute suggestions and report issues, I fostered a culture of continuous improvement. Regular reviews and updates allowed the design system to adapt to evolving brand needs, user feedback, and technological advancements. This proactive approach prevented the design system from becoming stagnant and ensured its ongoing value as a dynamic and essential tool for Rollie Nation's digital presence.

Results

The implementation of the Rollie Nation design system resulted in several significant and successful results, contributing positively to the brand's digital presence and operational efficiency.

The most immediate and visible success was the establishment of a unified and consistent brand experience across the new website, landing pages, and email communications. The defined type styles, colour palettes, and reusable components ensured that all graphical elements and user interfaces adhered to the Rollie Nation brand identity, strengthening brand recognition and building trust with customers.

The design system provided a solid and scalable foundation for Rollie Nation's future digital growth. Adding new features, creating new landing pages for marketing campaigns, or even expanding to new digital platforms became significantly easier and more efficient.

To explore my portfolio in greater detail, please view my Figma file.