Silence Laboratories

Silence Laboratories

Helping developers understand and try MPC wallet security

Helping developers understand and try MPC wallet security

My Role

Product Designer

Timeline

5 weeks

Overview

Silence Laboratories builds Multi-Party Computation (MPC) into Web3 wallets and apps, so private keys are harder to steal or lose. This project aimed to create an interactive platform that allows developers to experience and implement MPC technology in their own products.

Silence Laboratories builds Multi-Party Computation (MPC) into Web3 wallets and apps, so private keys are harder to steal or lose. This project aimed to create an interactive platform that allows developers to experience and implement MPC technology in their own products.

Silence Laboratories demo app where you pick a web and cloud key setup, on desktop and phone

Problem Statement

How can we effectively communicate the concept of MPC to developers, enabling them to explore and understand how the technology works while empowering them to make informed choices?

How can we effectively communicate the concept of MPC to developers, enabling them to explore and understand how the technology works while empowering them to make informed choices?

Challenge

This project involved designing a platform around a new and complex technology: MPC. We encountered multiple challenges:

  1. Lack of Existing Examples: There were no precedents or existing solutions to draw inspiration from.

  2. Technical Complexity: The intricacies of MPC made it difficult for the client to understand the backend architecture.

  3. Frequent Iterations: Due to continuous client feedback, we had to pivot and adjust our approach many times.

We collaborated closely with Web3 developers and engaged in multiple stakeholder meetings to better understand the requirements. Despite early setbacks, we iterated on our designs, learning from each version and refining the platform.

One crucial lesson was the importance of flexibility and communication. By maintaining an open line of communication, we adapted quickly to feedback and ensured each design iteration aligned better with client expectations.

This project involved designing a platform around a new and complex technology: MPC. We encountered multiple challenges:

  1. Lack of Existing Examples: There were no precedents or existing solutions to draw inspiration from.

  2. Technical Complexity: The intricacies of MPC made it difficult for the client to understand the backend architecture.

  3. Frequent Iterations: Due to continuous client feedback, we had to pivot and adjust our approach many times.

We collaborated closely with Web3 developers and engaged in multiple stakeholder meetings to better understand the requirements. Despite early setbacks, we iterated on our designs, learning from each version and refining the platform.

One crucial lesson was the importance of flexibility and communication. By maintaining an open line of communication, we adapted quickly to feedback and ensured each design iteration aligned better with client expectations.

Our Approach

  1. Researching and Understanding MPC
    We worked closely with Web3 developers and stakeholders to fully understand how MPC (Multi-Party Computation) works. Through several meetings, we learned how key management and encryption happen behind the scenes, which helped us create a user-friendly interface that explains these concepts clearly to developers.

  2. Iterative Design Process
    Since MPC is complex, our first designs didn’t meet the client's needs. By gathering feedback and making continuous improvements, we fine-tuned the design and improved the platform's structure and user flow with each iteration.

  3. Key Design Choices

    • Minimizing User Inputs: We cut the number of fields users had to fill in.

    • Providing Recommendations: The system guides users by offering recommendations based on their capabilities, making encryption and decryption easier.

    • Security Focus: The platform explains, step by step, how MPC protects keys and data.

  4. Clear Information Architecture & Visual Design
    We designed simple, step-by-step flows that guide users through the MPC process. Interactive elements, like splitting keys into shards and verifying signatures, allowed users to perform complex actions securely and easily, without exposing sensitive data.

  1. Researching and Understanding MPC
    We worked closely with Web3 developers and stakeholders to fully understand how MPC (Multi-Party Computation) works. Through several meetings, we learned how key management and encryption happen behind the scenes, which helped us create a user-friendly interface that explains these concepts clearly to developers.

  2. Iterative Design Process
    Since MPC is complex, our first designs didn’t meet the client's needs. By gathering feedback and making continuous improvements, we fine-tuned the design and improved the platform's structure and user flow with each iteration.

  3. Key Design Choices

    • Minimizing User Inputs: We cut the number of fields users had to fill in.

    • Providing Recommendations: The system guides users by offering recommendations based on their capabilities, making encryption and decryption easier.

    • Security Focus: The platform explains, step by step, how MPC protects keys and data.

  4. Clear Information Architecture & Visual Design
    We designed simple, step-by-step flows that guide users through the MPC process. Interactive elements, like splitting keys into shards and verifying signatures, allowed users to perform complex actions securely and easily, without exposing sensitive data.

Information architecture and user flow diagrams for the Silence demo app
Information architecture and user flow diagrams for the Silence demo app
Information architecture and user flow diagrams for the Silence demo app
Information architecture and user flow diagrams for the Silence demo app
Information architecture and user flow diagrams for the Silence demo app
Information architecture and user flow diagrams for the Silence demo app
Early wireframes and configuration panel explorations for the Silence demo app
Early wireframes and configuration panel explorations for the Silence demo app
Early wireframes and configuration panel explorations for the Silence demo app
Early wireframes and configuration panel explorations for the Silence demo app
Early wireframes and configuration panel explorations for the Silence demo app
Early wireframes and configuration panel explorations for the Silence demo app
Silence design foundations: colors, Epilogue type, icons, buttons and layout grid
Silence design foundations: colors, Epilogue type, icons, buttons and layout grid
Silence design foundations: colors, Epilogue type, icons, buttons and layout grid
Silence design foundations: colors, Epilogue type, icons, buttons and layout grid
Illustrations of a phone, browser, server, keys and key shards
Silence UI components: platform selector, wallet card, key metrics, bottom sheet and toast
Silence UI components: platform selector, wallet card, key metrics, bottom sheet and toast
Silence UI components: platform selector, wallet card, key metrics, bottom sheet and toast
Silence UI components: platform selector, wallet card, key metrics, bottom sheet and toast
Silence UI components: platform selector, wallet card, key metrics, bottom sheet and toast
Silence sandbox web app with wallet actions and a restore success screen

Lessons Learned

  • Flexibility in Design: With a new technology like MPC, flexibility in design was crucial. Each iteration and round of feedback gave us valuable insights that improved the platform.

  • Importance of Communication: Continuous collaboration with developers and stakeholders helped us align with both technical requirements and user expectations, ensuring the final product met its goals.

  • Flexibility in Design: With a new technology like MPC, flexibility in design was crucial. Each iteration and round of feedback gave us valuable insights that improved the platform.

  • Importance of Communication: Continuous collaboration with developers and stakeholders helped us align with both technical requirements and user expectations, ensuring the final product met its goals.

Silence sandbox on three phone screens: wallet, restore wallet and process metrics

Create a free website with Framer, the website builder loved by startups, designers and agencies.