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.