2024
2024
Xledger
Xledger
Xledger
Role
Role
UI/UX Designer
agency
agency
TangoSquared
industry
industry
Financial Technology
Tools
Tools
Figma
overview
overview
overview
Scope
A complete redesign of the 30+ page Xledger website.
Xledger's existing site didn't reflect the quality and value of the product—the goal of the redesign was to fix that.
Scope
A complete redesign of the 30+ page Xledger website.
Xledger's existing site didn't reflect the quality and value of the product—the goal of the redesign was to fix that.
My role
My role
I worked alongside the Chief Creative Officer and Design Director to execute the redesign from discovery through final delivery.
I helped define the design direction, explored and refined visual concepts based on client feedback, and built out the design system. Then applied it consistently across the site.
I worked alongside the Chief Creative Officer and Design Director to execute the redesign from discovery through final delivery.
I helped define the design direction, explored and refined visual concepts based on client feedback, and built out the design system. Then applied it consistently across the site.
process
process
process
Turning pain points into design solutions
Turning pain points into design solutions
Pain Point
Pain Point
Poor navigation
Poor navigation
Every menu item was buried inside dropdowns within a hamburger menu, even on desktop where screen real estate is less of a concern than on mobile.
Users had to navigate through multiple layers just to find basic pages, making the experience feel tedious and unintuitive from the start.
Every menu item was buried inside dropdowns within a hamburger menu, even on desktop where screen real estate is less of a concern than on mobile.
Users had to navigate through multiple layers just to find basic pages, making the experience feel tedious and unintuitive from the start.
Design Solution
Design Solution
open & accessible menu structure
open & accessible menu structure
We restructured the navigation to balance what users are looking for with what the product actually does—not the internal business structure.
The navigation avoids using internal jargon and vague product ecosystem names, relying on universally understood industry terms.
We restructured the navigation to balance what users are looking for with what the product actually does—not the internal business structure.
The navigation avoids using internal jargon and vague product ecosystem names, relying on universally understood industry terms.
Pain Point
Pain Point
Confusing Hierarchy
Confusing Hierarchy
CTA buttons lacked defined guidelines for primary, secondary, and tertiary styles.
They blended into surrounding content, looked too similar to section headers, and gave users no clear visual cue for what was actually clickable.
CTA buttons lacked defined guidelines for primary, secondary, and tertiary styles.
They blended into surrounding content, looked too similar to section headers, and gave users no clear visual cue for what was actually clickable.
Design Solution
Design Solution
Consistent & Intentional Button System
Consistent & Intentional Button System
We built out a standardized CTA system with clear usage guidelines, anchored to the primary brand color, and then applied consistently across every page.
Hover states were also added for instant visual feedback and to guide user attention to the most important actions.
We built out a standardized CTA system with clear usage guidelines, anchored to the primary brand color, and then applied consistently across every page.
Hover states were also added for instant visual feedback and to guide user attention to the most important actions.
Pain Point
Pain Point
Cluttered Page Layout
Cluttered Page Layout
Pages were overrun by dense blocks of text with paragraphs running back to back and no visual separation between them.
There was almost no white space, leaving nothing to help users pace themselves through the content.
Pages were overrun by dense blocks of text with paragraphs running back to back and no visual separation between them.
There was almost no white space, leaving nothing to help users pace themselves through the content.
Design Solution
Design Solution
Content-First Structure
Content-First Structure
Pages were reorganized by visual weight and content priority, giving users an instant mental map of what mattered most.
Knowing most users skim rather than read, white space was used intentionally to create a clear path through the page.
Pages were reorganized by visual weight and content priority, giving users an instant mental map of what mattered most.
Knowing most users skim rather than read, white space was used intentionally to create a clear path through the page.
project insights
project insights
successes
successes
#1
#1
Increase in Demo Requests
Increase in Demo Requests
After the redesign launched, Xledger saw a 25% increase in prospective customers requesting demos.
The client directly connected this increase to the redesign because prospective customers were better able to understand what Xledger actually did and why it was worth exploring.
After the redesign launched, Xledger saw a 25% increase in prospective customers requesting demos.
The client directly connected this increase to the redesign because prospective customers were better able to understand what Xledger actually did and why it was worth exploring.
#2
#2
Consistent Cross-Device Experience
Consistent Cross-Device Experience
The original site had two entirely different experiences on desktop and mobile—separate navigation, different page structure, inconsistent layouts. Unifying them was one of the biggest wins of the project.
The redesign brought consistency across devices, ensuring that no matter how a user accessed the site, they were getting the same experience.
The original site had two entirely different experiences on desktop and mobile—separate navigation, different page structure, inconsistent layouts. Unifying them was one of the biggest wins of the project.
The redesign brought consistency across devices, ensuring that no matter how a user accessed the site, they were getting the same experience.
Challenges
Challenges
#1
#1
Finding a Branding Direction
Settling on a visual direction was one of the hardest parts of the project.
We went through multiple rounds of exploration across color palettes and typography, trying to find something fresh and modern without losing the core of Xledger's existing brand.
Settling on a visual direction was one of the hardest parts of the project.
We went through multiple rounds of exploration across color palettes and typography, trying to find something fresh and modern without losing the core of Xledger's existing brand.
#2
#2
Content Constraints
The client wanted all copy remain unchanged, which meant we couldn't simplify the content itself—only how it was presented.
Fitting a large volume of text into layouts that still felt clean and visually balanced required many rounds of iteration and refinement to land on something that worked.
The client wanted all copy remain unchanged, which meant we couldn't simplify the content itself—only how it was presented.
Fitting a large volume of text into layouts that still felt clean and visually balanced required many rounds of iteration and refinement to land on something that worked.
In collaboration with Mark Dingman & Ngan Nguyen at TangoSquared.
In collaboration with Mark Dingman & Ngan Nguyen at TangoSquared.
Niko Sarles
based in Chicago, il
Niko Sarles
based in Chicago, il
Niko Sarles
based in Chicago, il