Developed a Design System for Flowmingle
Overview
I joined Flowmingle as a UI/UX Designer when it was in its initial phase of development. I noticed that there was absence of a cohesive design system. Although some brand elements like color, logo, and font were established, the overall UI/UX design was inconsistent, lacking guidelines for designers.
Background
Upon joining the startup, I observed several issues:
Inconsistent icons
Text sizes not adhering to WCAG guidelines
Absence of design system or guidelines for designers
These inconsistencies created a fragmented user experience and inefficiencies in the design process. Recognizing the need for a structured approach, I took the initiative to develop a comprehensive design system.
Initiative
I proposed the idea to the founder, emphasizing the long-term benefits of a standardized design system. With approval, I began by identifying and cataloging all inconsistencies within the current app design.
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:
To address this, I conducted a comprehensive color audit. This process involved identifying and standardizing the primary, secondary, and tertiary colors for the app. I also ensured that all chosen colors met the Web Content Accessibility Guidelines (WCAG) contrast standards, improving accessibility for all users. This change ensured better color harmony and user experience, aligning with the app’s visual identity.
Results:
Brand Consistency: The use of brand-approved colors 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.
Shapes: Standardizing button shapes to rounded rectangles for a modern and approachable look.
Sizes: Establishing uniform button sizes to create a balanced visual hierarchy.
Hover Effects: Implementing consistent hover effects to enhance interactivity and provide visual feedback to users.
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.
By standardizing button designs and implementing a cohesive style guide, I showcased my expertise in UI/UX design, enhancing both the usability and aesthetic consistency of the app.
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 best practices and 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. To rectify this, I defined a comprehensive grid system that included breakpoints for responsive design. This approach guaranteed a unified structure, allowing for a seamless and consistent experience regardless of the device used.
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 and bio resulted in a cluttered and unbalanced appearance. This lack of uniformity detracted from the overall user experience and visual harmony of the app. On the profile screen, the user's avatar and bio had inconsistent padding, leading to a cluttered appearance.
Action Taken:
To create a cleaner and more balanced layout, I applied a consistent padding of 16px around the avatar and bio elements. This adjustment ensured a more organized and visually appealing profile screen. By applying a consistent padding of 16px around these elements, I achieved a cleaner and more balanced layout. Standardizing margins, paddings, and spacing was crucial for visual consistency. I created layout templates for different screen sizes to ensure a uniform look. 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 screen, 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.The settings screen had a mix of filled and outline icons. 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.Icons were another significant area of inconsistency throughout the app. Different styles and sizes of icons disrupted the visual flow, making the app appear disjointed. By standardizing icons, I aimed to create a seamless and harmonious user experience. This involved:
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 current design trends and the need for a clean, modern interface. Some icons also needed to be redone from scratch in Adobe Illustrator due to inconsistency in the stroke size.
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. Key principles like rapid scalability and modularity were at the forefront of our strategy, ensuring that the design system could seamlessly evolve in tandem with the app's development. 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.
Solution: I held workshops and one-on-one sessions to explain the benefits and provide hands-on training, easing the transition.
Time Constraints:
Balancing the development of the design system with ongoing project work was demanding.
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 [Company Name]. 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.
Continuous Improvement:
A design system is a living document that needs to evolve with the product, requiring ongoing updates and refinements.
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.