Design and implement a UI for Ethereum Virtual Machine (EVM) compatible cryptocurrency wallet that implements InstantShare Ltd.’ decentralized blockchain P2P messaging SDK and AppNet ID SDK.
Roles
UX Designer, Frontend Engineer
Tools
Flutter/Dart, EVM, Figma
Duration
3 weeks
Research
My research centered on determining competitors and understanding how they tackled similar issues. I analyzed wallets like Coinbase, Blockscan, WePay, and Status and messaging apps like Apple Messages, ADAMANT Messenger, Signal, WhatsApp to study their UI and features they implement.
Findings
Users can only send one asset at a time.
Users need to see their public key, balance, tokens, and NFTs
Features: create wallet, generate mnemonic, log in and out, send tokens, mint NFTs, discovery page of future features, change network, and access private key
Design System
My design system balanced InstantShare Ltd’s previous design language and branding with this project’s specific needs. The predominantly turquoise palettes alongside large buttons, clear iconography,
and a bold sans-serif ensured the app conveyed the modern promise of cryptocurrency and InstantShare Ltd’s innovation of that technology.
Colors
Fonts
Buttons
Navbar
Mockup
Given the features from the engineering team, I created various mockups for each page of the app to hone the best user experience.
Log In
Setting
Wallet Page
Chat Page
Reiteration
Due to the short timeframe of the project, many features were unable to be implemented. Thus, I simplified the UI in order to better reflect the
reduced scope of the project.
Implementation
I began to implement the UI concurrently with the feature development as well as my various reiterations.
Problems
How to create adaptive components to build the chat UI?
How to quickly generate an adjustable color scheme?
Solutions
Create an abstract class called messages which contains all information common to all types of messages. Create concrete classes called TextMessage, ImageMessage, and SystemMessages to contain information specific to each message type. Each concrete class is rendered as a text box and the whole chat log is displayed as a list of text boxes.
My color system was generated from a turquoise seed color using the flex_color_scheme package and rydmike.com.
Next Steps
Potential Improvements
Since the project has been deployed, we hope to get feedback and perform user testing to improve user experience.
Better defined functionality of each page of the app. The home page acts as the wallet as well as the profile page. These should be split into two pages.
More organized app flow.
Lessons Learned
Visual language and organization of cryptocurrency wallets and messaging apps.
How to reiterate designs during production of an app and work with engineers.
How to implement UI in Flutter.
New blockchain technologies that were implemented in this app and features we hope to implement.
How to use Version Control systems like Git to produce the app alongside a team.