BLOCKCHAIN

Althea Mobile Onboarding Concept


View the InVision prototype

RESPONSIBILITIES

  • Gather requirements and business goals for the mobile application
  • Visual design overhaul with reimagined brand experience
  • High fidelity click through prototyping

Context

Althea is vision for a faster, cheaper, decentralized internet. It utilizes blockchain technology as a means to incentivize people to build networks from the ground up. Local communities can be empowered to setup their own infrastructure and provide internet access. However, with such a focus on grassroots organization there arises a need for making complex concepts easily and quickly understood.

Problem

Let's say you're a new user and you'd like to connect to the network and access the internet. Assuming that the Althea infrastructure is available in your neighborhood, you still need to setup your gateway (similar to a router), purchase tokens, and then set your preferences for speed and price. With so many steps and new concepts to understand the entire experience can be very overwhelming for most people.

How might we simplify the onboarding flow for new users while making sure they understand the key concepts of using the product?

Challenges

Any truly decentralized blockchain technology these days presents the usual challenges: key storage and asset purchasing. The learning curve is always steep, and often this core concept is a barrier to getting true utility from the product. Frustration at this step can lead to abandoning the rest of the process.

Additionally, a unique challenge to Althea is the fact that users can choose who they get their internet access from on a granular basis. One neighborhood may eventually have five to six different local providers all offering access at different speeds and different prices. There's no mechanism (yet) for monthly subscriptions or lock-ins so users and freely switch when they decide another provider is better for them. Designing an easy-to-read display that helps people understand the trade-offs they are making with each provider can be a mind-boggling task. The more providers there are, the more decision paralysis sets in.

D'oh!

Process

Althea had provided some rough wireframes of the main concepts that needed to be designed. This included a home screen, a wifi configuration screen, a payment screen, and a screen showing nearby neighbors offering service.

The basic concepts reflected a mobile style homepage with app icons leading to other screens.

The screens seem simple enough, but when actually going through the user journey the flow becomes much more confusing. Which screen should I go to first? Is there an order I should follow? In addition some screens may be more important than others, but that isn't apparent in this wireframe.

After the initial review I hopped on a call with the founder to better understand what his goals were and what a typical user interaction might be. From there I categorized the important stages of the journey and what users would need most at each stage:

  • 1. Initial Setup
    Account name and password, and wallet creation
  • 2. Depositing Funds
    Seeing your balance (or lack thereof) and adding to it
  • 3. Getting Internet
    Understanding your options for speed and price (cents per gigabyte)

Given this journey, I was able to prepare a design that simplifies the journey for the user and presents information only when necessary, while offering flexibility for more advanced options.

Design

In order to ease users into the setup process I decided to start with something familiar: Setting the router name (SSID) and password. By starting with this we're not only introducing users to concepts they already know when setting up home internet, but it allows them an opportunity to save and store their private key for the crypto account as well.

Start with familiar concepts before moving to more advanced interactions.

After finishing the initial setup we come to the home page. In the initial wireframe there exists a lack of explicit hierarchy making it difficult for the user to fully understand what to do next. To mitigate this we make the account balance a prominent display and post a warning that the account needs to be funded before connecting to the internet.

The 'Add Funds' button is the clear call-to-action. Connection options are disabled until funding is achieved.

Finally, the last two major user flows that needed to be reconciled were the 'Service Quality/Price' tradeoff and the 'Neighbors' screen. These were arguably the most foreign user flows and would invite the most friction into the journey. A user might go to the Neighbors screen to view the price and quality of neighbors around them. After that, they would adjust their price tolerance and service quality/price tradeoff in another screen to get the connection they prefer.

The Neighbors screen wireframe showing who you can connect with and important quality and price information.
The quality/price tradeoff would be represented on a slider scale. Disclaimer: This screen capture was taken from an older version of the Althea gateway.

The interaction seemed clunky at best but an obvious solution wasn't immediately recognizable. There were a few things that ran through my mind at this point. First, it seemed that the Neighbors screen wasn't imperative to the initial setup process. As a user trying to get internet, you'll just want to know how you can get it and at what price. Second, having a slider for a price quality tradeoff seemed quite opaque. How good is the service you're getting? How much am I exactly paying? Is there a way to know how much I'm being charged at any given time?

To achieve the goal of transparency and ease of use, I obscured the 'Neighbors' screen and proposed aggregating connections to present users with three concrete price/quality points.

By obscuring all possible connections behind a minimum quality bar and a maximum price bar with a short description, connection options are easily understood.

Despite an easier-to-use interface, the founder expressed that it would be technically  difficult to implement. Aggregating the available connections and crunching the math needed to make the guarantees in the interface is not a trivial task, but he agreed that this would be an ideal state to take the product. People don't mind paying less or getting better service than expected. It's when the opposite happens that people take to the streets.

Conclusion

Truly decentralized blockchain services is an exciting intersection of technology and user experience. The efficiencies can render a great amount of cost savings, but as a result, concerns normally taken on by large centralized entities will be handed off to individuals. It remains to be seen if people are willing to make those tradeoffs and assume those responsibilities. If they do, I have a hunch it will be catalyzed by well-designed, intuitive, transparent, and safe experiences that ease people into this new reality.

Let's Talk 📨

hello@stevenyuan.design