This was an assignment as part of the hiring process at Mesha, where I redesigned the dashboard for their fiat and crypto management app. The challenge was to simplify complex financial data and create a user-friendly experience without overwhelming the user.

Not every assignment is portfolio-worthy, but this one was too fun to leave out.

Redesigning

Mesha’s home dashboard

Redesigning

Mesha’s home dashboard

Redesigning

Mesha’s home dashboard

Project brief

Create wireframes that improve Mesha’s dashboard experience. Using available information from the website, redesign the home dashboard to display multiple bank accounts in one view. Additionally, design the flow for adding more than one account, ensuring a seamless and intuitive process.

UI/UX Assignment

Company

Mesha

Timeline

2022

Wireframe

Created a high-fidelity wireframe with proper information architecture.

A consistent design system

Created a design system with texts, colours and required components to ensure design consistency.

Colors

#FFFFFF

#FAFAFA

#F4F4F5

#D4D4D8

#71717A

#27272A

#F7FEE7

#D9F99D

Primary

#D3FD70

#65A30D

#3F6212

Typography

Power Grotesk

FK Grotesk

Heading

Body

Link

Figma components*

Created the necessary components on Figma with appropriate properties.

*I’ve created only the required variants/properties for this assignment. More variants and properties can be added to support more types and states of these components.

Multiple bank accounts

A multiple bank accounts view in home dashboard.

Showing only 2 accounts to avoid cluttering. Added a stack-like UI to indicate there are more added accounts.

The CTA ‘See all’ enables to open Account tab and view all added bank accounts.

A contextual and scalable header

Made the header contextual - header content and CTAs change based on the tab selected from the sidebar.

The header is more scalable now and supports tabs. This saves the space required for a sub-header to show the tabs.

An efficient sidebar

Moved the account name to the sidebar to support contextual header.

Moved the search to the sidebar and made it into a Command Center - you can search entire product to find transactions, members, cards, accounts, etc. and can access it from anywhere in the product by pressing Cmd + K on Mac and Ctrl + K on PC.

Added organisation thumbnail along with account name to indicate its an organisation account. On hovering on the thumbnail, you can see the organisation name.

User-flow to add a new bank account*

Did secondary research to understand the information required to add a bank account and to follow platform and industry conventions.

Identified 2 sub-flows

1. Link bank account by logging into the account using online banking credentials.

2. Manually add account by entering bank account details and verify it.

*I’ve created the flow assuming Mesha supports only US bank accounts. The flow is scalable and can also be used to add bank accounts from other countries with just a few additional steps in the beginning.

Flow to add bank account

Step 1

Click on ‘Accounts’ tab on the sidebar or on ‘See all’ button next to the bank accounts card in Overview to open Accounts.

Step 2

Click on ‘Add bank account’ button on the header

Step 3

Select how you’d like to add the account (flow is split into two after this step)

Sub flow 1 - Link bank account

Step 1

Selecting bank

Loading state

Step 2

Step 3

Step 4

Success message with a toggle button to set the added account as primary.

Sub flow 2 - Manually add account

Step 1

Fill in the account details. Used interactive hints.

Step 2

Verify bank account using micro-deposit transactions. (Micro deposits are small deposits transferred to an account with the purpose of verifying ownership of the account added)