Patricia Business Web App Case Study
Building a crypto payment gateway for merchants.
Patricia business is a crypto payment processor and one of the fastest growing businesses in Nigeria. Due to the high rise in BTC in Africa, percentage of merchant have started to accept BTC as a mode of payment and patricia business is the gateway to achieving that from accepting payment instantly to simple transparent pricing, to customer management and easy pay out.
Background
Overview
Role
Product Designer
Contribution
UI Design, Wireframing, Hi-fidelity
Duration
6 Months
Platform
Web
Solutions:
Patricia business is the fastest, simplest way to start accepting online crypto payment. From sign up to receiving payment takes 10 minutes or less.
With the ease of integrations, developers are able to implement patricia business through the well documented API that enables them to build financial products serving thousands of customers. They also provide detailed reporting alert and export so you and your team are on top of your business.
Pay out is seamless and made within 24 hours which makes it easy to accept payment from anywhere in the world.
Problem
There’s no problem that
doesn’t have a solution..
You just have to find it
Merchants who wants to receive crypto as payment have no means to receive all payment seamlessly.
Understanding the core of the product:
Before doing any ideation I try to get as much information as possible regarding the project. Most times i work hand in hand with the project manager and User Researcher to come up with flows and bit of common ground for what i should look out for during Ideation. I led a team of 3 Designers (1 UX researcher and 2 Product Designers, I was charged with the responsibility of coming up with the design direction, working closely with the UX researcher and product manager to come up with the user flows and wireframes.
I worked on creating the Design system at the same time worked on designing key pages like the Dashboard, Wallet Pages, and Payment links.
Approach
DESIGN PROCESS
My process will be different in different projects and will be determined by many factors such as the project goals, business needs, complexity of the problems, time and etc. Here I’ll describe my process for solving this problem.
2 weeks
2 weeks
2 weeks
2 weeks
Discovery
Ideate
Design
Testing
Customer Journey
After we had made research and come to a common ground we put together a costumer Journey to streamline all our findings
1. User decides to start receiving payment in crypto
2. Thoughts about how there wasn’t any tailored payment gateway for merchants to receive crypto
3. He might lose costumers if he doesn’t get a long lasting solution
1. There was no platform who allowed for this.
2. Not educated about patrica businses
Dissapointed
Interest
Trust
Joy
Boredom
1. User doesn’t understand what to do when on the app
1. Difficult Interface.
2. Not tech savy
1. User no longer receives crypto as a mode of payment
1. No longer in need
of use.
1. User decides to start receiving payment in crypto
2. Thoughts about how there wasn’t any tailored payment gateway for merchants to receive crypto
3. He might lose costumers if he doesn’t get a long lasting solution
1. User signs up to app
2. Cool colors and design makes the user interested
3. He decides to use it to receive crypto payment for test
1. Sets up profile and activates account
2. See’s other features that also interests him and helps him with better sales
3. Finds out other competitors use platform
1. User receives crypto payment
2. User manages costumers through platform
3. Receives his payouts which makes him happy
1. User no longer receives payment in crypto
2. Interest shift
Aware
User goals
Process
Problems
Experience
Ideas
Join
First User
Long Use
Quit (Maybe)
1. User signs up to app
2. Cool colors and design makes the user interested
3. He decides to use it to receive crypto payment for test
User wants to receive
payment in crypto
1. Sets up profile and activates account
2. See’s other features that also interests him and helps him with better sales
3. Finds out other competitors use platform
User found patricia business and set it up
1. User receives crypto payment
2. User manages costumers through platform
3. Receives his payouts which makes him happy
User wants to receive
payment in crypto
1. User no longer receives payment in crypto
2. Interest shift
User wants to use Patricia business to manage crypto payment from now on
User wants to find
something new
Rough Sketches:
Low Fidelity:
Ideation is the process where you generate ideas and solutions through sessions such as Sketching, Prototyping, Brainstorming, Brainwriting. A process of ‘going wide’ in terms of concepts and outcomes. Here is where we took what we gathered and started creating more detailed represnations.
Alot of Rough sketches were done to test out Direction and to also create a structure to what the product would look like. We had a list of screens to cover all scenarios. I started sketching different designs to detail out the flows to discuss and share with my team members for feedback.
Majorly due to the timeline we had, i had to create clear low fidelity wireframes on the go as i also had to get stakeholder input and feedback from my team members
Ideate
Till this point, the project had a solid idea and understanding about users and core functions of the application but no definite structure and functionality. The goal of this stage of the project was to organise and structure all the content from the research phase. In creating the basic flow, i was forced to think about each step on the path of the users throughout the solution. The basic flow initially was created on paper and after was transferred in digital format.
USER FLOW
STYLE GUIDE
Spacing
16
256
192
128
96
64
48
32
24
Heading 1
Graphik Bold 48px | Line height: 62px
Heading 2
Graphik Medium 40px | Line height: 52px
Heading 3
Graphik Medium 32px | Line height: 42px
Heading 4
Graphik Medium 20px | Line height: 28px
Title
Graphik Regular 18px | Line height: 26px
Graphik Regular 18px | Line height: 29px
Body 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Graphik Regular 18px | Line height: 33px
Body - Large Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Graphik Regular 16px | Line height: 27px
Body 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Graphik Regular 12px | Line height: 20px
Subtext 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Graphik Regular 14px | Line height: 22px
Subtext
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
Graphik Medium 15px
This is a Link
HEADINGS
BODY
Primary Buttons
Button
Button
Button
Button
Large Button
Medium Button
Default
Small Button
Extra Small Button
Button
In order to keep experience intuitive on the project, the consistent design system was built. Atomic principles were used in order to create all components of the project which could be used in future development of the project like websites, new sections of the application or printables. For the majority of elements were created at different stages like active, inactive or disabled.
Sign Up/ Onboarding
First time users:
First time users would have to sign up to be able to access the dashboard.
Users:
Users who already have gone through the sign up process would simply log in to their Dashboard
Dashboard
The Dashboard allows users to see both their BTC wallet and their Local Wallet. The graph shows an overview of transactions. Users can also see their transaction history and next payout. The side nav bar allows them to access all other features.
Profile
Nav Bar
Transaction
History
Buy and Sell BTC
Users are able to buy and sell BTC from their wallet. Since patricia business allows users to receive payment in crypto. It allows Merchants to also Buy and sell Crypto
Buy Screens
Users are able to buy and sell BTC from their wallet. Since patricia business allows users to receive payment in crypto. It allows Merchants to be able Buy and sell Crypto
Sell Screens
Payments
Merchants can see their wallets and Decide to withdraw or deposit and can also click through to their wallets from the cards.
Deposit & Withdraw
from their Local wallet
(Naira wallet)
Payment Links
When merchants integrates patricia business into their online store. They can send payment links to costumers or add them to products on their websites.
MOJOLAADE ADEGBITE