-
Revitalised Customer Application, Driving Increased User Engagement and Reducing Support Costs
-
Context: As a sole Frontend Engineer, I took ownership of redesigning the solution for a business-critical customer-facing application plagued with user experience and technical debt issues. This involved a full lifecycle approach: identifying core problems through user feedback and technical analysis, presenting a comprehensive solution to stakeholders (including Head of Department), documenting the proposed migration strategy, building a Proof of Concept to validate the approach, and leading the delivery of the revitalized application.
-
Problems:
- Convoluted user journeys: Resulted in high user drop-off rates in critical flows (e.g., application onboarding, financial data retrieval), estimated at 15% based on user analytics. This negatively impacted user acquisition and engagement.
- Features not working as users expected: Led to significant user frustration and a surge in support tickets related to feature malfunctions, increasing support ticket volume by approximately 20% month-over-month. This strained customer service and engineering resources and negatively impacted customer satisfaction.
- Incorrect data displayed to users: Eroded user trust in the application, driving users to seek manual data verification from customer service and finance departments. This created significant inefficiencies, _requiring an estimated 10-15 hours per week from finance and customer service teams for manual data reconciliation. This also had an impact on engineering resources as engineers had to help with data retrieval from a database, which should not be a case.
- Security issues: Application was not built with security in mind. Customer’s finance data was held in a local storage upon retrieval which could mean a massive security breach (raw passwords were stored, customer finance information was stored, none of that was encrypted. That means, if somomeone would get access to any of that, they could technically get access to the account and potentially withdraw money or even have access to customer’s bank account details from other banks)
- Outdated Vue v2 framework and technology stack misalignment: It limited the available talent pool for hiring, making it challenging to find engineers willing to maintain the application and potentially increasing recruitment costs by an estimated 10-15% per hire for specialized Vue developers. This also risked slowing down future development and innovation.
- Inconsistent application of design system: Resulted in a fragmented and unprofessional user experience, negatively impacting brand perception and user confidence in the platform’s reliability.
- Lack of proper error handling: Frustrated users and further increased support inquiries, as users lacked the information to self-resolve issues. This compounded the burden on customer support and prolonged user frustration.
-
Approach:
- Strategic Migration to Modern React Stack: Instead of patching the problematic Vue application, I strategically championed a full migration to React, aligning with the company’s long-term technology strategy and frontend architectural vision. This future-proofed the application and ensured maintainability.
- Microfrontend Architecture for Incremental Migration: To avoid disrupting ongoing feature development and given the team’s familiarity with React, I implemented a microfrontend architecture. This enabled incremental migration, feature by feature, allowing us to deliver value continuously while rewriting the application in the background.
- User Journey Optimization Integrated into Migration: We “killed two birds with one stone” by not just migrating code, but concurrently redesigning and streamlining user flows during the migration process. This ensured the revitalized application addressed both technical debt and user experience issues in a single, efficient effort.
- Efficient Execution within 6 Months: Leveraging a lean team of predominantly backend engineers, I effectively managed and delivered the migration project within a 8-month timeframe. This involved re-designing broken flows and implementation
-
Outcome:
- Streamlined User Experience and Improved Efficiency: Redesigned user flows led to a 25% reduction in average user journey completion time and a 10% increase in conversion rates for key application flows (e.g., onboarding, data retrieval), indicating a significantly more efficient and user-friendly experience.
- Increased User Engagement and Confidence: Application user visits x10 within the first quarter post-migration, demonstrating improved user confidence and the perceived value of the revitalized application. Bounce rates on key pages also decreased by 80%, suggesting users were finding the application more engaging and relevant.
- Reduced Support Burden and Improved Customer Satisfaction: The number of support tickets related to application malfunctions decreased by 50% in the three months following the migration. While direct CSAT scores for the application are being tracked, early indicators suggest a positive trend based on qualitative user feedback gathered post-release.
- Enhanced Maintainability and Expanded Talent Pool: Migration to React empowered a broader range of engineers to contribute, evidenced by a 30% increase in code contributions fom more backend-leaning developers post-migration. This proactively addressed maintainability concerns, reduced reliance on a niche skillset, and mitigated future hiring risks associated with the outdated technology, contributing to long-term cost savings and development agility.
-
-
**I have initiated the development and implementation of a company-wide design system, accelerating feature delivery, enhancing brand consistency and streamlining design-to-development workflow
- Context: Recognizing that the absence of a design system was hindering feature delivery speed, creating brand inconsistencies, and increasing development friction within Pfida, I proactively identified this critical need. Two existing applications were utilizing disparate component libraries, leading to visual and functional inconsistencies. To address this, I championed the creation of a unified design system to serve as a single source of truth for both design and code, aiming to streamline feature development and enhance brand coherence.
- Problems:
- Inconsistent User Experience and Brand Dilution: Lack of a unified design system resulted in visual inconsistencies across applications and even within the same application. Features looked and behaved slightly differently, leading to a fragmented user experience potentially diluting brand identity and creating user confusion. Furthermore, redundant styling efforts across teams increased development time by an estimated 10-15% due to duplicated work and rework.
- Slowed Feature Delivery and Tech Debt Accumulation: Inconsistent styling and a lack of reusable components significantly slowed down feature delivery cycles by an estimated 20%. This also contributed to the accumulation of unnecessary technical debt, projected to require approximately 5-10% of future development time for refactoring and maintenance if not addressed.
- Inefficient Design Workflow and Limited Designer Productivity: The absence of a systemized approach placed a heavy burden on the designer to manually ensure consistency. This reduced design efficiency by an estimated 15%, diverting time from creative exploration and strategic design work towards repetitive consistency checks.
- Risk of Disjointed User Experience due to Business Pressures: Business pressures to accelerate feature delivery by bypassing design risked creating a disjointed and unprofessional user experience long-term, potentially damaging brand perception and increasing future redesign costs by an estimated 20-30% for a complete visual overhaul if inconsistencies became too pronounced.
- Approach:
- Proactively Led Design System Initiative: Proactively led this crucial project, advocating for its business value and securing stakeholder buy-in for a company-wide design system.
- Strategic Collaboration with Design Team: Effectively collaborated with the Senior UX/UI Designer, jointly defining design system principles, component specifications, and token standards, ensuring a cohesive and user-centered approach.
- Strategic Technology Choices for Efficiency and Maintainability: Strategically selected Tailwind CSS and Radix UI, recognizing Tailwind’s token system for consistent styling and theming and Radix UI’s focus on accessible and well-engineered UI primitives. This modern technology stack also positioned the company favorably for talent acquisition, potentially reducing recruitment time for frontend developers by an estimated 5-10%.
- Design-Development Alignment through Tokenization: Implemented a token-based system for design and development, ensuring seamless communication and translation of designs into code. This reduced frontend development time by an estimated 10-15% by eliminating guesswork and promoting consistent implementation. Essentually, exactly the same tokens were used for everything in figma just like in tailwind.
- Separation of styling from implementation: I made a decision to separate styling from framework implementation by using recipes (functions that have a styling logic). This futureproofs the design system and makes it less dependent on a framework if company will decide to migrate to different frontend framework in a future, or will want to implement microfrontends in a future, and those teams will want to use different frameworks.
- Iterative and Incremental Implementation for Minimal Disruption: Adopted an iterative approach, prioritizing core components and incrementally adding new ones based on project needs. This allowed us to maintain development velocity on other features, minimizing disruption and ensuring continuous feature delivery while building the design system foundation.
- Storybook for Component Library and Quality Assurance: Leveraged Storybook as the central part of component library and documentation hub, implementing visual regression testing through Chromatic. This reduced component regression issues by approximately 20% and decreased time spent on manual regression testing by an estimated 10 hours per sprint, increasing team confidence and development velocity. It also allowed us to have less technical people to take part in reviews.
- Outcome:
- Accelerated Feature Delivery and Design-to-Development Workflow: Implementation of the design system reduced design-to-implementation time by an estimated average of 20%, based on post-implementation project timelines. Feature delivery velocity increased by approximately 15%, as measured by the average number of features released per quarter.
- Improved Developer Satisfaction and Frontend Efficiency: Developer satisfaction with frontend development tooling improved by approximately 25%, based on internal feedback surveys. The design system empowered full-stack developers (with backend focus) to contribute more effectively to the frontend, leading to an estimated 10% increase in frontend contributions from traditionally backend-focused team members.
- Enhanced Brand Consistency and User Experience: The design system ensured visual consistency across all applications, strengthening brand identity and creating a more cohesive user experience. User testing conducted post-implementation showed an estimated 15% improvement in user perception of the application’s professionalism and ease of use.
- Reduced Regression Issues and Increased Development Confidence: Automated visual regression testing in Storybook reduced component regression issues by approximately 20%, significantly increasing team confidence in making frontend changes and minimizing bug-related rework.
- Company-Wide Adoption and Scalability: The design system was successfully adopted across all 3 major company applications within 9 months of initial implementation, ensuring consistent user experiences and streamlined development practices across the entire product suite and laying the foundation for multi-tenant and white-label application development.
-
Multitenancy Implementation
- Context: Business needed to offer Pfida’s services to other banks (white-label Islamic mortgages) for new revenue streams. Needed frontend multitenancy and theming solution quickly. Worked with Head of Tech and Architect (backend focus).
- Problem: System not built for multitenancy. Needed rapid MVP (3 weeks) for business opportunity.
- Solution (Frontend Focused):
- Tenant ID for feature hiding.
- Dynamic asset loading (themes, logos) from remote storage during build based on tenant ID.
- Separate deployments per tenant (different buckets/CloudFront) using same codebase but different builds. This was achieved with Terraform
- Outcome:
- MVP in 3 weeks enabled white-labeling, onboarding new bank customers, and generating new revenue streams.
- Frontend solution still in use and planned for future expansion (customer portal).
-
Bullet: Drove Agile feature delivery through End-to-End Ownership. Designed, developed and deployed features from concept to launch, collaborating with stakeholders to understand requirements.
-
Bullet: As a sole Frontend Engineer, I proactively taken full ownership of all frontend technology decisions from the stack to establishing comprehensive architectural documentation and best practices which enabled faster onboarding and ensured maintainability and knowledge sharing.
-
Bullet: Mentored two junior developers, focusing on guiding their technical skill development, providing targeted learning resources and offering constructive feedback to facilitate continuous improvement and help them grow within the team.
-
Bullet: Led proactive company-wide design system implementation, collaborating with design on principles & components and leveraging Tailwind CSS, Radix UI, tokenisation, Storybook and Chromatic to achieve key gains: faster feature delivery, enhanced brand consistency, and reduced regression issues.
-
Bullet: Identified critical issues in customer-facing application, including critical security valnerabilities, UX issues causing 30% drop-off rates and technical debt in outdated Vue.js codebase. Designed and implemented strategic migration to React using microfrontends, enabling incremental feature migration while concurrently redesigning user flows. Resulted in 80% lower bounce rates, 50% fewer support tickets and 10x user visits.
-
Bullet: Engineered a frontend multi-tenancy solution enabling white-labeling, feature configuration, and dynamic theming, allowing the business to offer its services to partner banks and unlock a significant new revenue stream within a tight timeframe. This solution remains in use and is planned for future expansion.
-
Bullet: Implemented Backend-for-frontend (BFF) pattern with tailored services to decouple microservices from frontend codebases, streamline frontend development, and enhance performance. This initiative simplified type generation, reduced over-fetching and shifted business logic to the backend, resulting in faster feature delivery and company wide standardisation.
-
Bullet: Streamlined frontend PR reviews and enhanced feature quality by introducing ephemeral environments that eliminated technical barriers to review, enabling active participation from non-technical stakeholders which resulted in higher quality features and more efficient review process.
-
Bullet: Improved frontend-backend collaboration and development autonomy through contract-driven development, which allowed both teams to work independently, and frontend engineers to auto-generate mock APIs (MSW), TanStack Query hooks, and Zod schemas from OpenAPI specifications, which streamlined parallel development and enabled isolated frontend testing.
-
Bullet: Contributed to admin platform development, replacing inefficient CTO-managed Python data update scripts and enabling self-service for non-technical internal stakeholders. This reduced dependency on CTO and enabled strategic focus.
-
Bullet: Introduces practice of running blameless post-mortensafter incidents, as a learning practices and source of documentation.
-
Bullet: Reduced team overload by intorducing practice of rolling triage role to manage incoming support tickets. Previously this was done by one team member