Background
Upon joining the startup, I observed several issues;
Inconsistent icons.
Text sizes not adhering to WCAG accessibility guidelines.
Absence of design system or guidelines for designers.
These inconsistencies created a fragmented user experience and and slowed down our design process. Seeing the need for a unified approach, I took the initiative to build a comprehensive design system to bring consistency, efficiency, and accessibility into our workflows.
Initiative
I presented the idea of a standardized design system to the founder, focusing on its potential to enhance consistency, streamline collaboration, and scale with future updates. With approval, I started by conducting a thorough design audit to identify and document inconsistencies across the app, such as typography variations, icon misalignment, and accessibility gaps.
Guided by atomic design principles, I approached the system’s creation in a structured way: establishing foundational elements like typography scales, color palettes, and grid structures, then building out reusable components that aligned with our brand identity. By breaking down components into atoms, molecules, organisms, and templates, I ensured each part was modular and adaptable. To make the system accessible for both designers and developers, I created detailed guidelines and documentation, promoting consistent application across all teams.
Design system development process
Color system enhancement
Background:
The initial design employed various shades of pink and gray inconsistently across different screens, leading to a disjointed visual experience. Though this issue affected the inconsistency on a minor level, it affected the color harmony and visual appeal of the entire app, leading to an unsatisfactory user experience.
Action Taken:
I conducted a color audit to streamline the palette, defining consistent primary, secondary, and tertiary colors that aligned with the brand’s identity. Each color met WCAG contrast standards, enhancing accessibility and visual appeal.
Results:
Brand Consistency: The use of unified color palette maintained a cohesive and professional look throughout the app.
Accessibility Compliance: By adhering to WCAG contrast standards, I ensured the app was accessible to a broader audience, including users with visual impairments.
Unified Visual Identity: The standardized color palette created a harmonious and consistent visual experience across all screens, enhancing the app’s overall aesthetic appeal.
Button design standardization
Background:
Initially, the app's buttons varied significantly in shape, size, and hover effects, contributing to user confusion and a lack of visual coherence. A clear button style guide was needed.
Action Taken:
To ensure a uniform experience across the app, I standardized all buttons to have consistent shapes, sizes, and hover effects. This involved redesigning some buttons to match the shape and style of the rest.
Results:
Consistent User Experience: The standardized buttons provided a uniform look and feel across the app, reducing user confusion and improving navigation.
Enhanced Visual Coherence: The consistent button design contributed to a cohesive and professional interface.
Improved Usability: The clear and consistent hover effects enhanced user interaction, making it easier for users to understand and engage with the app's functionalities.
Grid System
Background:
The page layouts had uneven margins, contributing to a misaligned and cluttered appearance. This inconsistency detracted from the overall user experience and visual appeal making the content look misaligned. The app’s layouts lacked cohesion, with disparate margins and paddings across different screen sizes (web, tablet, mobile). This inconsistency resulted in a fragmented user experience, particularly when transitioning between devices.
Action Taken:
To address these issues, I implemented a 12–8–4 column grid system with margin of 20px and gutter of 8px. This decision was based on industry practices and stakeholders decision, aimed to bring uniformity and order to the layout. By applying this grid system, it ensured that all elements were precisely aligned, creating a harmonious and visually appealing dashboard. I defined a comprehensive grid system that included breakpoints for responsive design.
Results:
Improved Alignment: The new grid system significantly enhanced the alignment of elements, contributing to a cleaner and more organized interface.
Consistency Across Devices: The responsive grid system ensured that the app maintained a cohesive look and feel across all screen sizes, enhancing user satisfaction and engagement.
Visual Appeal: The organized layout and consistent margins and paddings created a more aesthetically pleasing design, improving the overall user experience.
Layout Improvement
Background:
On the profile screen, the inconsistent padding around the user's avatar, bio and other elements resulted in a cluttered and unbalanced appearance. This lack of uniformity detracted from the overall user experience and visual harmony of the app.
Action Taken:
To create a cleaner and more balanced layout, I applied a consistent padding of 8,16, and 24px around the avatar, bio, and other elements. This adjustment ensured a more organized and visually appealing profile screen. Recognizing the importance of visual consistency, I standardized margins, paddings, and spacing across the app. This involved creating comprehensive layout templates for different screen sizes, ensuring a uniform look and feel regardless of the device used.
Results:
Enhanced Visual Balance: The consistent padding around the avatar and bio elements improved the visual balance and cleanliness of the profile screen.
Uniform Layout: The standardized margins, paddings, and spacing across various elements contributed to a cohesive and professional interface.
Responsive Design: The layout templates for different screen sizes ensured that the app maintained a consistent and user-friendly appearance on all devices.
Improved User Experience: The cleaner and more organized layout enhanced the overall user experience, making the app more intuitive and pleasant to navigate.
Icons and Styles Standardizaton
Background:
On the settings page, the use of both filled and outline icons created a mixed and inconsistent visual style. This lack of uniformity disrupted the app’s professional appearance and user experience. I standardized all icons to follow a consistent style (outline icons) and size (24px), ensuring a cohesive and professional look.
Icons were another major area of inconsistency. Different styles and sizes of icons were used throughout the app, which disrupted the visual flow.
Action Taken:
To ensure a cohesive and professional look, I standardized all icons to follow a consistent style and size. I chose outline icons with a uniform size of 24px for all instances across the app. This decision was based on industry practice and stakeholders' decisions and the need for a clean, modern interface. I also redid some icons and icon grid from scratch in Adobe Illustrator due to inconsistency occurring in various technical levels such as stroke sizes and others.
Results:
Cohesive Visual Style: The standardized outline icons provided a unified and professional look, enhancing the app’s overall aesthetic.
Improved Visual Flow: The uniform icon style and size contributed to a seamless visual flow, making navigation intuitive and visually appealing.
Enhanced User Experience: Consistency in icon design improved the user experience by making interactions more predictable and visually pleasing.
Efficient Design Process: Integrating standardized icons into the design system streamlined the design process, ensuring ongoing consistency and faster iterations.
Consistent Icon Style: Adopting a unified outline style for all icons.
Uniform Icon Size: Ensuring all icons were sized at 24px to maintain visual balance.
Design System Integration: Incorporating the standardized icons into the design system for consistent application across the app.
Collaboration and Process
Working closely with the design and development teams, we established short-term and long-term priorities. The key principles were rapid scalability and modularity, ensuring the design system could evolve with the app's development.
Leveraging my expertise in UI/UX design, I focused on creating a system that was not only visually cohesive but also highly adaptable to future needs. My approach included defining a robust set of reusable components, standardizing design patterns, and ensuring consistent user experiences across all touchpoints, ultimately driving efficiency and innovation within the team.
Challenges Faced
Creating the design system was not without its challenges:
Resistance to Change:
Some team members were hesitant to adopt new guidelines, preferring their familiar ad-hoc methods. Stakeholders were reluctant to change some elements despite knowing the resonings behind the necessary change.
Solution: I held meetings and one-on-one sessions to explain the benefits and provide hands-on training using the Design Library, easing the transition.
Time Constraints:
Balancing the development of the design system with ongoing project work was demanding. This is only the tip of the iceberg, and there is still more work to be done.
Solution: I prioritized components based on their impact and collaborated closely with developers to integrate changes incrementally.
Maintaining Consistency:
Ensuring that the design system was consistently applied across all platforms and devices required continuous monitoring.
Solution: I implemented a review process where new designs were checked against the design system before approval.
Outcome
The implementation of the design system was well-received. It provided:
A cohesive look and feel across the app
Streamlined design processes
Faster design-to-market times
A single source of truth for designers and developers
The design system is continuously updated to keep pace with the app's rapid development, ensuring it remains relevant and effective.
Reflections
Developing the design system was a transformative process for Flowmingle. It not only improved the app's user experience but also enhanced the efficiency and collaboration within the design team. This project reinforced the importance of standardization and user-centered design in creating scalable and effective UI/UX solutions.
Key learnings and achievements:
User-Centered Design:
Focusing on real user needs and feedback was crucial in developing a functional and intuitive design system.
Collaboration:
Effective communication and collaboration across teams were essential in overcoming resistance and ensuring consistent implementation. Stakeholders played a huge role when it came to making final decisions.
Continuous Improvement:
A design system is a living document that needs to evolve with the product, requiring ongoing updates and refinements. And I am still working on it.
This experience has solidified my belief in the power of design systems to drive consistency, efficiency, and quality in product design. It has also prepared me to tackle similar challenges in future projects, with a strong foundation in strategic design thinking and collaboration.
