Cartfuel web app

Payment Gateway web app

Payment Gateway web app

Payment Gateway web app

Cartfuel is a Payment Gateway Web app, that gives you the tools you need to accept one-time and recurring payments with HubSpot. Start accepting payments with fully customizable payment forms.

Cartfuel is a Payment Gateway Web app, that gives you the tools you need to accept one-time and recurring payments with HubSpot. Start accepting payments with fully customizable payment forms.

Cartfuel is a Payment Gateway Web app, that gives you the tools you need to accept one-time and recurring payments with HubSpot. Start accepting payments with fully customizable payment forms.

Client

jelani Abdus-Salaam CEO of Cartfuel

Services

UI & UX Design Web App design SaaS for B2C market

Industries

Computers Electronics and Technology

Date

April - July 2021

Dashboard Sidebar Close Up
Dashboard Sidebar Close Up
Dashboard Sidebar Close Up


What is Cartfuel?

Cartfuel gives you the tools you need to accept one-time and recurring payments with Hubspot. All sales data automatically goes into HubSpot. Meaning you can trigger workflows to follow up with customers. No custom code or complex systems are needed.

Note: Cartfuel is already designed, and information architecture is finished, But through it, they are working and trying to grow. They found some problems that need to be solved.

What did I learn through working on this Project?
  1. Learn how can I handle the work for the developer and reach the goals of the product within our timeframe.

  2. Analyze the weak points in the design and focus on solving them based on UI pattern comparison without going on deep research, So I can deliver the work on the timeline without affecting the result.

My Role:
  1. Redesign The pages with the following new style guide.

  2. Solve some user experience problems, especially on new product sequences.


The Problem

The first version of the application was created based on business needs by my client, the CEO of the platform, without considering insights from users. When the client finds that, the user starts to face problems and gets feedback about it. He is considered to redesign based on those insights. Some of those problems:

  • There are many steps users need to follow, So we need at least those steps to be organized and clear with a simple process for users.

  • Many pop-up windows. Every pop-up has a specific goal.

  • Those pop-up windows prevent user to see the changes they make.

Goals


  1. Solve the main problems I explained before.

  2. There are usability issues that need to solve.

  3. We needed to add new features depending on customer needs.

  4. I updated the user interface and found the style guide.

Old Design



How do solve the following steps to be on one page using UI patterns?
How do solve the pop-up window, so the user can see the data he changed?




What is Cartfuel?

Cartfuel gives you the tools you need to accept one-time and recurring payments with Hubspot. All sales data automatically goes into HubSpot. Meaning you can trigger workflows to follow up with customers. No custom code or complex systems are needed.

Note: Cartfuel is already designed, and information architecture is finished, But through it, they are working and trying to grow. They found some problems that need to be solved.

What did I learn through working on this Project?
  1. Learn how can I handle the work for the developer and reach the goals of the product within our timeframe.

  2. Analyze the weak points in the design and focus on solving them based on UI pattern comparison without going on deep research, So I can deliver the work on the timeline without affecting the result.

My Role:
  1. Redesign The pages with the following new style guide.

  2. Solve some user experience problems, especially on new product sequences.


The Problem

The first version of the application was created based on business needs by my client, the CEO of the platform, without considering insights from users. When the client finds that, the user starts to face problems and gets feedback about it. He is considered to redesign based on those insights. Some of those problems:

  • There are many steps users need to follow, So we need at least those steps to be organized and clear with a simple process for users.

  • Many pop-up windows. Every pop-up has a specific goal.

  • Those pop-up windows prevent user to see the changes they make.

Goals


  1. Solve the main problems I explained before.

  2. There are usability issues that need to solve.

  3. We needed to add new features depending on customer needs.

  4. I updated the user interface and found the style guide.

Old Design



How do solve the following steps to be on one page using UI patterns?
How do solve the pop-up window, so the user can see the data he changed?




What is Cartfuel?

Cartfuel gives you the tools you need to accept one-time and recurring payments with Hubspot. All sales data automatically goes into HubSpot. Meaning you can trigger workflows to follow up with customers. No custom code or complex systems are needed.

Note: Cartfuel is already designed, and information architecture is finished, But through it, they are working and trying to grow. They found some problems that need to be solved.

What did I learn through working on this Project?
  1. Learn how can I handle the work for the developer and reach the goals of the product within our timeframe.

  2. Analyze the weak points in the design and focus on solving them based on UI pattern comparison without going on deep research, So I can deliver the work on the timeline without affecting the result.

My Role:
  1. Redesign The pages with the following new style guide.

  2. Solve some user experience problems, especially on new product sequences.


The Problem

The first version of the application was created based on business needs by my client, the CEO of the platform, without considering insights from users. When the client finds that, the user starts to face problems and gets feedback about it. He is considered to redesign based on those insights. Some of those problems:

  • There are many steps users need to follow, So we need at least those steps to be organized and clear with a simple process for users.

  • Many pop-up windows. Every pop-up has a specific goal.

  • Those pop-up windows prevent user to see the changes they make.

Goals


  1. Solve the main problems I explained before.

  2. There are usability issues that need to solve.

  3. We needed to add new features depending on customer needs.

  4. I updated the user interface and found the style guide.

Old Design



How do solve the following steps to be on one page using UI patterns?
How do solve the pop-up window, so the user can see the data he changed?



Solution


The best solution I found to do it to use:
1- Divide the page into three sections (Side Navbar - Steps - Preview)
2- Horizontal segmented navigation, So the user can see all steps he needs on one page
2- The preview section with auto change like that the user can see changes he makes directly.






New Pages we decided to add a new design
  • Sign up
  • login

  • Forget password

  • Onboarding screens

  • Dashboard Homepage

Some of the steps to adding Product Attributes

I can’t add all pages I design here. I design more than +20 pages:
  • Account Setting

  • Product Action/ New Product Sequence Steps Page

  • Product Action/ Order Bump

  • Product Action/ Downloads

  • Product Action/ Countdown Timer

  • Product Action/ Coupons

  • Product Action/ Your Customers

  • Setting/ Payment Gateways

  • Setting/ External Integrations

  • Setting/ API

  • Setting/ Taxes

  • Setting/ webhooks


To see all design screens live:
https://www.figma.com/file/rzMbyexpf7CHyRjVicD3Cy/Cartfuel?node-id=0%3A1

Product Designer interested in SaaS products for education and hospitality. Have a passion for Research and conducting UX Audit

Product Designer interested in SaaS products for education and hospitality. Have a passion for Research and conducting UX Audit

Product Designer interested in SaaS products for education and hospitality. Have a passion for Research and conducting UX Audit