In the first phase, revamping the old designs of existing modules was straightforward. The client wanted something that could be designed and developed quickly. I created the new designs and prototyped them in Figma. After sending these prototypes to the client for feedback, I went through several iteration cycles based on their input. Once the designs were finalized, I began the development process.

In the second phase, we started by gathering requirements for the new modules. These requirements were translated into low-fidelity wireframes, which were then prototyped to get the client's feedback. After multiple iteration cycles, the wireframes were finalized, and we moved on to the design phase.

The client shared their vision for the overall look of the application, including some UI libraries for inspiration. They preferred developing custom UI components rather than using a pre-built UI library, which aligned with their specific needs. This approach also gave me a lot of creative freedom during the design process.

Once the designs were ready, I created prototypes and demoed them to the client. I continued to iterate based on their feedback until they were satisfied with the overall feel of the application. The client provided feedback directly on the Figma board, which streamlined the ideation and design process, making it faster and more efficient.

After finalizing the designs for the new modules, I began their development using Next.js and Tailwind CSS. I demoed the developed UI to the client for feedback and, after approval, handed it over to the functional development team.