Local Node Wallet UX on Lace

skills

Product Strategy / Art Direction / Interaction Design / Product Design / Javascript

my role

I joined IOHK/IOG as a Senior Product designer in 2022 to lead design on desktop apps. I was in charge of product strategy for Lace desktop and worked directly with the Engineering team in charge of Daedalus to maintain the product as it approached end of life and the company intended to sunset it. I collaborated with talented designers and engineers including Matteu H., Nnamdi E., Dan S., Elena H.

Local Node Wallet UX on Lace

skills

Product Strategy / Art Direction / Interaction Design / Product Design / Javascript

my role

I joined IOHK/IOG as a Senior Product designer in 2022 to lead design on desktop apps. I was in charge of product strategy for Lace desktop and worked directly with the Engineering team in charge of Daedalus to maintain the product as it approached end of life and the company intended to sunset it. I collaborated with talented designers and engineers including Matteu H., Nnamdi E., Dan S., Elena H.

Local Node Wallet UX on Lace

skills

Product Strategy / Art Direction / Interaction Design / Product Design / Javascript

my role

I joined IOHK/IOG as a Senior Product designer in 2022 to lead design on desktop apps. I was in charge of product strategy for Lace desktop and worked directly with the Engineering team in charge of Daedalus to maintain the product as it approached end of life and the company intended to sunset it. I collaborated with talented designers and engineers including Matteu H., Nnamdi E., Dan S., Elena H.

understanding the product

A local node wallet or full node wallet is a self hosted copy of the entire blockchain that is connected to a wallet interface. It works by downloading the entire blockchain history to your computer and validating all blocks and transactions for a fully trust-less and autonomous operation. In otherwords, you can interact directly with the blockchain without relying on a third party. Examples of a Full node wallets are Daedalus & Yoroi on Cardano, Metamask users on Ethereum can run their own nodes by setting up Execution & Consensus clients.

On the other hand, Light wallets are basically the reverse, they are simple wallets that connect to third party nodes which they do not control. The inherent benefits of running your own local node include

Faster transaction submission

Extra security by removing possible breach points since your connection is hosted on your own machine.

One of the drawbacks to hosting your own Local node is the relatively large system requirement for running the system. At the time of writing, the Cardano blockchain occupies around 6.5GB of space on your computer. On initial download this can take some time to copy and validate the blockchain, and this time will be dependant on your internet connection and processing performance of your computer. After the initial download is complete, when you come to use Daedalus again, it will need to sync with the latest transactions that have occurred since you last opened Daedalus.

The challenge

My team was tasked with designing a brand new local node process that would work inside the new Lace wallet on desktop. We saw an opportunity to onboard users from Daedalus by creating a secure and familiar Local node experience inside lace.

While i understood the value proposition and positional advantage creating this feature would grant IOHK, I did not understand enough of problem to answer my three favourite questions: Why? How? For Whom?

Our plan was to gather as much insight from the Cardano community and Daedalus user community to make better informed decisions. In collaboration with the product owner, we designed a user interview cohort focused uniquely on discovering the level of demand for the product. In addition to the user interview sessions, I conducted a competitor analysis to better understand existing products on the market.

synthesis & insights

In collaboration with the Lace design team, I sorted all the feedback and useful information from the user interview cohort and competitor analysis which provided me adequate qualitative and quantitative data to guide my decisions and understanding of the product. Here are some of the relevant insights I gathered:

Less than 50% of the users interviewed beleive that the local node significantly makes their experience better.

10% of Daedalus users interviewed don't know what the local node actually does.

understanding the product

A local node wallet or full node wallet is a self hosted copy of the entire blockchain that is connected to a wallet interface. It works by downloading the entire blockchain history to your computer and validating all blocks and transactions for a fully trust-less and autonomous operation. In otherwords, you can interact directly with the blockchain without relying on a third party. Examples of a Full node wallets are Daedalus & Yoroi on Cardano, Metamask users on Ethereum can run their own nodes by setting up Execution & Consensus clients.

On the other hand, Light wallets are basically the reverse, they are simple wallets that connect to third party nodes which they do not control. The inherent benefits of running your own local node include

