Open! - Your Monthly Source of Design Brilliance

Open! - Your Monthly Source of Design Brilliance

Designing the Ledger Stax OS

Jules Bassoleil

Co-fondateur

Oct 4, 2024

Behind the scenes of the revolutionary crypto wallet

In this month's edition of our newsletter, we Open! the vault on Ledger Stax, the latest flagship device from French unicorn Ledger.

Jules Bassoleil, Creative Director and Co-founder of Source, worked closely with Ledger’s teams for two years on this project. Today, he breaks down 9 design challenges they faced while building the software and user experience for this groundbreaking hardware product.

Context

Our partnership with Ledger began years ago, improving their websites, apps, and onboarding experience.

In June 2021, they tasked us with designing the UX and embedded software for the Ledger Stax, a curved e-ink touchscreen wallet designed by Tony Fadell.

The project lasted nearly two years, focusing solely on UX/UI, and in 2024, the final product is now shipping to customers.

The Ledger Stax aims to democratize crypto security by balancing ease of use with the ability to sign large transactions. With its own OS, the out-of-the-box and first-time setup experiences must be flawless.

1. Understanding the product and its stakes

What is a hardware wallet? Why is it important?

In short, a hardware wallet stores your private key (granting access to your crypto and NFTs) on an offline device, rather than on third-party platforms like Binance or Coinbase. This ensures full control and security over your digital assets.

2. Analyzing the existing user experience

Our design journey started by analyzing the Ledger Nano, their most popular device, with over 6 million units sold since 2014.

While Ledger Stax retains about 80% of its predecessor’s functionalities, we needed to address specific pain points to improve user experience.

Key challenges included reducing the number of taps for actions and the onboarding time.

A significant part of the complexity comes from the blockchain itself and how data is formatted. For example, signing a transaction can be difficult, as users often have to verify technical information that may not be easy to understand.

3. Designing without the final product

One of the earliest challenges was designing interfaces without access to the final product or screen.

To tackle this, I proposed creating full-scale paper prototypes, which allowed us to experiment with gestures, readability, and accessibility.

This hands-on approach was a game-changer for the decision-makers at Ledger, who often validated concepts without the ability to test them.

It significantly accelerated our ability to define ergonomic rules for the product interface, ensuring a user-friendly experience from the ground up.

4. Embracing the challenges of E-ink

Adapting our interfaces to E-ink technology posed its own set of challenges.

We tested our designs on a screen with similar specs to the final product and quickly encountered issues like strong image retention.

This required us to rethink and adjust some early designs, such as avoiding solid black backgrounds, to ensure optimal performance and security.

5. Ensuring a seamless onboarding experience

One of our primary goals was to ensure a smooth onboarding experience across two distinct interfaces: Ledger Stax and its companion phone/computer app.

By developing Figma prototypes for both, we were able to cover all possible scenarios, ensuring a cohesive and user-friendly onboarding process, no matter the device.

6. Perfecting the core feature: Signing transactions

Signing transactions is the cornerstone of any crypto wallet.

This step lets users approve transfers of their crypto securely. And if the process isn’t smooth or clear, it can lead to mistakes or even discourage users from completing transactions.

We worked and reworked tirelessly to perfect this feature, focusing on smooth animations, information review, and optimizing refresh rates.

Each iteration brought us closer to a seamless and intuitive signing process, adding an extra layer of security with clear and accurate information review for users.

7. Achieving a polished interface

Achieving a polished interface on the final device was a meticulous process.

Fonts weren’t just simple .otf files, every character needed to be converted into .bmp format.

We painstakingly reworked all three typefaces to ensure they displayed perfectly on the e-ink screen, balancing clarity and aesthetics for an optimal user experience.

8. Managing storage constraints

Ledger Stax has a limited 2MB storage capacity, which required us to design an interface that prioritized efficiency and rely heavily on fonts to save space.

This led to careful planning and optimization, forcing us to meticulously choose between using fonts or icons for each element.

This stage of defining the artistic direction was quite challenging. I had to advocate strongly for a complete overhaul of our initial design, as I wasn't satisfied with the results.

We spent four weeks revising the entire design of the screens. Although the decision-makers were initially hesitant, they ultimately appreciated the improved outcome.

9. Optimizing refresh rates for speed

Testing, learning, and improving the interface on the actual device revealed that the refresh rate was a major pain point. The screen supports 16 levels of gray, and the more gray levels used, the longer the refresh time.

To speed up the experience, we reduced color usage on key screens, such as the pincode screen, gaining almost 2 seconds in unlocking the device

Final thoughts

There’s much more to share, but this gives you a good overview of our work.

We also conducted extensive user testing, created libraries, and addressed other common elements in interface projects that aren’t detailed here.

Thanks for following our journey and stay tuned for a new deep dive about the newest Ledger Flex with an even smaller screen.

Behind the scenes of the revolutionary crypto wallet

In this month's edition of our newsletter, we Open! the vault on Ledger Stax, the latest flagship device from French unicorn Ledger.

Jules Bassoleil, Creative Director and Co-founder of Source, worked closely with Ledger’s teams for two years on this project. Today, he breaks down 9 design challenges they faced while building the software and user experience for this groundbreaking hardware product.

Context

Our partnership with Ledger began years ago, improving their websites, apps, and onboarding experience.

In June 2021, they tasked us with designing the UX and embedded software for the Ledger Stax, a curved e-ink touchscreen wallet designed by Tony Fadell.

