Website rebranding
Feature Focus
Dashboard
Redesigned website layout, typography, and color system
Redesigned website layout, typography, and color system
More side-by-side comparisons?
[Jump to Before & After ↘︎]
More side-by-side comparisons?
[Jump to Before & After ↘︎]
New Home page
New Home page
After collaborating on a previous [User portfolio dashboard] project, the team brought me back for a complete website rebrand.
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 working closely with the CEO and BD team
UX/UI Designer working closely with the CEO and BD team
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
I refined the existing blue and orange to better reflect the brand's character, without losing the brand recognition Ensuro had already built.
I refined the existing blue and orange to better reflect the brand's character, without losing the brand recognition Ensuro had already built.
Typography Update
Typography Update
The original font, Jost, was too playful for an insurance business and compromised readability.
I replaced it with:
• Gilda Display for headlines
• Inter for body text
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.
Challenges & Solutions
Challenges & Solutions
One Site, Two Audiences
One Site, Two Audiences
I decided to use 2 prominent CTA buttons on the hero section to guide each audience segment, rather than splitting into two separate sites.
I decided to use 2 prominent CTA buttons on the hero section to guide each audience segment, rather than splitting into two separate sites.
Dense Content, Poor Navigation
Dense Content, 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.
Site map
Site map
Reorganized navigation structure and homepage flow to serve two distinct audiences.
Reorganized navigation structure and homepage flow to serve two distinct audiences.
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 CTAs guide investors and companies to tailored content paths.
Before: Single generic entry point with all content mixed together.
After: Two distinct CTAs guide investors and companies to tailored content paths.
Low-fidelity Wireframes
Low-fidelity Wireframes
Exploring layout and interaction patterns before moving to high fidelity.
Exploring layout and interaction patterns before moving to high fidelity.
Mid-Fidelity Prototypes
Mid-Fidelity Prototypes
Applied brand colors and client content, then built motion design in Framer using the Companies and Service pages to demonstrate the design system.
Applied brand colors and client content, then built motion design in Framer using the Companies and Service pages to demonstrate the design system.
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 CTA animation that auto-plays on load, then responds to hover
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 CTA animation that auto-plays on load, then responds to hover
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
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 gave Ensuro a clearer brand presence and made their business model easier to understand for both investors and companies. Working closely with the CEO and BD team taught me how to balance business priorities with user needs, and how to simplify a technically complex product without losing its credibility.
The redesign gave Ensuro a clearer brand presence and made their business model easier to understand for both investors and companies. Working closely with the CEO and BD team taught me how to balance business priorities with user needs, and how to simplify a technically complex product without losing its credibility.