Jaxx Liberty

Cross platform blockchain wallet, exchange, markets and news - all in one app.

Overview

Given the opportunity to design an app from scratch and have full creative control is every designer’s dream. Though challenging and requiring scalable insight, it can also be extremely rewarding. My primary tool of choice for this project is Sketch, which is well suited for building design systems and working with components.


The Process

The process for this project involved 7 stages - competitor research, design thinking, low fidelity wireframes, visual designs, design hand-offs, design implementation, and UI audits.

 

1. Competitor Research

Research was done on five cryptocurrency wallets (Exodus, Atomic, Coinomi, Coinbase, and Mycelium) who were direct competitors to Jaxx Liberty at the time. Each wallet's strengths and weaknesses were explored. The outcome of the research established MVP features and helped identify opportunities to help set Jaxx Liberty apart from the competition.

2. Design Thinking

Design thinking workshops were held with relevant stakeholders in order to identify persons and outline user journeys. The outcome of the workshops identified three personas - the Newbie investor, the Casual investor, and the Diligent investor.

User pain points were identified - that being intimidation, lack of trust, and complexity of the crypotocurrency space as a whole. Various opportunities were also identified - that being simplifying the UI and adding win states to instill confidence in the user.

3. Low Fidelity Wireframes

For this project, the wireframing process needed to be condensed due to the aggressive timeline for delivery. The wireframes were presented to the stakeholders, then revised based on feedback.

4. Visual Designs

Once the wireframes were signed off on, visual designs were explored. The primary design tool used was Sketch, which allows for infinite artboards and is well suited for creating UI components. The visual designs were presented to the stakeholders at various stages, then revised based on feedback.

5. Design Hand-Offs

After the visual designs were signed off on, the final designs were handed off to the front-end developers. All artwork was designed using Sketch. Using the Sketch Measure plugin, developers were able to easily implement to spec. Flow diagrams were also provided. All icons were provided in SVG format. All functionality was broken down into epics and stories and logged using Wrike.

6. Design Implementation

Adopting an open line of communication between designer and developer is integral in making the implementation process effective and efficient. As developers complete minor milestones within a sprint, UI audits are conducted which catch any major defects early. Fine tuning can also be done during this stage.

7. UI Audits

UI audits are conducted on the staging environment after developers complete design implementation. All defects are documented, fixed and audited again. This process is completed until the UI looks as intended.


Challenges and Solutions

Working in a cutting edge industry created very unique challenges which provided opportunities to design for solutions rarely encountered in traditional industries.

The main challenge with this project is ensuring that all UI components are scalable and flexible to accommodate different scenarios and also adapt to multiple viewport sizes. Diligent research, planning, and feedback sessions were done early in the design process.

 

Establishing Patterns

UI patterns and heirarchy are established early on. From the intro page, the user inherently learns that the primary colour "orange" represents the main call-to-action.

This pattern is repeated throughout the app. Subsequent pages use blue buttons and text links to represent secondary or tertiary call-to-actions.

 

Keeping it Simple

Getting started with using cryptocurrency apps can be extremely intimidating and nerve-wracking. Cryptocurrency is by nature very technical. In most cases, the user does not need to be exposed to this. By keeping the UI simple and only showing the user what they need to see retains user focus and removes some of the intimidation factor.

 

Win States

Win states are implemented throughout the app after successful actions are completed. This inspires confidence with the user - not only in using the app, but in the cryptocurrency ecosystem as a whole. Win states are shown to the user after every send transaction, exchange transaction, and successful wallet backup.

 

Wallet Widget

The wallet widget carousel needed a scalable solution needed to accommodate an infinite number of pages.

A custom built auto re-sizing trackbar expanded and contracted based on the number of pages - much like the scrollbar on a web page. The more pages, the shorter the trackbar and vice versa.

 

Tabbed Navigation

As more modules were added to the application, tabs were introduced as quick links to each module. The main modules were housed on the default view, and secondary modules were accessed by on the expand arrow.

 

Adopting for Desktop

The home page for desktop needed carefully design consideration to adopt the one page card style design. Widget re-order functionality was removed. Cards were laid out in order of importance and sized to take full advantage of the dimenstions of desktop.