Project

"Fish" Design Challenge

A design challenge showcasing my process of creating a e-wallet for gamers.

Fish is an e-wallet concept designed to streamline your financial transactions and bring a new level of simplicity to your digital wallet experience. I thoroughly enjoyed the process of brainstorming, iterating, and conducting testing to deliver an innovative solution that redefines digital payments.

Info

Role

Product Designer

Timeline

7 Days
Overview

Problem

How can we make Fish more beginner-friendly, ensuring that users, regardless of their financial expertise, can easily navigate the platform?

Outcome

90% of the users felt that the interface was easy to navigate and understand.
Uncovering issues

User research -
findings & insights

To gather insights into users’ needs, pain points and behaviours, I conducted 5 user interview sessions.

60%

of respondents felt that there are many technical terms and it can be difficult for beginners to grasp.

"... I had to search for the meaning of the technical words by ... else I wouldn't know what they mean”

80%

of respondents agreed that existing platforms may not be very beginner friendly

"there are many features going on ... I dont know which core features that I should know of"
Uncovering issues

Who Exactly Are These Users?

Since there are different types of users (experienced vs non-experienced), I decided to narrow down to 1 user. I wanted to understand the context of this person, his/her pain point and needs.

Gamer boy

Pain Point

Confusing jargon
“What is a test network?”
“What is slippage?”

Characteristics

Tech-savvy but not crypto-savvy
Experienced in gaming
Limited crypto knowledge

Needs

Simplified terminology
Guided onboarding
Educational Resources
Empathise

Journey Mapping

Visualising the user flow of making their first in-game purchase

01

Game play

User plays the game, connects their wallet to the game, and then opens the wallet app to begin the registration process.

02

Add value to the wallet

User explores the wallet’s interface, adds fiat currency to the wallet.

03

Purchase game token via exchange

User purchases game token via exchange using fiat currency.

04

Link wallet to the game

User links wallet to the game and purchased game token is being reflected in the game account.

05

Purchase in-game assets

User makes his/her first in-game asset. Success!

Define

Assumptions

I came up with assumptions for this project to guide my initial planning and decision-making. They serve as hypotheses to be validated.

User Familiarity

Users may not be well-versed in blockchain technology and cryptocurrency

Users may need simplified explanations and educational resources

Device

Users will primarily access the app on mobile devices

Game Token

Game tokens can be purchased through our platform and spent on the game after linking your wallet

User Trust

Users trust the app to manage their cryptocurrency securely
Ideate

Low fidelity - sketches, ideas & flows

I brainstormed various solutions and user flows, solidifying ideas and visualising how I wanted the interactions to work.

I got inspirations from close competitors to ensure that Fish incorporates the best practices and user-centric functionalities.

lofi sketch
Prototype

Hi-fidelity Prototype

After some initial sketches, I created hi-fi wireframes to build out interactions and flows to test with users. The following shows the mobile version of the application.

Thought Process

Grid

Throughout the designing process, I used a 4-column grid to provide structure and alignment. I ensured that elements such as text blocks, graphs and image components were aligned and spaced appropriately.

screenshot of grid usage
Thought Process

Accessibility

I used a colour contrast checker to ensure that the texts are readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standard.

accessibility checker
Thought Process

Components

To ensure the sustainability of the design, I created reusable components that could be efficiently appliedacross various parts of the project. This is also to ensure the consistency of the design throughout.

components
Test

Usability Testing

I conducted a  usability test involving five participants to assess the clarity, successful task completion, and overall comprehension of the various features I had implemented.

before
Before
Some testers thought that the homepage will have the buying feature when making a transaction since it's a wallet app.
after
After
To address this, the wallet tab is the homepage and the analytics page is now labelled as "portfolio".
before
Before
On the transaction confirmation page, users voiced that they would want to be able to edit their wallet address if they decide to change at this stage.
after
After
To address this, I added an edit button to allow them to change their wallet.
before
Before
Users wanted more security feature before approving a transaction.
after
After
To address this, I added 1 more page where users have to verify their identity before approving a transaction.
Branding

Building a brand identity

Due to the time constraint, I created a brief branding kit which will ensure the consistency of the overall design where I crafted key aspects like typography, colour schemes, buttons and shadows.

design system
design systemdesign systemdesign system
Lessons Learned

Reflecting on the project outcomes

Time was my biggest constraint. If given more time, I will improve by conducting:

A/B Test

1 decision I had to make in my 1st iteration was making the portfolio asset our default
page instead of the wallet page.

When prompted during the interview, users already had a preconceived notion, which might lead to bias in their responses.

The A/B test that I would conduct is to experiment with the portfolio section or the wallet as the homepage and retrieve data on which will result in higher user engagement.

Additional User Interviews

I will continue improving on my 2nd iteration and focus on improvingspecific pain points.
Despite the limitation, the insights gained and the initial design concepts still benefit the future iterations of the project.
Snippets

Gallery UI

Thanks for stopping by!
< Designed and developed by me >
© 2024 Ryedesign.co. All rights reserved.