top of page

Insurance Website

This project was mainly about a design for a website for insurance products.

I had the opportunity of contributing to the design of this new website at two different moments, first as a consultant and after actively assuming as an official designer in the project.

Where it all started

The client involved in this project was served by the IT company where I worked. We had a variety of squads that used the help of a designer (me) and had the involvement of front and backends developers.


However, this project started with a different company that had a more "appealing" proposition of service to the client, and then my company began as only responsible for the backend development.

My first contribution

The PO of this project started to have some issues and complaints about the service given by the other company. They were not keeping with what they promised, they were behind on deadlines and they were not able to deliver technically what they were supposed to be experts in.

Considering that, the PO believed that was best to analyze the interface part as well. I was asked to audit what they had delivered in Figma so far.

analise heuristica.PNG

Visually speaking the layout was pleasant, but it had some serious accessibility issues of contrast. There was a page where the product colour was yellow and we had white text over yellow background.

I also made an analysis based on heuristics and suggested some flow modifications that would probably implicate frustration for the user when purchasing the product.

The second round

Half year later, the matter of this project returned to be discussed with my company. The website was overdue for more than three months it should be out to the public. As a result, the client's marketing team designed an alternative temporary page to supply the selling of the products.

Despite the best efforts of the marketing team, the PO was not very pleased with the user experience and the response the business was getting from their approach. The temporary page did not allow the user to know if they already had purchased nor if they are applicable to purchase a product. The user would only have feedback regarding this a couple of days later after their submission was manually analyzed.

Considering all that and worried about the sales they were missing, the client agreed with my company for us to propose an MVP that would automatize the purchase process and reduce user frustration. We were given four sprints (one month) to have the design and development part ready.

Working with a very restricted time

When I was involved in the project again, for my part as a designer I had only 24h hours to propose enhancements and a new interface. In addition to that, we were having a rebranding process by the client taking place, then all the previous products had their logos changed and I had to include that in my plans.

Another point is that, when they promised the four sprint deadline, the developer team was expecting to use some similar flow that we had from another product website of the same client.

Based on all these facts, my first actions were: 

  • Revisiting the "old design project" from the other company;

  • Checking the implications of using the new brand book guidelines and analyzing the flow from the other website and

  • Analyzing if there was any room left to possibly make the user experience better.

Understanding the best approach

The products that would be offered on the page were insurance products that we could purchase associated with an existing credit card from one of the partners of our client. Considering that, I analyzed the page that was online versus what other Brazilian insurance companies have on their website. I know that the idea is that we could have an MVP, but I like the idea of not closing doors for future opportunities for expansion.

The MVP could stop as only a remedial project but there was also an opportunity that liking our job the client would vouch for us to proceed to work scaling the project afterwards.

benchmarking seguros.png

From the benchmarking, I got some insights into which were the most used patterns. Also, it helped me a lot in better visualizing a sitemap.

Proposing a new flow

Having a sitemap, it was time to discuss some points about the existing flow they were planning to use as a base for the new website. There were some enhancements points that would be nice to have for our MVP but it would not work out for our deadline. Considering this, I pointed out some important matters that would be really nice to be addressed and would make a relevant difference in the user experience while navigating the flow.

In the old flow, they were thinking of basing the new website in, when the user entered after login they would still see all the insurance products even if they were logged in with their credit card account and some had some product restrictions. The user would proceed with the flow and only have the feedback that the product was unavailable for their card at the end of the process.

For the new flow, I suggested implementing a better filter to show the users what products they would have free access to or not with the selected card. The new flow would not make the product disappear but would indicate that the product was locked for that card and a way for the user to purchase that insurance.

In the new flow, we also give free access to users with no cards to see the products. This was a suggestion I gave based that this could also contribute to new users purchasing not only an insurance product but also a new credit card from the client.

insurance flow.PNG
The new interface for MVP

As we had changes in the flow, some scenarios were added. For the interface, we also considered the time for the developer to make that real.

I opted to go for something similar in structure to what the old project had, this way the difficulty of development would be lower and also it had a structure that had been previously approved by the client team. We left some spots for banners for the marketing to apply their banner through this backoffice app and followed the new Brandbook with the new visual identity.

Unfortunately, due to some restrictions imposed by the marketing team, I could not adapt some colours of products, that way some basic accessible contrast standards could not be met. However, I did my best to present all the logos and info in the best way, including considering future products that could be added to the website.

Final Thoughts

As mentioned before, the first idea of this project was to have an MVP that could solve more urgent problems with the insurance product sales of our client. However, I´m sure if they decide to continue to invest in this website, there would be plenty of points that we could give a second look at. A very important one would be trying to persuade the client´s marketing team again to rethink some use of colours for better accessibility. Also, a good page to be added would be a blog section, these could be used by the marketing team to post content to nurture potential buyers.

bottom of page