Obsidian Bank

Pay and invest in different markets!

Obsidian Bank is a fictional fintech created for UI study.

obsidian bank logo

Overview

Nowadays the world has changed very much, a lot of people uses credit card and invest in cryptocurrencies and Stocks Exchange. Some countries are using Bitcoin as main currency.

obsidian bank logo

Problem Statements

This causes problems for investors and people who wants to invest, because they need to download 3 or more apps to invest and have a bank account. This project show itself important because the user doesn’t need to put their credentials two or more times.

Solution

Due to the problem declared, the Obsidian Bank came to make the users more flexbile and less bureaucracy. The features are bank system, credit card, Bitcoin to make transactions, and invest in Stock Exchanges and cryptocurrencies in one app.

Project Members

Role

Business Designer

UI Designer

Methods & Tools

Desk research, Benchmark, User Interview, Persona, Userflow, Figma.

Teammates

Product Designer, UI Designer

Used softwares

figma icon
Figma

Design process

App design requires a holistic approach, including competitors research, creating impressive UI and focusing on how people interact with.

Research
  • Problem statements
  • General analytics
  • User interview
  • Planning
UX Design
  • Data analysis
  • User persona
  • Information Architecture
  • Wireframes
UI Design
  • Moodboard
  • Style Guide
  • Concept
  • Design system
Prototype
  • Prototype creation
  • Click map
  • A/B testing
  • Tree testing

Persona

persona

Userflow

The userflow based on our Insights from research:

Userflow

Wireframe

To go furthermore in our hypothesis test, we need the ideas of product design to test our digital product, so we’ve made wireframes and usability test.

Wireframes

Visual Identity

Visual Identity

The visual identity for the app, is based on the obsidian stone colors. And with the UI trends, I’ve used the Glassmorphism to build the interfaces.

Colors

Primary

#B19ABF#9985A6#82718C#675373#4F3F59#3D3145

Neutral

#FAF7FC#D5CED9#706B73#575359#312E33#252226

Typography

Rubik

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Interfaces

Interfaces

Promotional desktop interface

The Obsidian bank offers a special miles credit card, the name is Vulcan card, because the obsidian stone came from a vulcano, so the miles credit card is the upgrade from the Obsidian card. Made for special customers

Colors

The colors is based on vulcanos. And following the same Saturation from the primary color of Obsidian card, these are the results:

Primary

#CC6666#994C4C#7F4040#6B3636#522929#402020

Neutral

#FCF7F7#D9CECE#736B6B#595252#332B2B#120E0E
Promotional image

Reflections

The world is changing, more people has access to invest their money and thinking about make money to have less time to do some activity, so a bank offering invest system and together with cryptocurrencies, such as many countries are using Bitcoin to their main currency, and the Metaverse is a reality, and it is gaining size and space, and the main currency is made by tokens. One application to make all the stuff is the future of technology, soon the companies have to upgrade their technology.