Website rebranding
Feature Focus
Dashboard
Redesigned website layout, typography, and color system
Redesigned website layout, typography, and color system
Ensuro is a blockchain-based, licensed (re)insurance company aiming to make insurance more accessible to the public, allowing anyone to invest in insurance risk and benefit from it.
After collaborating on a previous “add-a-feature” project, the team invited me back for a full rebranding effort. We focused on a complete visual redesign and reorganized the website’s content for improved clarity and consistency.
Ensuro is a blockchain-based, licensed (re)insurance company that aims to make insurance more accessible to the public, allowing anyone to invest in insurance risk and benefit from it.
My experience as an Ensuro user informed my design decisions
This solo project, part of my DesignLab bootcamp, involved designing and adding a new feature to the Ensuro website. I handled everything from identifying the problem to UX research, visual design, and prototyping.
Role
Role
UX/UI Designer responsible for optimizing the color palette, selecting typography, refining copy, and supporting the launch.
UX/UI Designer responsible for optimizing the color palette, selecting typography, refining copy, and supporting the launch.
Goal
Goal
Improve the user experience by restructuring the website’s content flow and refining the copy.
To improve the user experience by creating a dashboard for better investment tracking
Problem
Problem
Users had difficulty understanding the business model and navigating the website.
Users had difficulty understanding the business model and navigating the website.
Tool
Tool
Figma, Framer, Notion, Google Docs, Cloudflare
Figma, Framer, Notion, Google Docs, Cloudflare
Here's a quick look at the redesigned hero experience.
Prefer side-by-side comparisons? [Jump to Before & After ↘︎]
Here's a quick look at the redesigned hero experience.
Prefer side-by-side comparisons? [Jump to Before & After ↘︎]
Refined the overall brand voice
Refined the overall brand voice
Color palette
Color palette
To refresh Ensuro’s branding, I made subtle updates to the color palette to align with the tone the team envisioned: professional, trustworthy
and elegant.
Given that Ensuro has been in the market for about four years, a complete makeover wasn’t necessary. Instead, I slightly adjusted the colors, selecting a refined blue and orange that better reflect the team’s energy and the company’s character.
To refresh Ensuro’s branding, I made subtle updates to the color palette to align with the tone the team envisioned: professional, trustworthy
and elegant.
Given that Ensuro has been in the market for about four years, a complete makeover wasn’t necessary. Instead, I slightly adjusted the colors, selecting a refined blue and orange that better reflect the team’s energy and the company’s character.
Typography Update
Typography Update
The original font, Jost, appeared too playful for an insurance-oriented business and compromised readability, especially since the site contains a significant amount of longer-form content.
I replaced it with:
• Gilda Display for headlines and accents: introduces an elegant, refined touch as requested by the team.
• Inter for body text: clean, modern, and readable while still maintaining a youthful, startup-friendly vibe.
The original font, Jost, appeared too playful for an insurance-oriented business and compromised readability, especially they have quite a lot of longer-form content. I replaced it with:
• Inter for body text: clean, modern, and readable while still maintaining a youthful, startup-friendly vibe.
• Gilda Display for headlines and accents: introduces an elegant, refined touch as requested by the team.
The original font, Jost, appeared too playful for an insurance-oriented business and compromised readability, especially they have quite a lot of longer-form content.
I replaced it with:
• Inter for body text: clean, modern, and readable while still maintaining a youthful, startup-friendly vibe.
• Gilda Display for headlines and accents: introduces an elegant, refined touch as requested by the team.
1
1
Tackling Key Challenges
Tackling Key Challenges
Two Distinct Target Audiences
Two Distinct Target Audiences
The client considered creating two separate websites to serve their two main target audiences.
The client considered creating two separate websites to serve their two main target audiences.
I proposed using two prominent CTA buttons on the hero section to guide each audience segment from the start. Splitting into two sites could fragment traffic and confuse visitors about the company’s identity.
I proposed using two prominent CTA buttons on the hero section to guide each audience segment from the start. Splitting into two sites could fragment traffic and confuse visitors about the company’s identity.
Overly Wordy Content and Poor Navigation
Overly Wordy Content and Poor Navigation
Users shared feedback that the original site was too content-heavy, difficult to understand and find info, and hard to navigate due to complex structure.
Ensuro allows users to invest in individual pools, but once connected, there’s no centralized view of their portfolio. Users must manually click into each pool to see where their funds are allocated, which becomes frustrating—especially for those managing multiple investments or checking in occasionally.
I asked the team to compile all content into a shared document. I then distilled and restructured the copy, turning it into scannable, visual content blocks and motion design with clearer navigation.
I asked the team to compile all content into a shared document. I then distilled and restructured the copy, turning it into scannable, visual content blocks and motion design with clearer navigation.
2
2
2
Quick Reflection on the Process
Quick Reflection on the Process
After this project, I created a content guideline for the client to help them provide the initial content more effectively. This makes it clearer what content I might need and helps the company organize their internal resources more logically.
To understand Ensuro’s user experience, I interviewed three investors—Lulu, Mario, and Nicolas—and recorded their feedback to identify patterns in their needs and frustrations.
I organized their feedback into an affinity map, grouping insights into five categories: user habits, difficulties, tracking methods, suggestions, and current strengths.
Site map
Site map
A simplified and more intuitive sitemap was developed to align with the user journeys of both audience types.
A simplified and more intuitive sitemap was developed to align with the user journeys of both audience types.
Footer sitemap Before/ After
Footer sitemap Before/ After
Home page sitemap Before/ After
Home page sitemap Before/ After
Low-fidelity Wireframes
Low-fidelity Wireframes
I created low-fidelity wireframes to explore layout, structure, and early interaction patterns based on client-provided content. During this step, I also optimized the copy—cleaning up overlapping information, improving flow, and restructuring it to support clearer visual hierarchy and smoother storytelling.
I created low-fidelity wireframes to explore layout, structure, and early interaction patterns based on client-provided content. During this step, I also optimized the copy—cleaning up overlapping information, improving flow, and restructuring it to support clearer visual hierarchy and smoother storytelling.
Bringing the Website to Life
Bringing the Website to Life
Now we have the low-fidelity Wireframes in place, I proposed motion and animation possibilities for each section and page, helping the client visualize how the site could behave.
After aligning on the motion direction, we transitioned from Figma to Framer, where I directly implemented the animations based on our agreement.
Now we have the low-fidelity Wireframes in place, I proposed motion and animation possibilities for each section and page, helping the client visualize how the site could behave.
After aligning on the motion direction, we transitioned from Figma to Framer, where I directly implemented the animations based on our agreement.
Navigation of the new website structures
Navigation of the new website structures
Exploring Motion & Animation
Exploring Motion & Animation
To align the motion style with the brand tone, I gathered inspiration and presented different animation references to the team. This helped us identify a direction that feels cohesive and on-brand.
To align the motion style with the brand tone, I gathered inspiration and presented different animation references to the team. This helped us identify a direction that feels cohesive and on-brand.
Visual inspiration board
Visual inspiration board
Mid-Fidelity Prototypes
Mid-Fidelity Prototypes
I applied colors and added content provided by the client, while also building out the motion in Framer. Since most pages follow the same layout, we used the Companies page and one Service page to demonstrate how the design and motion would work.
I applied colors and added content provided by the client, while also building out the motion in Framer. Since most pages follow the same layout, we used the Companies page and one Service page to demonstrate how the design and motion would work.
1st Iteration - Key Updates
1st Iteration - Key Updates
1st Iteration - Key Updates
Increased the grain in the gradient background image for added texture
Improved typography contrast and style for better readability over the gradient
Made error messages below input fields more noticeable for accessibility
Switched the logo color to the version with the orange accent
Added glowing animation to the homepage CTA—starts automatically, then shifts to hover-to-shine interaction
Increased the grain in the gradient background image for added texture
Improved typography contrast and style for better readability over the gradient
Made error messages below input fields more noticeable for accessibility
Switched the logo color to the version with the orange accent
Added glowing animation to the homepage CTA—starts automatically, then shifts to hover-to-shine interaction
Before & After Comparison
Before & After Comparison
A side-by-side comparison of Ensuro’s original and redesigned pages, showing how I improved structure, clarity, and brand consistency across the product.
A side-by-side comparison of Ensuro’s original and redesigned pages, showing how I improved structure, clarity, and brand consistency across the product.
Final High-Fidelity Prototype
Final High-Fidelity Prototype
Built and animated in Framer to demonstrate real-time interaction and responsiveness.
Built and animated in Framer to demonstrate real-time interaction and responsiveness.
The New Home Page
The New Home Page
Navigation of the new website structures
Navigation of the new website structures
Impact and Reflection
Impact and Reflection
The redesign helped clarify Ensuro’s message and improved usability across both target audiences. Through this project, I strengthened my ability to distill complex content and translate it into elegant, user-centered design solutions.
The redesign helped clarify Ensuro’s message and improved usability across both target audiences. Through this project, I strengthened my ability to distill complex content and translate it into elegant, user-centered design solutions.