Recently, we released a mobile application called Hydro: Security & Identity on Google Play and the Apple App Store. The Hydrogen design team played an integral role, handling the design of the app from front to back. Read on for a recap of the process from a design perspective!
Initial Planning
We began the discovery phase by researching the priorities and limitations of dApps and the use of blockchain in mobile applications. Things in the blockchain world are both very new and very rapidly changing!
It turns out that the nature of blockchain transactions tends to make traditional UI/UX flows difficult, even for blockchain power-users. Things get more challenging when you introduce users who are not familiar with blockchain at all. Working with our blockchain engineers and the rest of the Hydro team, we understood that user experience is a critical piece of the puzzle —and it quickly became our main focus in designing the Hydro app.
Mapping the Experience
We did our initial prototyping in UXPin as it allows more flexibility in creating authentic interactions without having to code. We find this especially helpful for mobile application design.
Most of the Hydro app experience revolves around user onboarding. Early on, the team identified two major tasks for users to complete during the onboarding process, each with a series of sub-tasks:
1. Set up a wallet and obtain a unique Hydro ID.
- Generate entropy
- Store the wallet’s seed
Both elements in Step 1 are somewhat foreign to the average mobile app user, yet both are critical for security in the blockchain arena. We decided that the most intuitive way to generate entropy (i.e. random data) while engaging the user would be to prompt the user to shake the phone. To facilitate this, we designed a prominent Start button and a visual timer to guide users through the shaking process.
Here is the flow for wallet creation:
2. Link a new account.
- Input HydroID on a partner platform.
- Enter given message from partner platform into the Hydro app.
- Authenticate on the partner platform.
- Success!
The second task presented a key challenge because it involves the user interacting with an external platform. We chose to address that challenge with clear messaging broken down into small steps.
Here is the flow for linking an account:
Learning & Iterating
As we got our design into users’ hands, we received some valuable feedback that helped us improve the user flow along the way. Users consistently identified two pain points in our initial onboarding design:
Uncertainty with how to save seed words. Should I memorize them? Should I take a screenshot? Will I be able to access them in the app later on? Users who were faced with the concept of seed words for the first time were unclear on best practices and what we meant by “saving” the words. We fixed this by tightening up the messaging displayed on that screen.
Lack of success prompts. Users found that the initial app screen did not convey if the onboarding was successful or not, which led to confusion about what to do next. This led to a lot of drop-offs between the wallet creation step and the account linking step. Fortunately, we were able to rectify this problem by adding more success prompts to the user flow.
Conclusion
Our objective was to imbue the Hydro app with a sense of security and ease-of-use. In order to accomplish that, we had to address the challenges of blockchain applications — and of mobile design in general — head on! Working side-by-side with blockchain experts and our target users, we were able to craft an experience that was both intuitive and technically feasible.
We are very excited about the release of the Hydro app, and are hard at work on designing new features. We know the design process is never over, so any and all ongoing feedback will be received with open arms!
