How I Revamped Design for Founders Network and Standardized the Style Guide for Over 1,000 Entrepreneurs
Founders Network faced design challenges with inconsistent fonts, colors, and cluttered assets, which frustrated developers and hampered site performance. We revamped their UX/UI by standardizing design elements and streamlining processes, creating a cohesive and efficient user experience. This transformation aimed to enhance the platform’s usability and support Founders Network’s mission of fostering entrepreneurial growth.
Problem Statement
Founded in 2011, Founders Network is a vibrant community of around 1,000 entrepreneurs. The platform faced a challenge with its design assets, which were cluttered with inconsistent fonts and colors. This confusion hindered developers and negatively impacted site performance.
This case study outlines how we addressed these issues by streamlining and standardizing their design assets and processes. Our goal was to create a more cohesive and efficient platform, ultimately enhancing the user experience and supporting Founders Network’s mission of fostering entrepreneurial growth.
Project Approach and Methodology
1. Audit and Assessment:
The first phase of this UX/UI design project for Founders Network involved a comprehensive audit of their existing design files and processes. This step was crucial to understand the client’s concerns and gather feedback from the development team. Through interviews and a deep dive into their design assets, we identified several key issues: the jumbled typography, lack of color styles, and a dearth of componentization, leading to design inconsistencies.
2. Figma File Page Structure:
The Figma file was divided into clearly labeled pages, each dedicated to a specific section or component of the website. This organization allowed team members to quickly locate and edit the relevant design elements without sifting through a cluttered workspace.
3. Typography and Color Standardization:
To address the typography issue, a standardized typography scale was meticulously crafted within Figma. This scale served as a foundational guide for future designs, ensuring that font sizes and types adhered to a consistent system. Simultaneously, a comprehensive color palette, including color styles, was introduced to maintain visual harmony throughout the design files.
4. Icon Library Integration:
Recognizing the challenges the development team faced in accessing and implementing icons, an icon library was seamlessly integrated into the Figma file. This resource simplifies the process for developers and subsequent designers, streamlining the incorporation of icons into various pages and maintaining design consistency.
5. Componentization and Redesign:
With typography, color styles, and the icon library established, the focus shifted to componentization. Components were created for various design elements, allowing for a modular approach to page design. This approach not only expedited the design process but also greatly enhanced the overall visual consistency and cohesiveness of the website.
6. Transformation and Results:
The culmination of these efforts led to a remarkable transformation in Founders Network’s design assets and processes. The redesigned feed now boasted a sleek and uniform aesthetic, making it easy for designers to work within established parameters. The standardization of typography, colors, and components has eliminated the ambiguity that previously plagued design decisions. Developers found it significantly easier to work with the new design system, reducing the potential for misinterpretation and errors in implementation.
Key Takeaways
Design Consistency is Essential: Achieving design consistency across a digital platform is paramount for enhancing the user experience. In the case of Founders Network, addressing inconsistencies in fonts, colors, and components significantly improved the overall aesthetics and usability of their site.
Comprehensive Audit and Assessment: The project began with a thorough audit and assessment of the existing design assets and processes. This step is critical to identify pain points, gain insights from stakeholders, and set a clear direction for the design overhaul.
Typography and Color Standardization: The creation of a standardized typography scale and color palette is foundational for maintaining a cohesive design system. It ensures that all design elements adhere to a consistent and visually pleasing style.
Efficient Figma File Organization: Organizing the Figma file with a clear page structure, design components, version history, comments, and access control is essential for improving collaboration and streamlining the design process. It allows team members to work more efficiently and with reduced errors.
Icon Library Integration: Incorporating an icon library into the Figma file simplifies the process for developers and designers, making it easy to access and implement icons consistently throughout the design.
Componentization Enhances Efficiency: Creating components for reusable design elements not only speeds up the design process but also ensures that design elements remain consistent and easily modifiable.