Faster transaction submission

Extra security by removing possible breach points since your connection is hosted on your own machine.

One of the drawbacks to hosting your own Local node is the relatively large system requirement for running the system. At the time of writing, the Cardano blockchain occupies around 6.5GB of space on your computer. On initial download this can take some time to copy and validate the blockchain, and this time will be dependant on your internet connection and processing performance of your computer. After the initial download is complete, when you come to use Daedalus again, it will need to sync with the latest transactions that have occurred since you last opened Daedalus.

The challenge

My team was tasked with designing a brand new local node process that would work inside the new Lace wallet on desktop. We saw an opportunity to onboard users from Daedalus by creating a secure and familiar Local node experience inside lace.

While i understood the value proposition and positional advantage creating this feature would grant IOHK, I did not understand enough of problem to answer my three favourite questions: Why? How? For Whom?

Our plan was to gather as much insight from the Cardano community and Daedalus user community to make better informed decisions. In collaboration with the product owner, we designed a user interview cohort focused uniquely on discovering the level of demand for the product. In addition to the user interview sessions, I conducted a competitor analysis to better understand existing products on the market.

synthesis & insights

In collaboration with the Lace design team, I sorted all the feedback and useful information from the user interview cohort and competitor analysis which provided me adequate qualitative and quantitative data to guide my decisions and understanding of the product. Here are some of the relevant insights I gathered:

Less than 50% of the users interviewed beleive that the local node significantly makes their experience better.

10% of Daedalus users interviewed don't know what the local node actually does.

understanding the product

A local node wallet or full node wallet is a self hosted copy of the entire blockchain that is connected to a wallet interface. It works by downloading the entire blockchain history to your computer and validating all blocks and transactions for a fully trust-less and autonomous operation. In otherwords, you can interact directly with the blockchain without relying on a third party. Examples of a Full node wallets are Daedalus & Yoroi on Cardano, Metamask users on Ethereum can run their own nodes by setting up Execution & Consensus clients.

On the other hand, Light wallets are basically the reverse, they are simple wallets that connect to third party nodes which they do not control. The inherent benefits of running your own local node include

Faster transaction submission

Extra security by removing possible breach points since your connection is hosted on your own machine.

One of the drawbacks to hosting your own Local node is the relatively large system requirement for running the system. At the time of writing, the Cardano blockchain occupies around 6.5GB of space on your computer. On initial download this can take some time to copy and validate the blockchain, and this time will be dependant on your internet connection and processing performance of your computer. After the initial download is complete, when you come to use Daedalus again, it will need to sync with the latest transactions that have occurred since you last opened Daedalus.

The challenge

My team was tasked with designing a brand new local node process that would work inside the new Lace wallet on desktop. We saw an opportunity to onboard users from Daedalus by creating a secure and familiar Local node experience inside lace.

While i understood the value proposition and positional advantage creating this feature would grant IOHK, I did not understand enough of problem to answer my three favourite questions: Why? How? For Whom?

Our plan was to gather as much insight from the Cardano community and Daedalus user community to make better informed decisions. In collaboration with the product owner, we designed a user interview cohort focused uniquely on discovering the level of demand for the product. In addition to the user interview sessions, I conducted a competitor analysis to better understand existing products on the market.

synthesis & insights

In collaboration with the Lace design team, I sorted all the feedback and useful information from the user interview cohort and competitor analysis which provided me adequate qualitative and quantitative data to guide my decisions and understanding of the product. Here are some of the relevant insights I gathered:

Less than 50% of the users interviewed beleive that the local node significantly makes their experience better.

10% of Daedalus users interviewed don't know what the local node actually does.

designing an mvp, feature priority & de-risking

Coming off a successful sprint where we were able to define who the users are, what their motivations are and how best to serve them, we now had to decide on what to build. To ensure we understood the risks involved and not design a flawed product, I conducted a 2 day workshop to create the product requirements, assign levels of priority and onboard the engineering team to get early feedback around our assumptions & expectations. Here are some of the key decisions made;

