Mantis Wallet

Design and bring to market the most secure native wallet for Ethereum Classic

Client

IOHK

Duration

4 weeks

Live project

View

Source files

.sketch

My scope of work

Wireframes > UI motion graphics > Full mobile-first web design > Full redesign of native Mantis Wallet UI

My role

UX/UI designer working with the lead designer to deliver an on-brand UI for the native wallet. I also produced a mobile-first website to launch Mantis to the market. The lead designer owned the branding, I owned the UI and front end design.

The wallet

Audience

ETC holders

Insight

No trust in ETC

Platform

Native OS

Device

Desktop only

The problem

51% attacks on the ETC blockchain caused token holders to lose trust in the network. IOHK's response was Mantis.

They already had a prototype of the wallet named Luna, but it was far more extensive than required with too many features for the native ETC version. It needed to be stripped down and rebranded. This was my opportunity to create a rich, on-brand UI which would be like no other DeFi wallet on the market.

Original Luna Wallet prototype

Logo development by Lead Designer

Final logo by Lead Designer

The solution

The Lead Designer already created a logo and the name Mantis was already decided. I had the freedom to work with the logo, colours and fonts to triage out the unnecessary feature sets ready to begin designing the new user interface.

The final wallet designs

Overview

The wallet design was inspired by the shapes within the logos, using them as a device to point at elements in the UI such as the available balance, currency and headings, giving users visual guidance.

The other main element of the design was typography. Something that's completely lost on all other wallets on the market. Using typography to enhance the experience and guide the user to key information really gave it a lift and set it apart.

Download Mantis Wallet

Final wallet UI design - Dark mode

Final wallet UI design - Light mode

Development

I began by gathering all of the features and functional requirements into a basic layout ready to be arranged. I tried different list types, navigation positions and ways of using the brand as a device to point at elements in the layout.

Other ideas

I wanted to create a wallet unlike any other on the market, so I really wanted to push the boundaries of what a DeFi wallet looked like and how a different UI could enhance the experience. These went a little too far but were worth a try.

See it in motion

Interaction animations really help with guiding the user through pages and settings in the journey. I created these animations in After Effects to hand to the developers to integrate into future releases.

I wanted to create a sense of ambient, real-time updates within the wallet, so added just enough motion in the background and balance updates.

The website

Audience

ETC community

Insight

No trust in ETC

Platform

Browser

Device

Mobile-first

The problem

Mantis exists due to multiple 51% attacks on the ETC blockchain. The DeFi community didn't trust the system and needed a more secure way of storing tokens.

Other clients were built by 3rd parties, so having one which was designed and built natively for the ETC blockchain offered unrivalled levels of assurance, security and usability.

The solution

A brand for the community

The website needed to deliver the key information to the DeFi community about why Mantis was secure, easy to use and high performance, while also being the place users can download the desktop wallet, try the testnet and explore the full system documentation.

View it live

Full mobile-first design

User selects Enterprise

The design

Process and output

The Lead Designer chose black and white photography of diverse people in their 20s and 30s to directly approach the DeFi community, and of bamboo to reference the Sagano testnet. Sagano being a type of bamboo.

I quickly developed the layout based on the requirements set by the product owners and the copy was developed by them from my suggestions.

Tiny diamonds were used as a nod to the ETC currency symbol and to guide the user down the flow of the page. Large shapes taken from the logo were used as a device to separate sections of content apart and further aid pace of content.

I also provided the developers with further UI animations for buttons, links and for connecting the wallet as the user scrolls through.

Download .sketch

Primary CTA (dark) hover

Secondary CTA (dark) hover

Wallet connect animation

How did I get there

Wireframes

This was a super quick project with a tight deadline set by Charles Hoskinson. So I went straight into wireframe mode armed with a short list of requirements from the product owners. A lack of content at the start made it essential for me to fill in gaps and use the wireframe to brief in the functional requirements and content for headlines, CTAs, videos and imagery.

Full mobile-first wireframes

Design development

Here's some examples of different layouts and concepts which I interpreted from the wireframe. It turned out that the wallet wasn't as high priority as the entire client and docs, so images of the UI weren't used in the hero in the final design.

It was also decided that images of people would lift the brand and help create a sense of trust within the DeFi community currently on the ETC blockchain.

Exploring colour, shape and layout

Introducing photography and guidance

The future for Mantis

What's next?

Mantis is available to download and install on your machine and is still receiving updates and improvements in new versions of the app. The website is still receiving front-end and performance improvements.

Download Mantis Wallet

Next project:

Work with me, baby!

Get in touch

(+44) 07934014543