My scope of work
Wireframes > UI motion graphics > Full mobile-first web design > Full redesign of native Mantis Wallet UI
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.
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 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
Final wallet UI design - Dark mode
Final wallet UI design - Light mode
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.
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.
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.
Full mobile-first design
User selects Enterprise
Primary CTA (dark) hover
Secondary CTA (dark) hover
Wallet connect animation
How did I get there
Full mobile-first wireframes
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