Building Design System with AI Integration
INDUSTRY
Affiliate marketing
Contributions
UX/UI Design
Design System
Duration
9 months
Release
2024
📋 Task
Design and implement a comprehensive Design System for AWIN, addressing inconsistencies across the platform and enhancing accessibility to meet AA WCAG standards as per the project requirements. However, I aimed to exceed this standard by pushing for AAA compliance wherever feasible.
📌 Challenges
Inconsistencies Across Pages
Addressing significant variations in UI patterns and styles across the platform, which caused confusion for users and inefficiencies for developers.
Meeting AA WCAG Standards While Aiming for AAA
While the project required achieving AA compliance, my goal was to push further toward AAA standards, necessitating additional refinements and extensive accessibility testing.
Atomic Design Advocacy
Educating cross-functional teams about Atomic Design principles and demonstrating how this methodology could streamline workflows and improve consistency.
Developer Collaboration
Bridging the gap between design and development teams, introducing Agile methodologies, and ensuring the design-to-code handoff was smooth and accurate.
AI Integration
Redesigning the dashboard from scratch to incorporate AI-driven features, ensuring the new functionalities were intuitive, aligned with user needs, and seamlessly integrated into the platform.
✅ Solutions
Comprehensive Design System
Designed and built a modular, reusable component library from the ground up, based on Atomic Design principles, to address inconsistencies and streamline development.
Accessibility Refinements
Delivered components meeting AA WCAG standards as required, with additional refinements aimed at achieving AAA compliance, including enhanced navigation and optimized screen reader support.
Team Education and Advocacy
Held workshops and led numerous meetings to advocate for Atomic Design principles, ensuring both design and development teams understood and embraced the approach.
Seamless Collaboration with Developers
Established workflows and feedback loops with developers, aligning efforts through Agile practices to ensure accurate implementation of components.
AI-Driven Dashboard Redesign
Created a new dashboard design using the newly developed Design System, integrating AI features like personalized benchmarks, data visualizations, and interactive prompts tailored to user needs.
Iterative Process
Adopted a continuous feedback loop with stakeholders and users, iterating on designs to refine and enhance the platform over time.
👨🏻💻 Contributions
Designed and built AWIN’s Design System from scratch
Established Atomic Design principles for scalability
Created reusable components with states, variations, and modifiers
Documented components with anatomy, guidelines, and best practices
Ensured accessibility compliance with WCAG AA standards
Pushed for AAA accessibility refinements
Conducted workshops to advocate for Atomic Design
Held regular meetings to align teams on Agile and Design System workflows
Collaborated closely with developers for seamless implementation
Designed and launched an AI-driven dashboard redesign
Integrated AI functionalities into the platform for personalized benchmarks
Facilitated design-to-code handoff using detailed specs
Developed and iterated prototypes for testing and validation
Conducted user research to guide design decisions
Created design tokens for colors, typography, and spacing
Established a feedback loop for continuous improvement
Delivered training sessions to onboard teams to the Design System
Set up a maintenance framework for evolving the Design System
📑 Existing Component Management
Reviewed and approved components created by other designers for the current platform.
Provided detailed feedback to ensure alignment with existing design standards.
Maintained consistency and quality across the platform while designing new components for the Design System.
Balanced immediate project needs with the long-term goals of the new Design System.
9
months
65
components
Process
Amplify Your Reach, Boost Your Revenue
AWIN is a leading global affiliate marketing platform that connects brands with high-impact publishers to drive growth and boost revenue. By leveraging data-driven insights and strategic partnerships, AWIN helps businesses expand their reach and engage target audiences through performance-based marketing.
Personas
In this project, I designed two key personas: Advertiser and Publisher, tailored to address their distinct needs and objectives.
Sophie Müller
Sophie manages affiliate campaigns for an e-commerce brand using AWIN to track sales, monitor performance, and optimize budget. She needs a reliable platform to measure ROI and share results with stakeholders.
Age
25
Ocupation
Digital Marketing Manager
Industry
e-Commerce
Frustrations
Navigating through inconsistent design elements to find critical metrics.
Difficulty identifying actionable insights from data due to a lack of intuitive visualizations.
Spending too much time exporting and formatting data for stakeholders.
Limited options for automating repetitive tasks, such as generating affiliate reports.
Goals
Track affiliate performance metrics in real-time to ensure campaigns are on target.
Use AI-driven benchmarks to identify top-performing affiliates and optimize underperforming ones.
Create detailed and customizable reports for internal stakeholders.
Simplify campaign management and reduce the time spent on administrative tasks.
Alex Carter
Alex partners with multiple brands as an affiliate marketer and relies on AWIN to track commissions, monitor clicks and conversions, and optimize their affiliate strategies. They want an
easy-to-use platform to help them focus on creating content while maximizing their earnings.
Age
25
Ocupation
Content Creator and
Affiliate Marketer
Industry
Blogging and
Influencer Marketing
Frustrations
Difficulty understanding performance insights due to unclear data presentation.
Navigating between inconsistent interface elements while managing affiliate links.
Lack of personalized recommendations to identify growth opportunities.
Unclear payment processes, making it hard to track earnings and payouts.
Goals
Access clear and concise performance metrics, including commissions and
conversion rates.
Use AI-driven prompts to discover new affiliate opportunities and optimize existing campaigns.
Easily navigate payment schedules and understand earnings breakdowns.
Reduce time spent managing affiliate links and focus more on content creation.
UX Laws & Principles used
Hick’s Law
Limited options on key pages to simplify decision-making and streamline user interactions.
Fitt’s Law
Elements are large enough and conveniently placed, reducing the distance to the target.
White spacing
The white space can significantly enhance its usability and aesthetic appeal and let the user focus on a particular action.
Miller’s Law
Organized content into smaller chunks to make complex information easier to process.
Consistency
Design System was used for consistency across all pages for familiarity and ease to use.
Hierarchy
Font size, color, and spacing are carefully chosen to indicate the importance and draw the user’s attention to key elements.
Accessibility
Color contrast, keyboard navigation, clear and concise language, text size and best practices.
Feedback
I provided clear and immediate visual feedback to the user action, such as a confirmation message or an interactive state.
Error prevention
I used confirmation prompts alongside password confirmation for significant actions (e.g. deleting a card).
Months
Months
Months
Months
Screen Flow Mapping
Created a detailed screen flow of AWIN’s platform, capturing all pages to understand the scope of the project and identify patterns or inconsistencies.
Component Assessment
Mapped all components across the platform’s pages.
Analyzed component usage frequency to prioritize and optimize efforts.
Created a leaderboard to identify key pages with the highest component density and determined which components needed redesign or standardization.
Jakob’s Heuristics Evaluation
Evaluated key pages against Jakob’s Heuristics principles, noting usability shortcomings and documenting areas for improvement.
Behavioral Analysis
Used data from Hotjar, Amplitude, and Google Analytics to analyze user behaviors, discover drop-off points, and identify high-priority user flows.
Focused on patterns and behaviors to understand user pain points and preferences.
Accessibility Benchmarking
Measured accessibility using Lighthouse to document baseline scores for comparison post-redesign.
Competitor Research
Researched competitor platforms and industry standards to gather inspiration and identify effective patterns for UI/UX design.
Research and Analysis
Design System Strategy
Spacing
Atoms
Documentation
📚 Lessons Learned
Iterative Design is Essential
Building the Design System iteratively allowed for continuous improvement and ensured alignment with both user needs and technical constraints.
Collaboration Drives Success
Close communication with developers and stakeholders was key to ensuring the Design System was implemented accurately and met business goals.
Education is Crucial
Educating teams on Atomic Design principles and accessibility standards fostered a shared understanding and smoother adoption of the system.
Accessibility Should be Proactive
Integrating accessibility considerations from the start streamlined compliance and resulted in a more inclusive design process.
Data Guides Decisions
Using analytics tools like Hotjar and Amplitude helped prioritize features and refine designs based on actual user behavior.
Consistency Simplifies Scaling
A unified design language reduced redundancies, improved efficiency, and made scaling the platform more manageable.
Feedback Loops are Vital
Regular feedback sessions ensured that components and features evolved to meet user needs and technical requirements.
Focus on Scalability
Designing with scalability in mind saved time and effort when adding new components or adapting existing ones for future use.
User-Centric Design Wins
A unified design language reduced redundancies, improved efficiency, and made scaling the platform more manageable.
Patience and Perseverance Pay Off
Advocating for new methodologies like Atomic Design required persistence but resulted in a significant cultural shift and long-term benefits.
Other case studies
BCR
Empower Your Financial Future
Pazanga
Full service marketing and PR for healthcare and life sciens.
Tamoil
Empowering fleet management with flexible budgets
BCR
Empower Your Financial Future
