Back

Back

Investment SaaS

Project mission

Redesign the "Investment Funds Overview" area of the broadcast+ software, aiming to update the look and user experience of the product to increase the conversion rate.

Redesign the "Investment Funds View" area of the broadcast+ software, aiming to update the visual style and user experience of the product to increase the conversion rate.

Redesign the "Investment Funds View" area of the broadcast+ software, with the aim of updating the visual aspects and user experience of the product to increase the conversion rate.

Business requirements

Align the visual with the style guide already implemented in other projects for the same product and validate each deliverable with the client's UX team.

Align the initiatives and ideas of the project with all internal areas of the company, facilitating a more organized roadmap, following market trends, and aligning with the interests of the company.

Align the visual with the style guide already implemented in other projects for the same product and validate each deliverable with the client's UX area.

Tools

  • Miro

  • Figma

Time

  • 1 Product Designer

  • 2 Developers

  • 1 Product Owner

My papers

  • Product Designer

  • UX Researcher

Schedule

Schedule

Schedule

8 weeks:

  • Research and analysis: 1

  • Prototyping: 5

Planning and processes

The project went through 5 non-linear stages, so that the entire project reflected not only in a market-level experience but also in a competitive international product.

  • Research

  • Wireframing

  • Architecture validation

  • High-fidelity prototyping

  • Final validation

Research

I conducted a comprehensive analysis of the current product, aligning with the client on the features and information to keep or add, including chart and table widgets. Next, I performed a benchmarking of national and international platforms, highlighting strengths and weaknesses in product and usability, helping the product manager to better plan the product lifecycle and the phases of the project.

Immersion

to better understand the product and the market with the platform's product manager.

AS-IS Mapping

Mapping the journey and the features and information already existing on each screen.

Benchmarking

12 global references

3 national references

Wireframing as a technique for optimization and rapid validation

I followed a process of creating wireframes for each screen with the objective of quickly validating the structure of functionalities and content, greatly optimizing the progress of the project in the ideation and design phases.

High-fidelity prototyping

After each wireframing validation, I started building the screen, using the client's style guide as a basis, while also defining some important assets that we didn't have yet, such as font-style, color-style, and component standards. With each construction, I also validated with the development team to understand if there was technical feasibility for the proposed solutions.

PrimeNG

As a UI framework defined to facilitate front-end construction by developers

As a UI framework designed to facilitate front-end development by developers

As a UI framework designed to facilitate front-end development by developers.

Am-Charts

As a construction service for all the graphics, standardized visually by me.

AS-IS

Some screens from the old experience

Final validation

The final validation was done by the client's product manager, who congratulated me for being able to reflect exactly what he envisioned in a clean and clear way.

Conclusion

28 Screens produced

considering all the scenarios, flows, and features defined as MVP in the workshop.

Dark & Light mode

Feitos em papel e caneta para organizar as informações e funcionalidades de cada tela.

Reintroduction

This project was a stepping stone for the competitive reintroduction of the product into the market.

Some project screens deliveries...

Back to top

Back to top