Learn and organize finance.
UX/UI Design
Mobile
20 Weeks
Improve the desktop application and landing page interface to attract customers.
The CNPJ is a tool that allows companies to conduct detailed surveys through the CNPJ (National Register of Legal Entities), showing information such as cadastral situation, partners, and contacts. Both the app and landing page were active, but stakeholders wanted to implement improvements to increase customer conversion and promote the product as a solution for lead generation, customer prospecting, and secure business transactions.
Acting as UX/UI Designer, highlighting the points of improvement of the current application, elaborating CSD matrix to list the main existing doubts, current landing page flow to check the improvement points, competitive analysis, moodboard, wireframe and prototype
Documentation & Handoff
I learned the value of clear documentation and asset organization to support developers and improve handoff, avoiding delays and repeated questions.
UI Design Improvements
Testing on multiple devices revealed layout and responsiveness issues. I also learned to choose web-safe fonts to ensure consistency across browsers.
I started the project by mapping the entire application. During this mapping, I determined what the main purpose of the application was, what actions I wanted the user to take, and some metrics that would be interesting to follow. I created a flowchart of the old application to identify its critical points and analyzed each feature, highlighting all the points of improvement. Based on this, I developed a CSD matrix to document project-related concerns, including business, development, and UX issues
With all the points of improvement identified, I prepared a presentation to highlight the necessary improvements and justify the design decisions. In addition, I clarified all the doubts about the CSD matrix with the people in charge of each area. I presented this process to the responsible developer, discussing the feasibility of the proposed improvements and adjusting as necessary. Then I introduced it to the responsible coordinator, who validated the project for the next stage.
I conducted a competitive analysis focused on the visual part and developed a wireframe to test the new application flow, validating it with the project managers. I created the high-fidelity prototype for desktop and mobile using components from Blazor and Bootstrap 5, familiar to developers. In Figma, I edited images for the landing page and created mockups. Maintain continuous communication with developers to ensure the feasibility of design proposals.
After handing over the prototype to the developer, he had some doubts during development. I provided continuous support for it, helping clarify doubts and reviewing design progress. I requested adjustments in spacing, fonts, and icon size, among others, to ensure that the final result was as close as possible to the design created. We also tested on different devices to see the results (tablets, laptops, and computers) and adjust responsiveness accordingly.