Amrit Nagi

Project Overview

Wearing both the designer and front end developer hats, I took charge of a major project to modernise the frontend of our 20+ year old IP product, iPayview.

The goal was to create a sleek, accessible, and efficient user interface using the latest technologies.

Objectives

1. Modernise the Frontend: Move away from the old-school tech and embrace the new modern frameworks.

2. Ensure Accessibility: Make sure everyone can use our interface by meeting WCAG 2.1 AA standards.

3. Optimise Development: Use new tools and processes to make development faster and smoother.

4. Engage Stakeholders: Conduct user research across the business to make sure the new design meets their needs.

Key Activities

1. Defining the Approach:

- Decided on moving to a client side JavaScript framework supported with APIs for data interaction.

- I picked Vue.js as it has the easiest learning curve for the other .NET developers.

2. Prioritising Accessibility:

- Kept user-centric design at the forefront.

- Ensured compliance with WCAG 2.2 AA standards throughout the design and development process.

3. Optimising Development Environments:

- Introduced Vite as our new development environment to boost efficiency.

- Streamlined the release process to speed up time-to-market.

4. Component Design and Development:

- Led the design and development of Vue.js components using Tailwind CSS for styling.

- Conducted thorough unit testing with Vitest to ensure component reliability.

5. Creating a Design System:

- Developed a dedicated design system in Figma to standardise UI components and interactions.

- Set up a documentation site (using Vitepress) to support development and testing teams, ensuring consistency and ease of use.

6. Guidance and Mentorship:

- Provided expert guidance to the testing team on automated testing using Cypress and Vitest.

- Mentored 2 x IP students and was proud to see them pick up Vue so quickly and contribute to the project.

7. User Research and Stakeholder Engagement:

- Conducted user research with stakeholders across the business to gather insights.

- Incorporated stakeholder feedback from clients' accessibility groups into the design to ensure the new frontend met their needs and goals.

- Running sessions with clients to demo the product and discuss their branding requirements.

Outcomes

- Enhanced User Experience: The new frontend, built with Vue.js, provided a more dynamic, responsive, and user-friendly interface.

- Improved Accessibility: Achieved compliance with WCAG 2.1 AA standards, making the interface accessible to a wider range of users.

- Increased Development Efficiency The adoption of Vite and a comprehensive design system significantly boosted development efficiency and consistency.

- Stakeholder Satisfaction: By incorporating stakeholder feedback, we created a frontend that aligned with business needs and goals, resulting in higher satisfaction and user adoption rates.

- Team Development: The guidance and mentorship provided to the testing team and IP students fostered a culture of continuous learning and improvement within the development team.

Conclusion

Overall, the iPayview frontend modernisation project was a big win.

It showed how using modern tech, prioritising accessibility, and engaging with stakeholders can create a product that meets both business goals and user needs.

This project highlights my ability to lead complex projects, optimise development processes, and mentor team members, delivering a product that everyone is happy with.

Before and Afters

Dashboard