Keyo Homepage Redesign
Redesigning the homepage into a modular, accessible, and role-aware control center.
Context
Keyo builds biometric identity systems that replace keys, cards, and passwords with the wave of a hand. When I joined, our palm scanner hardware looked sleek and futuristic but the software experience told a different story.
The homepage dashboard was static, cluttered, and underpowered. It lacked structure, clarity, and functionality. There was no onboarding flow, no insight into device usage, and no way for users to understand what was happening behind the scenes.
At the time, we didn’t yet have a mobile app, so this dashboard was the primary experience for many users especially new organizations onboarding the Keyo Wave.
My role
I led the homepage redesign end-to-end.
That included:
UX/UI design for multiple user roles (admin, member, developer)
Internal discovery and stakeholder alignment
Design system contribution (components, spacing, themes)
Accessibility review and fixes
Implementing light/dark mode using token-based theming
What I set out to fix
At a fast-moving startup, there’s rarely time for long research cycles but I still needed to understand what wasn’t working and why.
Instead of assumptions, I went directly to the people using the dashboard most: internal stakeholders. I asked them to walk through the homepage and talk out loud as they navigated. That simple exercise revealed patterns fast:
“I never click here”
“I wish I could see device activity here instead.”
“I just skip this part”
“I always scroll past this, it’s not helpful.”
“What’s this supposed to do?”
But the most telling comment was:
“Anna, I can’t even read my role, why is it so light?”
Caye, CPO
These weren’t just offhand comments - they were signals. Signals that parts of the homepage had lost relevance, weren’t usable, or were never clear to begin with.
To make the case for change, I ran a quick UX audit and packaged it into a 6-slide deck. It showed:
What was confusing, redundant, or broken
How that affected both usability and perception
What could be done to fix it without needing a full rebuild
That clarity helped build momentum and buy-in. It wasn’t just about improving the UI it was about making the product feel smarter, more trustworthy, and ready to scale.
That small pitch helped me get the space I needed to fix the foundation.
Why this mattered:
Originally, the homepage was passive a screen to skip past. This redesign turned it into an interactive control center. Every piece of content had a job: help users act, learn, or feel confident that the system was working. It wasn’t about doing more. It was about doing what mattered, well.
Phase 3: Making it functional
With a clear foundation and strong navigation, I introduced modular content blocks designed to bring real value:
Real-time scan metrics like usage volume and success rates
Onboarding checklists to help teams get set up quickly
Educational content for self-service support
Support access and feedback channels for ongoing product improvement
Each module was dynamic, role-specific, and context-aware. Users only saw what was relevant no clutter, no noise.
What was broken
The original homepage:
Had no visual hierarchy everything was equally loud
Didn’t adapt to the user’s role or context
Offered no helpful real-time data
Wasn’t accessible: poor contrast, no keyboard support, unclear focus states
Felt disconnected from our sleek biometric hardware
And the sidebar? Just a rigid list of links too big, no grouping, no status indicators, no sense of where you were.
Original homepage layout.
Designing for Usefulness, Not Just Aesthetics
Why this mattered:
Before we could introduce new functionality, the experience had to be clear. Users needed to instantly understand where they were, what mattered most, and what actions they could take. Without this clarity, any additional features would only add noise. This foundational pass created space for thoughtful interaction.
Phase 1: Laying the groundwork
I began by cleaning up layout and structure using early design system tokens:
Defined consistent spacing, card styles, and CTA hierarchy
Grouped related content visually and semantically
Fixed key issues: contrast, focus order, keyboard navigation, and screen-reader structure
Even without introducing new features, these changes had an immediate impact. The dashboard felt lighter, more coherent, and more trustworthy.
Phase 2: A sidebar that scales
The redesigned sidebar became more than just navigation:
Displayed content dynamically based on the user’s role (admin, developer, member)
Grouped items by intent tools, account settings, resources
Used active states and visual indicators for orientation
Fully supported dark mode through design system variables and theming logic
This sidebar evolved into the dashboard’s structural core especially important while our mobile app was still in development.
Why it mattered:
At that point in our product lifecycle, the dashboard wasn’t just a utility it was the main product interface. The original sidebar was static and shallow. By making it role-aware and scalable, we gave users a sense of control and place. It also enabled the dashboard to grow gracefully as the platform expanded.
I mapped quotes, user needs, and business goals to identify clear opportunities and constraints fast, low-cost, and actionable.
Early layout sketches helped test content hierarchy, sidebar structure, and card groupings before diving into visual polish.
Modular, role-aware dashboard that surfaces key actions and metrics optimized for clarity, usability, and scale.
Built flexible components and content modules that adapt to screen size and role supported by an evolving design system.
Designing with the device in mind
Why it mattered:
For admins managing biometric systems in high-stakes environments, the dashboard had to inspire confidence. It had to show that things were working or make it easy to understand when they weren’t. Designing with the device in mind helped us build that trust, visually and functionally.
Keyo isn’t just software it’s a biometric identity system that people interact with physically, every day. Our palm scanner sits in hospitals, offices, gyms environments where trust, reliability, and clarity aren’t just nice-to-haves they’re essential.
But while the hardware looked sleek and high-end, the dashboard didn’t reflect that same level of confidence.
I wanted to bridge that gap between what users touch and what they see.
So I designed the dashboard to match the language of the device:
Surfaced real-time device data (scan volume, success rates, payment metrics)
Made onboarding status visible at a glance
Used calm, structured layouts with thoughtful white space and neutral tones
The result was a more unified product experience one where the software felt as polished, intuitive, and trustworthy as the hardware it supported.
Elevating the design system
When I started the homepage redesign, our design system was still in its early stages. It had some basic components, but many patterns were either missing, inconsistent, or not yet built for accessibility or theming.
Rather than waiting for the system to mature, I used the homepage as a proving ground designing what was needed, and contributing it back into the shared library.
Here’s what I focused on:
Created flexible card and banner components that could adapt to different use cases and roles
Established foundational spacing, elevation, and interaction patterns for layout consistency
Helped implement our first dark mode support, using tokenized color variables
Fed real feedback from the homepage work into the system helping it grow with real usage, not just theory
Why this mattered:
A design system isn’t just a visual toolkit it’s a shared language. By contributing components grounded in real product needs, I helped create a system that was actually usable by other teams, not just aspirational.
The system matured as the dashboard did and that tight feedback loop made both stronger.
Impact
The new homepage wasn’t just a visual refresh it reshaped how users interacted with the platform.
By focusing on clarity, modularity, and real functionality, we created a dashboard that:
Helped users take action, not just consume information
Reflected each user’s role, context, and priorities
Scaled gracefully as the product evolved
This kind of dashboard builds trust. It makes the product feel professional, reliable, and ready to scale not just for users, but for partners and investors as well.
The redesign became a key part of our product story contributing to Keyo’s successful Series A raise.
What I learned
This project reinforced some of my core beliefs as a designer and gave me new ones:
You don’t need flashy visuals to build trust. You need clarity, structure, and intention.
When the mobile app doesn’t exist, the dashboard is the product. Design it like it matters because it does.
Design systems evolve faster when grounded in real product needs. Don’t wait for perfection contribute through use.
Small improvements in structure and accessibility can dramatically shift how a product feels. Users may not name them, but they notice them.
Keyo Homepage Redesign
Redesigning the homepage into a modular, accessible, and role-aware control center.
Context
Keyo builds biometric identity systems that replace keys, cards, and passwords with the wave of a hand. When I joined, our palm scanner hardware looked sleek and futuristic but the software experience told a different story.
The homepage dashboard was static, cluttered, and underpowered. It lacked structure, clarity, and functionality. There was no onboarding flow, no insight into device usage, and no way for users to understand what was happening behind the scenes.
At the time, we didn’t yet have a mobile app, so this dashboard was the primary experience for many users especially new organizations onboarding the Keyo Wave.
My role
I led the homepage redesign end-to-end.
That included:
UX/UI design for multiple user roles (admin, member, developer)
Internal discovery and stakeholder alignment
Design system contribution (components, spacing, themes)
Accessibility review and fixes
Implementing light/dark mode using token-based theming
What I set out to fix
At a fast-moving startup, there’s rarely time for long research cycles but I still needed to understand what wasn’t working and why.
Instead of assumptions, I went directly to the people using the dashboard most: internal stakeholders. I asked them to walk through the homepage and talk out loud as they navigated. That simple exercise revealed patterns fast:
“I just skip this part”
“I never click here”
“I wish I could see device activity here instead.”
“What’s this supposed to do?”
“I always scroll past this, it’s not helpful.”
But the most telling comment was:
“Anna, I can’t even read my role, why is it so light?”
Caye, CPO
These weren’t just offhand comments - they were signals. Signals that parts of the homepage had lost relevance, weren’t usable, or were never clear to begin with.
To make the case for change, I ran a quick UX audit and packaged it into a 6-slide deck. It showed:
What was confusing, redundant, or broken
How that affected both usability and perception
What could be done to fix it without needing a full rebuild
That clarity helped build momentum and buy-in. It wasn’t just about improving the UI it was about making the product feel smarter, more trustworthy, and ready to scale.
That small pitch helped me get the space I needed to fix the foundation.
What was broken
The original homepage:
Had no visual hierarchy everything was equally loud
Didn’t adapt to the user’s role or context
Offered no helpful real-time data
Wasn’t accessible: poor contrast, no keyboard support, unclear focus states
Felt disconnected from our sleek biometric hardware
And the sidebar? Just a rigid list of links too big, no grouping, no status indicators, no sense of where you were.
Original homepage layout.
Designing for Usefulness, Not Just Aesthetics
Why this mattered:
Before we could introduce new functionality, the experience had to be clear. Users needed to instantly understand where they were, what mattered most, and what actions they could take. Without this clarity, any additional features would only add noise. This foundational pass created space for thoughtful interaction.
Phase 1: Laying the groundwork
I began by cleaning up layout and structure using early design system tokens:
Even without introducing new features, these changes had an immediate impact. The dashboard felt lighter, more coherent, and more trustworthy.
Defined consistent spacing, card styles, and CTA hierarchy
Grouped related content visually and semantically
Fixed key issues: contrast, focus order, keyboard navigation, and screen-reader structure
Why it mattered:
At that point in our product lifecycle, the dashboard wasn’t just a utility it was the main product interface. The original sidebar was static and shallow. By making it role-aware and scalable, we gave users a sense of control and place. It also enabled the dashboard to grow gracefully as the platform expanded.
Phase 2: A sidebar that scales
The redesigned sidebar became more than just navigation:
Displayed content dynamically based on the user’s role (admin, developer, member)
Grouped items by intent tools, account settings, resources
Used active states and visual indicators for orientation
Fully supported dark mode through design system variables and theming logic
This sidebar evolved into the dashboard’s structural core especially important while our mobile app was still in development.
I mapped quotes, user needs, and business goals to identify clear opportunities and constraints fast, low-cost, and actionable.
Early layout sketches helped test content hierarchy, sidebar structure, and card groupings before diving into visual polish.
Modular, role-aware dashboard that surfaces key actions and metrics optimized for clarity, usability, and scale.
Built flexible components and content modules that adapt to screen size and role supported by an evolving design system.
Phase 3: Making it functional
With a clear foundation and strong navigation, I introduced modular content blocks designed to bring real value:
Real-time scan metrics like usage volume and success rates
Onboarding checklists to help teams get set up quickly
Educational content for self-service support
Support access and feedback channels for ongoing product improvement
Each module was dynamic, role-specific, and context-aware. Users only saw what was relevant no clutter, no noise.
Why this mattered:
Originally, the homepage was passive a screen to skip past. This redesign turned it into an interactive control center. Every piece of content had a job: help users act, learn, or feel confident that the system was working. It wasn’t about doing more. It was about doing what mattered, well.
Keyo Homepage Redesign
Redesigning the homepage into a modular, accessible, and role-aware control center.
Context
Keyo builds biometric identity systems that replace keys, cards, and passwords with the wave of a hand. When I joined, our palm scanner hardware looked sleek and futuristic but the software experience told a different story.
The homepage dashboard was static, cluttered, and underpowered. It lacked structure, clarity, and functionality. There was no onboarding flow, no insight into device usage, and no way for users to understand what was happening behind the scenes.
At the time, we didn’t yet have a mobile app, so this dashboard was the primary experience for many users especially new organizations onboarding the Keyo Wave.
My role
I led the homepage redesign end-to-end.
That included:
UX/UI design for multiple user roles (admin, member, developer)
Internal discovery and stakeholder alignment
Design system contribution (components, spacing, themes)
Accessibility review and fixes
Implementing light/dark mode using token-based theming
What I set out to fix
At a fast-moving startup, there’s rarely time for long research cycles but I still needed to understand what wasn’t working and why.
Instead of assumptions, I went directly to the people using the dashboard most: internal stakeholders. I asked them to walk through the homepage and talk out loud as they navigated. That simple exercise revealed patterns fast:
“I just skip this part”
“I never click here”
“I always scroll past this, it’s not helpful.”
“I wish I could see device activity here instead.”
“What’s this supposed to do?”
But the most telling comment was:
“Anna, I can’t even read my role, why is it so light?”
Caye, CPO
These weren’t just offhand comments - they were signals. Signals that parts of the homepage had lost relevance, weren’t usable, or were never clear to begin with.
To make the case for change, I ran a quick UX audit and packaged it into a 6-slide deck. It showed:
What was confusing, redundant, or broken
How that affected both usability and perception
What could be done to fix it without needing a full rebuild
That clarity helped build momentum and buy-in. It wasn’t just about improving the UI it was about making the product feel smarter, more trustworthy, and ready to scale. That small pitch helped me get the space I needed to fix the foundation.
What was broken
The original homepage:
Had no visual hierarchy everything was equally loud
Didn’t adapt to the user’s role or context
Offered no helpful real-time data
Wasn’t accessible: poor contrast, no keyboard support, unclear focus states
Felt disconnected from our sleek biometric hardware
And the sidebar? Just a rigid list of links too big, no grouping, no status indicators, no sense of where you were.
Original homepage layout.
Designing for Usefulness, Not Just Aesthetics
Why this mattered:
Before we could introduce new functionality, the experience had to be clear. Users needed to instantly understand where they were, what mattered most, and what actions they could take. Without this clarity, any additional features would only add noise. This foundational pass created space for thoughtful interaction.
Phase 1: Laying the groundwork
I began by cleaning up layout and structure using early design system tokens:
Even without introducing new features, these changes had an immediate impact. The dashboard felt lighter, more coherent, and more trustworthy.
Defined consistent spacing, card styles, and CTA hierarchy
Grouped related content visually and semantically
Fixed key issues: contrast, focus order, keyboard navigation, and screen-reader structure
Why it mattered:
At that point in our product lifecycle, the dashboard wasn’t just a utility it was the main product interface. The original sidebar was static and shallow. By making it role-aware and scalable, we gave users a sense of control and place. It also enabled the dashboard to grow gracefully as the platform expanded.
Phase 2: A sidebar that scales
The redesigned sidebar became more than just navigation:
Displayed content dynamically based on the user’s role (admin, developer, member)
Grouped items by intent tools, account settings, resources
Used active states and visual indicators for orientation
Fully supported dark mode through design system variables and theming logic
This sidebar evolved into the dashboard’s structural core especially important while our mobile app was still in development.
I mapped quotes, user needs, and business goals to identify clear opportunities and constraints fast, low-cost, and actionable.
Early layout sketches helped test content hierarchy, sidebar structure, and card groupings before diving into visual polish.
Modular, role-aware dashboard that surfaces key actions and metrics optimized for clarity, usability, and scale.
Built flexible components and content modules that adapt to screen size and role supported by an evolving design system.
Phase 3: Making it functional
With a clear foundation and strong navigation, I introduced modular content blocks designed to bring real value:
Real-time scan metrics like usage volume and success rates
Onboarding checklists to help teams get set up quickly
Educational content for self-service support
Support access and feedback channels for ongoing product improvement
Each module was dynamic, role-specific, and context-aware. Users only saw what was relevant no clutter, no noise.
Why this mattered:
Originally, the homepage was passive a screen to skip past. This redesign turned it into an interactive control center. Every piece of content had a job: help users act, learn, or feel confident that the system was working. It wasn’t about doing more. It was about doing what mattered, well.
Designing with the device in mind
Keyo isn’t just software it’s a biometric identity system that people interact with physically, every day. Our palm scanner sits in hospitals, offices, gyms environments where trust, reliability, and clarity aren’t just nice-to-haves they’re essential.
But while the hardware looked sleek and high-end, the dashboard didn’t reflect that same level of confidence.
I wanted to bridge that gap between what users touch and what they see.
So I designed the dashboard to match the language of the device:
Surfaced real-time device data (scan volume, success rates, payment metrics)
Made onboarding status visible at a glance
Used calm, structured layouts with thoughtful white space and neutral tones
The result was a more unified product experience one where the software felt as polished, intuitive, and trustworthy as the hardware it supported.
Why it mattered:
For admins managing biometric systems in high-stakes environments, the dashboard had to inspire confidence. It had to show that things were working or make it easy to understand when they weren’t. Designing with the device in mind helped us build that trust, visually and functionally.
Elevating the design system
When I started the homepage redesign, our design system was still in its early stages. It had some basic components, but many patterns were either missing, inconsistent, or not yet built for accessibility or theming.
Rather than waiting for the system to mature, I used the homepage as a proving ground designing what was needed, and contributing it back into the shared library.
Here’s what I focused on:
Created flexible card and banner components that could adapt to different use cases and roles
Established foundational spacing, elevation, and interaction patterns for layout consistency
Helped implement our first dark mode support, using tokenized color variables
Fed real feedback from the homepage work into the system helping it grow with real usage, not just theory
Why this mattered:
A design system isn’t just a visual toolkit it’s a shared language. By contributing components grounded in real product needs, I helped create a system that was actually usable by other teams, not just aspirational.
The system matured as the dashboard did and that tight feedback loop made both stronger.
Impact
The new homepage wasn’t just a visual refresh it reshaped how users interacted with the platform.
By focusing on clarity, modularity, and real functionality, we created a dashboard that:
Helped users take action, not just consume information
Reflected each user’s role, context, and priorities
Scaled gracefully as the product evolved
This kind of dashboard builds trust. It makes the product feel professional, reliable, and ready to scale not just for users, but for partners and investors as well.
The redesign became a key part of our product story contributing to Keyo’s successful Series A raise.
What I learned
This project reinforced some of my core beliefs as a designer and gave me new ones:
You don’t need flashy visuals to build trust. You need clarity, structure, and intention.
When the mobile app doesn’t exist, the dashboard is the product. Design it like it matters because it does.
Design systems evolve faster when grounded in real product needs. Don’t wait for perfection contribute through use.
Small improvements in structure and accessibility can dramatically shift how a product feels. Users may not name them, but they notice them.
Designing with the device in mind
Designing with the device in mind
Why it mattered:
For admins managing biometric systems in high-stakes environments, the dashboard had to inspire confidence. It had to show that things were working or make it easy to understand when they weren’t. Designing with the device in mind helped us build that trust, visually and functionally.
Keyo isn’t just software it’s a biometric identity system that people interact with physically, every day. Our palm scanner sits in hospitals, offices, gyms environments where trust, reliability, and clarity aren’t just nice-to-haves they’re essential.
But while the hardware looked sleek and high-end, the dashboard didn’t reflect that same level of confidence.
I wanted to bridge that gap between what users touch and what they see.
So I designed the dashboard to match the language of the device:
Surfaced real-time device data (scan volume, success rates, payment metrics)
Made onboarding status visible at a glance
Used calm, structured layouts with thoughtful white space and neutral tones
Surfaced real-time device data (scan volume, success rates, payment metrics)
Made onboarding status visible at a glance
Used calm, structured layouts with thoughtful white space and neutral tones
The result was a more unified product experience one where the software felt as polished, intuitive, and trustworthy as the hardware it supported.
Elevating the design system
When I started the homepage redesign, our design system was still in its early stages. It had some basic components, but many patterns were either missing, inconsistent, or not yet built for accessibility or theming.
Rather than waiting for the system to mature, I used the homepage as a proving ground designing what was needed, and contributing it back into the shared library.
Here’s what I focused on:
Created flexible card and banner components that could adapt to different use cases and roles
Established foundational spacing, elevation, and interaction patterns for layout consistency
Helped implement our first dark mode support, using tokenized color variables
Fed real feedback from the homepage work into the system helping it grow with real usage, not just theory
When I started the homepage redesign, our design system was still in its early stages. It had some basic components, but many patterns were either missing, inconsistent, or not yet built for accessibility or theming.
Rather than waiting for the system to mature, I used the homepage as a proving ground designing what was needed, and contributing it back into the shared library.
Here’s what I focused on:
Created flexible card and banner components that could adapt to different use cases and roles
Established foundational spacing, elevation, and interaction patterns for layout consistency
Helped implement our first dark mode support, using tokenized color variables
Fed real feedback from the homepage work into the system helping it grow with real usage, not just theory
Why this mattered:
A design system isn’t just a visual toolkit it’s a shared language. By contributing components grounded in real product needs, I helped create a system that was actually usable by other teams, not just aspirational.
The system matured as the dashboard did and that tight feedback loop made both stronger.
Impact
The new homepage wasn’t just a visual refresh it reshaped how users interacted with the platform.
By focusing on clarity, modularity, and real functionality, we created a dashboard that:
Helped users take action, not just consume information
Reflected each user’s role, context, and priorities
Scaled gracefully as the product evolved
This kind of dashboard builds trust. It makes the product feel professional, reliable, and ready to scale not just for users, but for partners and investors as well.
The redesign became a key part of our product story contributing to Keyo’s successful Series A raise.
What I learned
This project reinforced some of my core beliefs as a designer and gave me new ones:
You don’t need flashy visuals to build trust. You need clarity, structure, and intention.
When the mobile app doesn’t exist, the dashboard is the product. Design it like it matters because it does.
Design systems evolve faster when grounded in real product needs. Don’t wait for perfection contribute through use.
Small improvements in structure and accessibility can dramatically shift how a product feels. Users may not name them, but they notice them.