Lisk Hub & Lisk Mobile

Lisk is an open-source web3 application platform that features a native cryptocurrency for the Lisk blockchain. As a critical part of its infrastructure, Lisk needed to provide its users with tools to interact with LSK tokens and participate in the network's governance. Lisk Hub is an all-in-one solution that enables users to manage their Lisk ID, access and send LSK tokens, explore the network, and vote for delegates. Lisk Mobile offers a more streamlined set of features from Lisk Hub, designed for core actions on the go.

As Lisk’s Head of Design, I led the Product Design team in crafting the best possible user experience for both Lisk Hub and Lisk Mobile.

COMPANY
Lisk
YEAR
2019/20
TYPE
Brand

Key challenges

Lack of familiarity with crypto.

Navigating the crypto landscape of 2017 and 2018 was certainly a challenge, many users were just beginning to understand the dynamics of blockchain. Unlike traditional banking products, crypto wallets require users to familiarize themselves with numerous new concepts before they can confidently and securely trade and store cryptocurrencies. Designing a user experience that educated and guided users through this learning curve was essential.

The passphrase puzzle.

Lisk did not store user passwords, meaning that Hub and Mobile functioned as non-custodial crypto wallets. This posed a significant challenge, as users who lost their passphrase would lose access to their accounts, necessitating a definitive UX solution that emphasized the importance of passphrase management and educated users on best practices for securely storing their passphrases.

Building trust in a volatile industry.

In 2018, numerous scam projects plagued the industry, creating an atmosphere of uncertainty. Lisk wallets needed to instill trust in their users through design and functionality. Providing a professional, polished, and secure appearance, as well as an intuitive UX, was crucial in gaining users' confidence, and would also reflect on the main brand to help position Lisk as an industry leader of that period of time.

Attracting users with a comprehensive feature set.

Convincing users to download another app is no easy feat. Both Lisk Hub and Lisk Mobile were downloadable applications, and in order to facilitate this process, we needed to offer a comprehensive set of features that would appeal to all Lisk holders and users. Determining which features to prioritize and how to present them in an intuitive manner was a significant
challenge.

Balancing simplicity and functionality.

While it was important to provide users with a wide range of features, we also needed to ensure that the user interface remained clean, uncluttered, and easy to navigate. Striking the right balance between functionality and simplicity was critical to the success of Lisk Hub and Lisk Mobile.

Solution

Fostering collaboration between brand and product design.

We established processes that encouraged collaboration, leveraging the multidisciplinary expertise of our team to create a comprehensive set of solutions with diverse perspectives. Regular meetings, design critiques, and knowledge-sharing sessions allowed us to deliver high-quality outputs that ultimately contributed to earn users trust.

Providing a constant connection to users.

The team devoted significant time to designing quick and straightforward onboarding flows for each step of the process, from account creation to transactions. This aimed to bridge the knowledge gap and help users become confident in trading quickly. Tooltips were also incorporated throughout user flows, offering users the option to gather more information at any given moment. In-app messaging and contextual help further supported users as they navigated the platform.

Implementing fast iterative cycles.

We adopted an agile design thinking approach, allowing designers to continually experiment with solutions or improvements directly on the pixels. This led to rapid production cycles that resolved issues as they emerged. By utilizing rapid prototyping and validation methods, we ensured that our designs meet user needs and expectations in a timely manner.

Implementing user testing mindfully.

We partnered with well-known user testing initiatives in Berlin, such as Usability Testessen, to identify new problems and test our solutions before they reached production. We also relied heavily on online tools like usertesting.com, making user testing a critical milestone in our design thinking process. Collecting and analyzing user feedback allowed us to refine our designs and make data-driven decisions.

Making more than a crypto wallet.

We conducted extensive research and brainstorming to add useful features to Lisk Hub, making it a one-stop-shop for all things Lisk, catering to both holders and non-holders alike. Some of these features included a built-in explorer, delegate voting functionality, and access to Lisk's latest news and updates. By providing a comprehensive platform, we made Lisk Hub and Lisk Mobile valuable tools for the entire Lisk ecosystem.

Lisk Hub

Lisk Hub is the main wallet of the Lisk ecosystem, providing users with a seamless and intuitive experience for managing their LSK tokens and participating in the network's governance. First released in late 2017, Lisk Hub was redesigned in early 2019 to align with the refreshed Lisk brand, improve the overall user experience, and incorporate new features.

Account creation

Account creation posed one of the most significant challenges, as the non-custodial nature of the wallet meant that users who lost their passphrase would irreversibly lose access to their accounts. Designing a comprehensive and intuitive account creation flow was crucial, and after developing an initial set of wireframes, extensive user testing was conducted.

Lisk Hub | Account creation usability test (October 2019)

The resulting insights informed a solution that incorporated a focused experience, progress bar, large buttons, numerous tooltips, concise copy, and visual cues to emphasize the importance of passphrase management.

Lisk Hub, account creation avatar page designLisk Hub, account creation passphrase saving page designLisk Hub, account creation passphrase confirmation page designLisk Hub, account creation confirmation page design
Lisk Hub | Account creation steps

Sign in