A decouplable experience: we decided it would be safe to design a product that can be installed or uninstalled by the user. This puts the user in a great placee where they can choose how and when to use the Local node.

Integrated experience: Unlike on the Ethereum chain, users will not have to install multiple Clients to access the local node.

Complex by nature: The local node is a complex feature, we can only recommend that advanced users access it.

Status heavy

enabling the local node

The local node comes disabled out of the box inside a Lace wallet. The user has to decide to turn it on. Since the Local Node would be a brand new feature when it launched, I saw and opportunity to use banners to educate users and as well as funnel them into the Local node option.

The design team loved the idea as well, but we could not agree on where this banner would live on the screen, I wanted a very ostentatious banner at the top of the viewport, however the team argued that it did not deserve such VIP treatment as they did not consider it a major feature.

I proceeded to A/B test two placement directions with members of the design and engineering team and the data pointed towards Option B.

designing an mvp, feature priority & de-risking

Coming off a successful sprint where we were able to define who the users are, what their motivations are and how best to serve them, we now had to decide on what to build. To ensure we understood the risks involved and not design a flawed product, I conducted a 2 day workshop to create the product requirements, assign levels of priority and onboard the engineering team to get early feedback around our assumptions & expectations. Here are some of the key decisions made;

A decouplable experience: we decided it would be safe to design a product that can be installed or uninstalled by the user. This puts the user in a great placee where they can choose how and when to use the Local node.

Integrated experience: Unlike on the Ethereum chain, users will not have to install multiple Clients to access the local node.

Complex by nature: The local node is a complex feature, we can only recommend that advanced users access it.

Status heavy

enabling the local node

The local node comes disabled out of the box inside a Lace wallet. The user has to decide to turn it on. Since the Local Node would be a brand new feature when it launched, I saw and opportunity to use banners to educate users and as well as funnel them into the Local node option.

The design team loved the idea as well, but we could not agree on where this banner would live on the screen, I wanted a very ostentatious banner at the top of the viewport, however the team argued that it did not deserve such VIP treatment as they did not consider it a major feature.

I proceeded to A/B test two placement directions with members of the design and engineering team and the data pointed towards Option B.

designing an mvp, feature priority & de-risking

Coming off a successful sprint where we were able to define who the users are, what their motivations are and how best to serve them, we now had to decide on what to build. To ensure we understood the risks involved and not design a flawed product, I conducted a 2 day workshop to create the product requirements, assign levels of priority and onboard the engineering team to get early feedback around our assumptions & expectations. Here are some of the key decisions made;

A decouplable experience: we decided it would be safe to design a product that can be installed or uninstalled by the user. This puts the user in a great placee where they can choose how and when to use the Local node.

Integrated experience: Unlike on the Ethereum chain, users will not have to install multiple Clients to access the local node.

Complex by nature: The local node is a complex feature, we can only recommend that advanced users access it.

Status heavy

enabling the local node

The local node comes disabled out of the box inside a Lace wallet. The user has to decide to turn it on. Since the Local Node would be a brand new feature when it launched, I saw and opportunity to use banners to educate users and as well as funnel them into the Local node option.

The design team loved the idea as well, but we could not agree on where this banner would live on the screen, I wanted a very ostentatious banner at the top of the viewport, however the team argued that it did not deserve such VIP treatment as they did not consider it a major feature.

I proceeded to A/B test two placement directions with members of the design and engineering team and the data pointed towards Option B.

Local node statuses

To enable faster troubleshooting and the level of user support we anticipated, I created a system defining statuses and errors from the local node. This system sorted all 7 possible statuses into just 4 to not overwhelm the user at any point.

  1. Syncing: The local node is starting and downloading a snapshot of the chain.

  2. Synced: The local node is up to date and functioning.

  3. Internal Error: An error from the Local node

  4. User Error: An error resulting from the user's machine - Insufficient memory, Wrong clock settings etc.

These statuses have to be displayed in multiple sections across the app including: dropdown, header, send modal, and settings page. I had to create these views while making sure to never overwhelm the user with too much feedback at any time.

disabling the local node

