Smart Hub Dashboard User Interface (Web and Mobile)

After joining Wipro, I quickly became involved in developing the web and mobile dashboard interface for BT's Smart Hub using React. This project provided an excellent opportunity to showcase my skills and make an impactful contribution.

Previously, the client relied on a third-party provider for any changes to the user interface, which meant even simple tasks like changing a logo could take weeks to complete. The client wanted a more agile, innovative solution that would allow them to implement updates quickly. To address this, we developed a new UI that enabled over-the-air (OTA) updates to be deployed in a matter of days, not weeks, providing much faster turnaround and greater flexibility for future changes.

My primary focus was on designing and developing intuitive UI components to enhance the user experience when interacting with the Smart Hub. Key features I worked on included disk (extender) pairing, device and disk management graphs, port forwarding, device configuration, and even a speed test functionality.

However, my role wasn’t limited to UI development. I proactively improved the project's code base structure by implementing a clean architecture and utilizing the provider pattern with React Redux. This approach effectively separated the UI layer from the data layer, resulting in a more maintainable and reusable codebase. This structure also enabled us to use the same components across different variants of the web dashboard and the React Native app for the hub, improving usability across all platforms.

To ensure a robust and reliable product, I wrote comprehensive tests including unit tests, integration tests, and snapshot tests using Jest and React Testing Library (RTL), achieving 100% test coverage. This helped to identify and resolve potential issues early in the development process, ensuring the app's stability and functionality across multiple devices and environments.

As part of my commitment to delivering a high-quality user experience, I focused on improving the accessibility features for users with visual impairments. I implemented key accessibility improvements, ensuring the dashboard was fully usable for a broader audience. These efforts were recognized by both our management and scrum master, who complemented my work on enhancing accessibility before the user testing phase.

The Smart Hub dashboard interface, developed with React, not only provided users with an intuitive and powerful tool but also set a strong foundation for future development. By the time I transitioned to my next project, the improvements I made in both functionality and accessibility had left a lasting impact, and I received positive feedback for my contributions.