The problem: The account detail section of BancaNet was plagued by an outdated appearance, unaddressed accessibility concerns, and the burden of huge maintenance efforts due to the lack of standardization and consistency.
How we solved the problem
We tackled these issues head-on by developing a comprehensive Design System. This not only allowed us to modernize the interface but also empowered us to provide reusable web components, ultimately reducing development time.
Our main challenges
- Complexity with Tables: Designing responsive tables that display financial data clearly and intuitively.
- Old Back-end Code Constraints: Navigating and integrating with legacy systems.
- Responsive Design: Ensuring seamless user experience across various devices and screen sizes.
How we overcame challenges
- Table-Specific Library: We created a specialized library catering to complex table structures.
- Incremental Development: By meticulously planning development phases, we mitigated issues arising from legacy code.
- Comprehensive Documentation: Aided by thorough documentation and interactive demonstrations, we ensured smooth development and testing.
The process
- Component Audit and Inventory: We initiated with a comprehensive analysis of existing components, streamlining duplicates, and identifying candidates for consolidation.
- Status and Visual Capture: Annotated with status notes and visual captures, we created an in-depth overview of the existing system.
- Roadmap Alignment: We aligned component design and development with the existing roadmap, prioritizing components based on planned releases.
- Inspiration and Research: Utilizing mood boards and research into industry best practices, we crafted designs that balanced aesthetics and usability.
- User-Centered Decision Making: For intricate components with multiple design solutions, usability testing guided our choices, grounding decisions in user preferences.
- Close Developer Collaboration: Regular interactions with the development team ensured that the design concepts were technically viable.
- Comprehensive Documentation: Via Zeplin and PDFs, we furnished development with essential resources like tokens, spacing guides, and color codes. Functional walkthroughs provided real-time assistance.
Results
- Development time reduced to a remarkable 19% of its former duration.
- Customer satisfaction saw a notable 6% increase.
- All new projects integrated accessibility features from the outset, supported by the foundational principles of the Design System.
- The endeavor initiated a broader commitment to accessibility advocacy, enhancing the Design System's capabilities over time.
This case study showcases our strategic approach to solving complex UX and design challenges while fostering collaboration between design and development teams, resulting in tangible improvements in efficiency, user experience, and accessibility.