I mentioned previously that the local node design we went with draws inspiration from PC games and how they allow you to install DLCs to upgrade your gameplay. due to the significant requirements of the local node, we made it very easy to disable the local node with one switch. We also display a banner to make sure the user does not damage their machine while this happens.

Local node statuses

To enable faster troubleshooting and the level of user support we anticipated, I created a system defining statuses and errors from the local node. This system sorted all 7 possible statuses into just 4 to not overwhelm the user at any point.

  1. Syncing: The local node is starting and downloading a snapshot of the chain.

  2. Synced: The local node is up to date and functioning.

  3. Internal Error: An error from the Local node

  4. User Error: An error resulting from the user's machine - Insufficient memory, Wrong clock settings etc.

These statuses have to be displayed in multiple sections across the app including: dropdown, header, send modal, and settings page. I had to create these views while making sure to never overwhelm the user with too much feedback at any time.

disabling the local node

I mentioned previously that the local node design we went with draws inspiration from PC games and how they allow you to install DLCs to upgrade your gameplay. due to the significant requirements of the local node, we made it very easy to disable the local node with one switch. We also display a banner to make sure the user does not damage their machine while this happens.

Local node statuses

To enable faster troubleshooting and the level of user support we anticipated, I created a system defining statuses and errors from the local node. This system sorted all 7 possible statuses into just 4 to not overwhelm the user at any point.

  1. Syncing: The local node is starting and downloading a snapshot of the chain.

  2. Synced: The local node is up to date and functioning.

  3. Internal Error: An error from the Local node

  4. User Error: An error resulting from the user's machine - Insufficient memory, Wrong clock settings etc.

These statuses have to be displayed in multiple sections across the app including: dropdown, header, send modal, and settings page. I had to create these views while making sure to never overwhelm the user with too much feedback at any time.

disabling the local node

I mentioned previously that the local node design we went with draws inspiration from PC games and how they allow you to install DLCs to upgrade your gameplay. due to the significant requirements of the local node, we made it very easy to disable the local node with one switch. We also display a banner to make sure the user does not damage their machine while this happens.

key takeaways

Managing feedback during this project was a hassle mainly due to the number of stakeholders involved as well as the overall t-shirt size of the feature. I enjoyed working with a curious team that welcomed all my questions as well as collaborating with Marco & Danilo on the user interview cohort. The feedback and insights were invalueble and proved to be pivotal to the successful launch of the Local Node feature.

credits

Thanks to this incredible team we exceeded expectations, S/O to them:

Research

Marco Pocai

Kemdirim Akujuobi

Engineering / QA

Dmitri Geico

Michal Rus

Product design

Kemdirim Akujuobi

Product Management

Kemdirim Akujuobi

Princess Akari

key takeaways

Managing feedback during this project was a hassle mainly due to the number of stakeholders involved as well as the overall t-shirt size of the feature. I enjoyed working with a curious team that welcomed all my questions as well as collaborating with Marco & Danilo on the user interview cohort. The feedback and insights were invalueble and proved to be pivotal to the successful launch of the Local Node feature.

credits

Thanks to this incredible team we exceeded expectations, S/O to them:

Research

Marco Pocai

Kemdirim Akujuobi

Engineering / QA

Dmitri Geico

Michal Rus

Product design

Kemdirim Akujuobi

Product Management

Kemdirim Akujuobi

Princess Akari

key takeaways

Managing feedback during this project was a hassle mainly due to the number of stakeholders involved as well as the overall t-shirt size of the feature. I enjoyed working with a curious team that welcomed all my questions as well as collaborating with Marco & Danilo on the user interview cohort. The feedback and insights were invalueble and proved to be pivotal to the successful launch of the Local Node feature.

credits

Thanks to this incredible team we exceeded expectations, S/O to them:

Research

Marco Pocai

Kemdirim Akujuobi

Engineering / QA

Dmitri Geico

Michal Rus

Product design

Kemdirim Akujuobi

Product Management

Kemdirim Akujuobi

Princess Akari

Maintained by Kemdirim

© 2024

London, UK

10:47 AM