Abacus

Project Overview

User experience in the crypto industry has constantly been criticized for being too difficult and confusing.

For Abacus, we set out to provide all the advanced functionality capable in a multichain crypto experience with an interface that is simple and easy to understand for the average user. Abacus is a decentralized non-custodial browser extension and app with all the features of a crypto wallet, plus features native to the Cosmos crypto ecosystem, such as multichain swaps and IBC transfers, staking permissions, and feegrant permissions to delegate actions to other public keys.

Problem

At Strangelove, we were handling a high volume of crypto assets across multiple chains. We were using tools to manage these assets, but we found them to all be clunky, or not designed to the quality we were used to in the product space. We also had some advanced interactions we knew were possible in the cosmos ATOM SDK that we could not leverage in the current set of asset management tools. Thus, we set out to build our own asset management tool. We were confident in our design abilities and felt there was an opening in the market to build a consumer facing asset management experience that brought in all the advanced interactions needed by power users.

Solution

Our solution was to follow human-centered methodologies to provide an asset management experience that covers all the needed functionality of advanced users and an accessibility level that allows for average users to use the product. All of this with a best in class visual design.

Background

Strangelove Crypto Inc was a multifaceted crypto solutions company. We had resources spanning from venture, to validator management, to technical consulting, and a product design service which I lead. Strangelove has since consolidated into technical consulting and validator services. As cofounder I identified a gap in the market of design services for the Cosmos crypto ecosystem, which was in need of UX, Branding and visual design support. Our mission to elevate the product experience in the Cosmos ecosystem and beyond resulted in the decision to build a next generation asset management tool, called Abacus.

Project Scope

Chrome Extension, Desktop, Mobile, Responsive Web

Team

Team of 3-10 depending on phase. Myself as team lead, one UX Designer/Researcher, one Product Designer, 1-5 developers.

Management Process

We used the ShapeUp methodology pioneered by Basecamp. This consisted of multiple phases, an initial user research phase, followed by intensive user story mapping. In production we worked in design sprints with a fallow week, which is used for debugging and revisions after a 2 week sprint. To learn more about Shape Up follow this link.

Research and Discovery

Research Goals

With our research we wanted to get an assessment of what features are the most important to average users, and what are the up and coming features we should consider integrating to make sure we launch a wallet that can be considered Next-Gen.

Methods

Competitive Audit, Expert Interviews, User Interviews, User Testing, Live Demos

We provided live demos at ETHCC with our primary target of conference attendees.

Ideation and Concept Development

Brainstorming

Brainstorming came after rigorous competitive audit and an initial round of user interviews and sector expert interviews.

Sketches and Early Concepts

[Couldn't find my initial sketches. As with most early design documentation, this is disposable.]

Wireframes

Below are some examples of our initial wireframes. We built out a full lightweight prototype and used that as a blueprint to create our design system and final designs. Wires were a starting point for iteration.

Prototyping

Many core user flows were developed in parallel: Main View, Onboarding, Individual Chain Page, Fiat On/Off Ramp, Governance, Send & Swap, Deposit, Discover, Defi Pulse, Stake, Account

Design System

After the core user flows were wired up, we focused on our design look and feel with a style exploration. The screens below are the resulting design system examples.

Visual Design

after defining our style and design system, our design team produced full production-ready designs for Browser Extension, Mobile, and Desktop platforms. Figma Prototype here.

Onboarding Experience

Leveraging Capsule Authentication Platform for passkey creation:
Link Here

Implementation and Handoff

Collaboration with Developers

We had a fully fleshed out design document in Figma before we moved into development. In this way, there was a waterfall style handoff, but the designers worked closely with the developers at this stage to answer any questions and extend on any interactions that were unclear for the developers. Devs also leveraged Figma's new Developer View to easily integrate components.

Challenges and Solutions

We had some issues defining interactions that were easily solved by designers checking in with developers.

Our biggest challenge was market related. We had trouble with our budget getting cut after being about 75% of the way through our development phase. We needed to shelf the project for budgetary concerns, which was a major setback for the team.

Reflections and Learnings

What Went Well

The Human-Centered Design Elements of this project went extremely well. We integrated user interviews and testing at every phase of the design process to validate our ideas. We were able to follow a complete design cycle from research and insights, to experience mapping, user story writing, backlog creation and design handoff. The process was textbook.

Challenges

Our biggest challenge came due to market activity. We had a budget allocated for this project that was slashed after the FTX exchange crash that severely depressed markets and reduces market desire for new wallet solutions. We were forced to stop development at a time at which the product was 90% through development.

Next Steps

After production paused we looked for more backers and had strong interest from the ATOM Accelerator DAO.