Website rebranding
Feature Focus
Dashboard
Redesigned website layout, typography, and color system
Redesigned website layout, typography, and color system
New Home page
New Home page
New Home page
More side-by-side comparisons? [Jump to Before & After ↘︎]
New Home page
More side-by-side comparisons? [Jump to Before & After ↘︎]
After collaborating on a previous [User portfolio dashboard] project, the team brought me back for a complete rebrand.consistency.
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.
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
UX/UI Designer
Goal
Goal
Redesign the visual identity and restructure content for better clarity and navigation
To improve the user experience by creating a dashboard for better investment tracking
Problem
Problem
Confusing business model and poor site navigation
Confusing business model and poor site navigation
Tool
Tool
Figma, Framer, Notion, Google Docs, Cloudflare
Figma, Framer, Notion, Google Docs, Cloudflare
Refined the overall brand voice
Refined the overall brand voice
Color palette
Color palette
Given Ensuro's market presence, a complete makeover wasn't needed.
I adjusted the existing colors, refining the blue and orange to better reflect the brand's character.
Given Ensuro's market presence, a complete makeover wasn't needed.
I adjusted the existing colors, refining the blue and orange to better reflect the brand's character.
Typography Update
Typography Update
The original font, Jost, appeared too playful for an insurance business and compromised readability for longer content.
I replaced it with:
• Gilda Display for headlines: elegant and refined
• Inter for body text: clean, modern, and readable
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
Challenges & Solutions
Challenges & Solutions
Two Distinct Target Audiences
Two Distinct Target Audiences
We decided to use two prominent CTA buttons on the hero section to guide each audience segment, rather than splitting into two separate sites.
We decided to use two prominent CTA buttons on the hero section to guide each audience segment, rather than splitting into two separate sites.
Content-Heavy and Poor Navigation
Content-Heavy and Poor Navigation
I restructured the lengthy copy into scannable visual content blocks with motion design and clearer navigation.
I restructured the lengthy copy into scannable visual content blocks with motion design and clearer navigation.
2
2
2
Site map
Site map
I streamlined the site structure by merging redundant pages, eliminating unnecessary sections, and reorganizing content into logical categories for clearer navigation.
I streamlined the site structure by merging redundant pages, eliminating unnecessary sections, and reorganizing content into logical categories for clearer navigation.
Before: All links listed in a single flat navigation with no clear grouping.
After: Organized into four logical categories—Company, Product & Resources, Legal, and Contact & Social.
Before: All links listed in a single flat navigation with no clear grouping.
After: Organized into four logical categories—Company, Product & Resources, Legal, and Contact & Social.
Before: Single generic entry point with all content mixed together.
After: Two distinct CTA buttons guide investors and companies to tailored content paths, with homepage modules reorganized by priority and audience needs.
Before: Single generic entry point with all content mixed together.
After: Two distinct CTA buttons guide investors and companies to tailored content paths, with homepage modules reorganized by priority and audience needs.
Low-fidelity Wireframes
Low-fidelity Wireframes
After optimizing the copy for clearer hierarchy and smoother storytelling, I explored layout, structure, and interaction patterns through low-fidelity wireframes.
After optimizing the copy for clearer hierarchy and smoother storytelling, I explored layout, structure, and interaction patterns through low-fidelity wireframes.
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
Motion Design & Implementation
Motion Design & Implementation
After aligning on the motion direction through animation references, I transitioned from Figma to Framer and directly implemented the animations.
After aligning on the motion direction through animation references, I transitioned from Figma to Framer and directly implemented the animations.
Navigation of the new website structures with motion design
Navigation of the new website structures with motion design
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.