The project lasted nearly two years, focusing solely on UX/UI, and in 2024, the final product is now shipping to customers.

The Ledger Stax aims to democratize crypto security by balancing ease of use with the ability to sign large transactions. With its own OS, the out-of-the-box and first-time setup experiences must be flawless.

1. Understanding the product and its stakes

What is a hardware wallet? Why is it important?

In short, a hardware wallet stores your private key (granting access to your crypto and NFTs) on an offline device, rather than on third-party platforms like Binance or Coinbase. This ensures full control and security over your digital assets.

2. Analyzing the existing user experience

Our design journey started by analyzing the Ledger Nano, their most popular device, with over 6 million units sold since 2014.

While Ledger Stax retains about 80% of its predecessor’s functionalities, we needed to address specific pain points to improve user experience.

Key challenges included reducing the number of taps for actions and the onboarding time.

A significant part of the complexity comes from the blockchain itself and how data is formatted. For example, signing a transaction can be difficult, as users often have to verify technical information that may not be easy to understand.

3. Designing without the final product

One of the earliest challenges was designing interfaces without access to the final product or screen.

To tackle this, I proposed creating full-scale paper prototypes, which allowed us to experiment with gestures, readability, and accessibility.

This hands-on approach was a game-changer for the decision-makers at Ledger, who often validated concepts without the ability to test them.

It significantly accelerated our ability to define ergonomic rules for the product interface, ensuring a user-friendly experience from the ground up.

4. Embracing the challenges of E-ink

Adapting our interfaces to E-ink technology posed its own set of challenges.

We tested our designs on a screen with similar specs to the final product and quickly encountered issues like strong image retention.

This required us to rethink and adjust some early designs, such as avoiding solid black backgrounds, to ensure optimal performance and security.

5. Ensuring a seamless onboarding experience

One of our primary goals was to ensure a smooth onboarding experience across two distinct interfaces: Ledger Stax and its companion phone/computer app.

By developing Figma prototypes for both, we were able to cover all possible scenarios, ensuring a cohesive and user-friendly onboarding process, no matter the device.

6. Perfecting the core feature: Signing transactions

Signing transactions is the cornerstone of any crypto wallet.

This step lets users approve transfers of their crypto securely. And if the process isn’t smooth or clear, it can lead to mistakes or even discourage users from completing transactions.

We worked and reworked tirelessly to perfect this feature, focusing on smooth animations, information review, and optimizing refresh rates.

Each iteration brought us closer to a seamless and intuitive signing process, adding an extra layer of security with clear and accurate information review for users.

7. Achieving a polished interface

Achieving a polished interface on the final device was a meticulous process.

Fonts weren’t just simple .otf files, every character needed to be converted into .bmp format.

We painstakingly reworked all three typefaces to ensure they displayed perfectly on the e-ink screen, balancing clarity and aesthetics for an optimal user experience.

8. Managing storage constraints

Ledger Stax has a limited 2MB storage capacity, which required us to design an interface that prioritized efficiency and rely heavily on fonts to save space.

This led to careful planning and optimization, forcing us to meticulously choose between using fonts or icons for each element.

This stage of defining the artistic direction was quite challenging. I had to advocate strongly for a complete overhaul of our initial design, as I wasn't satisfied with the results.

We spent four weeks revising the entire design of the screens. Although the decision-makers were initially hesitant, they ultimately appreciated the improved outcome.

9. Optimizing refresh rates for speed

Testing, learning, and improving the interface on the actual device revealed that the refresh rate was a major pain point. The screen supports 16 levels of gray, and the more gray levels used, the longer the refresh time.

To speed up the experience, we reduced color usage on key screens, such as the pincode screen, gaining almost 2 seconds in unlocking the device

Final thoughts

There’s much more to share, but this gives you a good overview of our work.

We also conducted extensive user testing, created libraries, and addressed other common elements in interface projects that aren’t detailed here.

Thanks for following our journey and stay tuned for a new deep dive about the newest Ledger Flex with an even smaller screen.

Enjoyed this article? You’ll love Open!

Join our newsletter to get the very best of our content every month — insights, client stories and design experiments, straight to your inbox.

Work with Source.paris

Since 2014, we’ve been turning complex challenges into clear and desirable user experiences.
From product strategy to full-scale rollout, our team brings structure, speed and sharp execution — with no compromises.

Enjoyed this article? You’ll love Open!

Join our newsletter to get the very best of our content every month — insights, client stories and design experiments, straight to your inbox.

Work with Source.paris

Since 2014, we’ve been turning complex challenges into clear and desirable user experiences.
From product strategy to full-scale rollout, our team brings structure, speed and sharp execution — with no compromises.

Enjoyed this article? You’ll love Open!

Join our newsletter to get the very best of our content every month — insights, client stories and design experiments, straight to your inbox.

Work with Source.paris

Since 2014, we’ve been turning complex challenges into clear and desirable user experiences.
From product strategy to full-scale rollout, our team brings structure, speed and sharp execution — with no compromises.

Enjoyed this article? You’ll love Open!

Join our newsletter to get the very best of our content every month — insights, client stories and design experiments, straight to your inbox.

Work with Source.paris

Since 2014, we’ve been turning complex challenges into clear and desirable user experiences.
From product strategy to full-scale rollout, our team brings structure, speed and sharp execution — with no compromises.