Astra Reward
mobile app

On
App Store
and
‍Google Play
Released 19 June 2023

The brief

Astra Reward is blockchain-based reward app that helps customer to self-custody their rewards, and use them to exchange vouchers, and stake to earn even more rewards.
The goal was to release first version of an app by 1 June to test if user interested in the app. Target to have 100k users at the end of 2023
We built this app from scratch in 2 month. I help team to explore visual style of an app. After deciding with app’s art direction I started designing wallet section.
I build features to let users to view Astra and other token balances, transaction history, send, receive, swap, stake to earn rewards, connect to dApps, and sign transaction from those dApps.

The approach

Get high-level requirements from stakeholders
Define user stories, MVP, information architecture, user flow
Explore visual styles and find visual matching target persona
Design features and simultaneously create a component library
Test, fix issues

User stories mapping

After talking with stakeholders, we got an idea of the kind of user needs we need to cover. With the design team, we defined user stories and what we should include in the first version
User stories for all sections

User stories for
wallet section

About the
design process

In this project, time was of the essence. Our main objective was to get the app's first version out by June 1st. After laying out the user stories and scope, we decided to dive into development right away. Since we didn't have the resources for user research, we relied on 'expert reviews' and 'competitor analysis' to come up with a solution primarily based on our experience.

Explore visulal direction

We created four options. After conducting surveys internally and among 20 participants, the dark option received the highest scores
⭐
4.51
Visual aesthetics
🔥
Stylish
& pop
First impression
⭐
4.33
Colors
⭐
4.42
Typography & readability

Wallet home

It’s time to design wallet section. After conducting competitive analyses of the best cryptocurrency and traditional wallets, I identified some key patterns
The balance is prominently displayed at the top, followed by main actions
The recent transaction history is available on 
the home page as it's not overloaded
Balance of other assets in case user has it. For MVP it’s only USDT

Staking Astra

Users are interested in the staking feature because it offers an easy way to passively earn more tokens while also contributing to network security. To make this feature accessible to a wider audience, we have chosen to use the term 'savings' instead of staking
Users who haven't staked yet will see the benefits highlighted with a banner.
Real-time staking interest rates motivate participation
Users can always track their staked coins
Key staking details, including name, APR, staking amounts, unstaking amounts, and rewards, are presented in simple terms

Send Astra

With just a few taps, you can send Astra swiftly and securely
Paste or scan your address quickly
Confirm seamlessly with Face ID
It's done

Transaction history

Transaction history UI is minimal, without unnecessary dividers or placeholders, making it easier for users to focus on the content
The icons for transaction types and the use of color accents add a fresh touch to the UI
Rather than linear text, I highlighted key transaction details for a more engaging experience

Custom icons
and illustrations

An essential aspect of the app's graphic concept is the use of icons. To save time, we utilized an icon pack with many essential icons. But some icons were missing, so I drew and added them to the pack while maintaining the same style for consistency.
I also created illustrations to better explain certain blockchain features and make the UI more dynamic.

Transaction details

Blockchain transactions are complicated. After discussions with the tech team, I got the information to design detailed transaction.

Wallet connect

Astra Wallet is a blockchain-based app, so it allows users to connect with various dApps out there to access even more benefits

Sign transaction

Every time a user makes a transaction on a dApp, they need to approve it in the wallet for security reasons. Typically, other wallets use technical jargon that can confuse even advanced users. I've simplified these terms so that all users can understand them.
❌
Technical jargon
and excessive information may not be user-friendly or particularly valuable to most users
Other wallets
Astra Reward
✅
Simple terms presented 
in visually appealing way helps user understand what is going on

Component library

In parallel, we built the component library, made adjustments, and improved it.

Some problems

Sending flow
Some concepts, like sending ASA, could be made more convenient. Instead of using a wallet address, we could use a phone number, email address, or username. Additionally, a contact book could be a valuable feature. Instead of typing the phone number or address every time, users can choose from a list they've saved, saving a lot of time. These features are planned for the next sprints
Staking flow
Staking is a beloved feature among users, and it also contributes to the security of the blockchain. However, it's web app-based and not integrated internally. This web application hasn't been adapted for the mobile version, and the terminology used is quite technical. Therefore, we need to develop a native experience and simplify the terminology in this context.
Technical jargons
There are still complicated blockchain terms in the app, such as “seed phrase”, “liquidity”, 'farming,' 'slippage,' and more. We need to find a way to simplify these terms, or if that's not possible, educate users using examples and stories to help them understand more easily. However, these features is primarily intended for advanced users who are familiar with blockchain, so even it's technical it shouldn't affect mass users, because they don't use it.

Astra Reward app

On
App Store
and
‍Google Play
Released 19 June 2023

The brief

Astra Reward is a blockchain-based reward app that helps customers self-custody their rewards and memberships, allowing them to use these rewards to purchase vouchers, exchange them, and stake them to earn even more rewards.
The goal was to release the first version of the app by June 1st to gauge user interest. The target is to have 100,000 users by the end of 2023.
We built this app from scratch in just two months. I helped the team by exploring the app's visual style. Once we decided on the app's art direction, I designed the wallet section. I build features to let users to view Astra and other token balances, transaction history, send, receive, swap, stake to earn rewards, connect to dApps, and sign transaction from those dApps.

The approach

Define user stories, MVP, information architecture, user flow
Explore visual styles and find visual appeal matching target persona
Design features with UI and simultaneously create a component library
Test, fix issues, iterate

User stories mapping for wallet section

User stories mapping for wallet section