Transforming Barclays' B2B Merchant Portal

Summary

Merchant Portal empowers merchants to manage daily deals, discount codes, vouchers, and cashback with ease. The platform’s dashboard offers actionable insights, sales and redemption figures, commissions, demographic breakdowns, and promotional ideas, all in one place.


As the front-end developer, I was tasked with refactoring the desktop website to provide a mobile-first, fully responsive experience. Using Ruby on Rails, HTML5, CSS3, SCSS, and JavaScript, and leveraging the Zurb Foundation framework, I optimised code quality, user experience, and performance. The project was delivered incrementally with no downtime and received high praise from senior management.

Process

My approach was methodical and research-driven:

• Audit & Research: Analysed the existing codebase, identified bottlenecks, and benchmarked leading e-commerce dashboards.
• Incremental Refactoring: Replaced desktop views one by one, ensuring each new component was responsive and thoroughly tested.
• Mobile-First with Zurb Foundation: Leveraged Foundation’s grid and components for rapid, device-agnostic development.
• SCSS & Modular CSS: Structured styles for scalability and maintainability.
• Performance Optimisation: Minified assets, lazy-loaded images, and reduced external requests for lightning-fast load times.

Best Practices

Throughout development, I adhered to industry best practices:

• Semantic HTML5: Ensured clean, accessible markup.
• SCSS Variables & Mixins: Promoted code reuse and facilitated easy theming.
• Component-Based Structure: Modularised the UI for improved maintainability.
• Continuous Integration: Automated tests and code reviews for every deployment.

Accessibility

Making the Merchant Portal usable for everyone was a priority:

• Keyboard Navigation: Ensured that all features were accessible without a mouse.
• ARIA Roles & Labels: Enhanced screen reader compatibility.
• Colour Contrast: Utilised accessible colour palettes for better readability.
• Responsive Typography: Adjusted text for all devices and user needs.

A/B Testing

To validate improvements, I conducted A/B tests:

• Button Placement: Examined call-to-action positions for optimal engagement.
• Form Simplification: Compared multi-step and single-step deal creation flows.
• Performance Metrics: Monitored conversion rates and user satisfaction.

Challenges

Transitioning from a desktop-centric platform to a seamless mobile-first experience necessitated careful planning. Key challenges included:

• Ensuring zero downtime during incremental view replacement
• Maintaining feature parity while refactoring legacy code
• Optimising performance and loading speed across all devices
• Balancing modern UI/UX with robust business logic

Learnings

This project reinforced several key lessons:

• Incremental delivery minimises risk: Small, tested releases ensure stability.
• Mobile-first is essential: Modern merchants expect seamless experiences on any device.
• Performance and accessibility go hand in hand: Fast, inclusive apps drive satisfaction and loyalty.
• Continuous feedback is invaluable: User and stakeholder input guides every decision.