Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /autoinstalator/wordpress3/wp-content/plugins/revslider/includes/operations.class.php on line 2695

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /autoinstalator/wordpress3/wp-content/plugins/revslider/includes/operations.class.php on line 2699

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /autoinstalator/wordpress3/wp-content/plugins/revslider/includes/output.class.php on line 3581
Payzard website plugin – UX design portfolio – Maciej Karpinski

Payzard

To connect payments easier

Payzard is a plugin for websites that makes possible to add credit card payments without a single line of code. With a set of wizards, a website owner can create payment buttons or subscription plans. Users can track their sales and transactions in payment dashboard.

Payzard.com

Problem and idea

How to connect any possible payment gateway when you have no development skills and low budget? How to create a subscription-based business without hiring a developer to set complex back-end? Those are common questions among entrepreneurs who just want to set up a small website and start selling to see if they are on a correct track. We decided to find a solution for those needs and WordPress, Weebly and Wix were taken for a start.

UX designer toolbox

Research

Analysis of competition
Interviews
Tests and validation

Design areas

Customer Jurney
Paper prototyping
Wire-frames
Prototyping
High-fidelity prototyping

Tools

Paper & Pencil
HotJar, Google Analytics, heat maps, polls
Photoshop, Illustrator
InVision App, Axure
Business Model Canvas
Value Proposition Canvas

From Business Model Canvas to MVP

As an UX/UI designer, I had full ownership and responsibility for the product and its user experience. This project started as a small workshop on Business Model Canvas and led through different concepts, paths and scenarios. Paper wireframes and many prototypes were created to find possibly the easiest way of connecting payment gateways. All without coding skills.

Wireframes and prototypes – multiple solutions to find best possible user flow

It took many iterations, ideas and tests within our team to get a common agreement. The process was meant to be simply even for a grandpa. The most challenging parts were selecting only most needed functionalities to fulfil needs, identifying and removing redundant actions.

Payzard - animation

UI and interactions

All interactions and UI elements were created from an idea, through paper, prototypes and Photoshop. The process still needs a lot of improvements, but we keep testing, tracking behaviour and fixing slips and errors.

payzard-user-flows

Pixel-perfect, last but not least

Final things were website, logo, name and video tutorial. Also, there is a blog where the most common problems or questions are tackled.

The project is in an early beta stage now. Still, there are many bottlenecks in the setup flow to fix.

Backlog is full of ideas, improvements and things to fix. In UX and software development job is never done.

Dashboard screens