discovering approach…
When we began building TIQS, a stock broker app by Trinkerr, our focus was squarely on rapid development and feature rollouts. But as time passed, a hidden adversary emerged—design debt.
Each page, product, and feature bore the fingerprints of different designers, created at different times, under different contexts. With no unifying design philosophy or principles, the app’s experience fragmented. TIQS began to feel like a collection of unrelated mini-apps rather than a cohesive product. This inconsistency didn’t just confuse users—it slowed us down.
Designing anything new became a tedious process. Without defined principles, debates over design decisions ate into valuable time, while the user experience suffered due to the lack of predictability and consistency.
It was clear: TIQS needed more than tweaks. It needed a design system—a north star to guide every design decision and align every pixel and interaction across the product.
Our Guiding Goals
Drive Consistency: Build uniformity across platforms and business lines for a seamless user experience.
Incorporate Modern Trends: Refresh the visual design with modern, delightful aesthetics.
These principles became the backbone of our design system, turning chaos into cohesion.
The Chicken-and-Egg Problem
The biggest question: What comes first—UI kit or interface?
Without a defined UI kit, designing the interface felt aimless.
Without knowing the interface’s needs, building a UI kit seemed impossible.
This classic dilemma led to countless debates over design preferences.
Navigating Constraints
A major challenge was balancing innovation with usability:
Preserve Familiarity: TIQS had a loyal user base of traders. A complete overhaul could disrupt their workflows and impact business transactions.
Blend Old and New: We needed a design language that felt fresh yet intuitive, ensuring minimal learning curve for existing users.
Discovering Atomic Design
Our turning point came through research into Brad Frost’s Atomic Design methodology:
Atoms to Systems: We learned to start small, focusing on building blocks (atoms) before assembling them into larger patterns (molecules, organisms).
Guided Evolution: This modular approach allowed us to iterate and refine, balancing creativity with consistency.
With these principles in hand, we found a way forward—transforming endless debates into actionable progress. Atomic Design became the foundation of our journey toward a robust and scalable TIQS design system.
As the design lead, juggling the creation of a Design System with ongoing UX work was a balancing act. Time was limited, but the need for scalability and modularity was pressing, especially with a tight MVP deadline looming.
Strategic Collaboration
To tackle this, I worked closely with the Head of Product and Front-End Engineers to define:
Short-Term Priorities: Focus on immediate needs for the MVP launch.
Long-Term Vision: Build a system flexible enough to adapt and grow with new use cases.
Guiding Principles
Rapid Scalability: Create components that could evolve without frequent redesigns.
Reusable Components: Prioritize elements that could be used across multiple features.
Templated Layouts: Develop structured layouts to streamline design and implementation.
This approach ensured the Design System wasn’t just a static library—it became a living, evolving tool that supported rapid development while maintaining consistency and quality.
One key consideration was designing with real data in mind. While lorem ipsum worked during low-fidelity wireframing, finalizing components and screens demanded more practical input.
Anticipating Edge Cases: Using real data allowed me to tackle potential challenges early:
Card Titles: What if they exceed one line?
Numbers: What happens with decimal values or extreme changes?
Tags: How do we handle cards with more than three tags?
Incorporating actual data helped identify these "what if" scenarios upfront. By addressing edge cases during design, I minimized unexpected roadblocks later in development, ensuring a smoother user experience and more robust components.
creating design system…
The first step was establishing the typography, color palette, and iconography—the backbone of the design system. I curated a few options and presented them to the leadership team, aligning with two core objectives:
Modern Yet Considerate Design
Vibrant Branding: Reflecting a modern, confident identity for the platform.
Empathetic Choices: Acknowledging the high-stress emotions of traders during win-loss extremes.
Voice of the Platform
The design language needed to communicate quick and easy, offering clarity without adding pressure. From the color palette to microcopy, every element was tailored to reassure and support users in emotionally charged moments.
This foundational approach ensured TIQS wasn’t just visually appealing but emotionally intuitive for its users.
Typography
Typography in fintech plays a critical role in creating trust, readability, and functionality. In a high-stakes environment like trading, the font face must balance clarity, professionalism, and emotional reassurance. For TIQS, choosing the right typeface was not just about aesthetics but also functionality and user behavior.
Key Considerations for Font Selection
Readability: Ensuring numbers, symbols, and text are legible at a glance, especially on dynamic dashboards with real-time data.
Trust & Professionalism: Fonts should convey reliability while aligning with the brand's modern, vibrant identity.
Scalability: The typeface had to perform well across platforms—mobile, desktop, and tablet.
Numerical Legibility: Clear differentiation between similar characters like 1, l, and I.
Flexibility: Worked seamlessly in small and large sizes, accommodating dashboards and microcopy alike.
Color Palette
Color in fintech is more than just aesthetics; it conveys trust, stability, and emotion while driving functionality and usability. For TIQS, the color palette needed to strike a balance between a modern, vibrant identity and the emotional nuances of a high-stress trading environment.
Key Considerations for Choosing a Color Palette
Brand Distinction: The palette had to be unique and memorable to set TIQS apart in a crowded market.
Functional Clarity: Actionable items (buy/sell, alerts) needed clear, distinguishable colors to minimize errors.
Exploration of Color Psychology: Focused on color psychology to understand how users perceive colors in financial decision-making.
Stress Tests for Functional Colors: Tested critical use-case scenarios, such as:
Red and green differentiation for gains/losses.
Legibility of text on different background colors in various light conditions.
Ensured colors didn’t cause confusion under low-contrast conditions or in dark mode.
Contrast and Accessibility Checks: Ran WCAG compliance tests to ensure contrast ratios were met.
Iconography
In fintech, iconography plays a pivotal role in simplifying complex workflows and guiding user actions. For TIQS, selecting the perfect icon pack required ensuring the icons were not only visually appealing but also functional, consistent, and universally understandable.
We moved forward with Phosphor Icons due to their large icon library and curviness of the icons overall suited our theme.
Key Considerations for Icon Selection
Clarity and Meaning: Icons needed to clearly represent their function, avoiding ambiguity in high-pressure scenarios like trading.
Consistency: Icons had to align with the overall design system, including typography and color palette.
Scalability: Icons had to work seamlessly across different sizes, from small buttons to larger dashboard elements.
Modern Aesthetics: Reflecting a professional yet approachable brand identity.
Accessibility: Ensuring icons were legible for all users, including those with visual impairments.
Process for Selecting the Right Icon Pack
Exploration and Shortlisting
Evaluated multiple icon packs, including Feather, Material Icons, Eva Icons and Phosphor Icons, and custom sets.
Focused on styles like outline, filled, and duotone to match the brand’s modern aesthetic.
Creating Mockups
Applied shortlisted icon packs to various use cases, such as:
Navigation menus.
Dashboard elements (e.g., transactions, charts, alerts).
Scalability Checks
Verified clarity at small sizes for mobile and larger scales for web platforms.
The next phase was creating a dynamic library of components, guided by Atomic Design principles. Starting small with atoms, we scaled to molecules and organisms, ensuring every piece could seamlessly fit into the bigger picture.
Collaboration with Developers
To streamline the process, we worked closely with the development team:
Mirrored Systems: The Design System was reflected in Storybook for consistency across design and code.
Shared Conventions: Naming conventions and component organization were optimized for both designers and developers.
This collaborative approach ensured a smooth handoff, making the Design System intuitive, scalable, and development-friendly.
fool proofing with Inclusivity…
Building the Design System from scratch provided the opportunity to prioritize accessibility as a core principle, not an afterthought.
Key Accessibility Considerations
Color Contrast: Ensured clarity across backgrounds and interaction states, diving deep into accessibility standards for disabled buttons.
Touch Targets: Optimized for mobile usability to enhance readability and interaction such as:
Min Height = 24px for icons/compact touches
Min height = 42px for text fields etc.
Text Labels with Icons: Added for better navigation clarity on mobile devices.
Consistency: Maintained uniformity across layouts and similar UI elements to simplify the experience.
While trade-offs were inevitable due to time constraints, embedding accessibility early set the stage for continuous improvement and established a shared commitment to inclusivity across the team.
A key philosophy I embraced was pragmatic creativity, inspired by the BBC’s Design System. While the system provided structure, some scenarios demanded flexibility and innovation.
Balancing Structure and Freedom
Breaking the Rules: For complex screens, I occasionally stepped outside the established guidelines to explore creative solutions.
Adding New Components: Introduced elements where necessary to address unique needs.
Re-evaluating Patterns: Refined existing designs to ensure the system evolved with the product.
This approach struck a balance between maintaining consistency and fostering creativity, allowing the Design System to remain dynamic and responsive to real-world challenges.
Hand-off : Work-ON
A successful Design System isn’t just about components—it’s about ensuring context and accessibility for its users. With a fully remote team and limited time for detailed discussions, I focused on providing clarity in ways that balanced efficiency and thoroughness.
Key Strategies for Contextual Communication
Providing Rationale: Discussed design decisions with the Leadership team to align on goals and principles.
Showcasing Behaviors: Delivered detailed handovers to developers, highlighting interactions and various states using Annotations/Prototypes.
Citing Research: Documented sources and considered alternatives for future designers and the Product team.
Asynchronous Communication
To minimize documentation fatigue and time consumption in small team while ensuring clarity:
Figma Notes: Added contextual explanations directly in design files.
Interactive Walkthroughs: Used video calls and visualizations for complex flows.
Component Links: Linked screens to component libraries, giving developers instant access to the source of truth.
This approach ensured that the Design System remained accessible, understandable, and actionable for everyone involved.
In just under three months, our team successfully redesigned the tool in time for the MVP launch. The Design System was instrumental in achieving this milestone by delivering:
Cohesive Branding: A unified look and feel for the rebranded product.
Clear Decision-Making: A structured framework to navigate conflicting requests efficiently.
Streamlined Workflow: Enabled rapid progress as a solo designer by providing reusable components and patterns.
Faster Time to Market: Gave developers a single source of truth, accelerating the design-to-development process.
The Design System didn’t just ensure a smooth launch—it laid the foundation for scalable and consistent growth moving forward.
✦