The sign-in screen drew inspiration from the account creation process to maintain consistency and leverage users' familiarity. The design aimed for a straightforward, simple, and focused experience while minimizing distractions.

Dashboard

The dashboard served as the home of Lisk Hub, and as such, a deep effort was placed in creating the onboarding flow. It offered a comprehensive overview of all available features, presenting a summary of connected accounts and a timeline of Lisk-related information and updates. The dashboard functioned as a central hub for all things Lisk, catering to both holders and non-holders, and scalability was a key consideration in the design, providing ample space for the addition of new features.

Wallet

As the main feature of Lisk Hub, the wallet prioritized a clean, intuitive, and seamless experience that minimizes cognitive load for users. By reducing the amount and type of information displayed to the essentials and experimenting with data visualization styles, the wallet was designed to be both informative and visually pleasing.

The Brand and Product Design teams collaborated closely to create an engaging and visually attractive onboarding experience for the wallet features. Custom illustrations accompanied essential information in an inverted color scheme, ensuring that users, especially new ones, would not overlook this crucial component.

Blockchain addresses, typically consisting of long strings of numbers and letters, can be difficult to recognize and manage. To address this common pain point, the bookmarks feature allowed users to create a directory of addresses, humanizing the interaction with accounts and minimizing the risk of errors.

Transactions

The transaction flow was designed to be unobtrusive and intuitive, with clean and easy-to-navigate forms. Sending funds can be stressful, and Lisk Hub aimed to eliminate any additional friction or noise in the process through an intuitive interface that was constantly providing feedback to the user.

Delegates features

Since its mainchain launch in May 2016, Lisk has employed the Delegated Proof of Stake consensus algorithm. With 101 active delegates securing the network and actively processing blocks and transactions, voting and delegate features form a crucial part of the Lisk Hub, allowing users to participate in network governance using their LSK tokens.

While participation in network governance through voting is not mandatory for users, comprehending the voting and delegate features of Lisk's blockchain can be complex for the average individual. To foster a fair system that encourages all interested users to engage in network governance, a strong focus was placed in developing a customized onboarding experience.

To promote an open and transparent ecosystem, Lisk Hub included a delegate dashboard that offered an overview of the performance of each delegate. Accessible to both users and other delegates, this data can be used to inform voting decisions or gain insights into the performance or details of any specific delegate.

Hardware wallets

Recognizing the importance of hardware wallets as a secure method for accessing cryptocurrency wallets, the Lisk Hub team integrated the most popular hardware wallets into the platform, allowing users to log in directly from their devices. Custom screens and illustrations were created for each specific wallet model, ensuring an accurate and tailored experience for users.

Lisk Mobile

Lisk Mobile, available for both iPhone and Android devices, allows users to perform core actions such as transactions and checking account balances on the go. Released in mid-2018, Lisk Mobile has become highly popular among the Lisk community and holders.

Lisk Mobile | Release teaser from 2018

The app was redesigned in early 2019 to be more user-friendly, intuitive, and easy to use, featuring a strong focus on editorial illustrations to provide a satisfying experience for users.

Account creation

Users could create their Lisk account through the mobile application, and to keep a consistent experience across devices, the team replicated and adapted the main desktop flow for a mobile format.

Additionally, great attention was given to the welcome flow, emphasizing editorial illustrations and concise copy. User testing consistently rated the welcome flow highly, laying the foundation for a successful experience throughout the app.

Sign in

The regular sign-in process, which required manually entering the passphrase words in the correct order, was a problem for the mobile application. To overcome this challenge, the team optimized the sign in process for mobile by adding touch ID and face ID capabilities. This enhancement streamlined access to crucial Lisk account information on the go, removing friction from the typically exhaustive login process of cryptocurrency wallets.

Home

The home screen offered a quick overview of the account's recent activity. To optimize the mobile experience, the information set was reduced, and the interface simplified to provide an uncluttered view.

Transaction features

Users of the mobile app can execute transactions, which inherently involves high-risk actions. In line with the fundamental principles of Lisk Hub, the interface was meticulously designed to promote focus and ease of navigation, ensuring continuous feedback for users throughout the process.

Moreover, taking into account insights gathered from user testing, the bookmark features were seamlessly integrated into the mobile experience, further enhancing the app's functionality and user-friendliness.

Dark mode

In addition to the light mode, Lisk Mobile features a dark mode option. Dark mode offers several benefits such as reduced eye strain, improved battery life for devices with OLED screens, and enhanced readability in low-light environments. Furthermore, it provides users with an alternative visual experience, catering to individual preferences and comfort levels.

Outcome

The launch of both Lisk Hub and Lisk Mobile had a significant positive impact on the Lisk ecosystem and its community. As a result of the successful launch and continuous improvements made to Lisk Hub and Lisk Mobile, the Lisk ecosystem experienced increased user adoption and engagement, solidifying its position as a leading web3 application platform.  Both applications exceeded 50,000 downloads within the first year and were consistently praised by the community.

The user-friendly designs of the platforms and the data-driven iterative cycle with a strong focus on user testing have played a key role in demystifying the complexities of blockchain technology for a wider audience. This approach has fostered an inclusive and flourishing community around the Lisk project, which certainly resonated with Lisk’s mission of making blockchain accessible to everyone.

More projects