Asmaa Amer

Home

Home

About Me

About Me

My CV

My CV

Let's Talk

Asmaa Amer

Home

Home

About Me

About Me

My CV

My CV

Let's Talk

Asmaa Amer

Cartfuel web app

Payment Gateway web app

Payment Gateway web app

Payment Gateway web app

Overview

Overview

Overview

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.

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.

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.

Roles & Responsibilities


  1. Redesign The pages with the following new style guide.

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



  1. Redesign The pages with the following new style guide.

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



  1. Redesign The pages with the following new style guide.

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


What did I learn through working on this Project?


  • Learn how can I handle the work for the developer and reach the goals of the product within our timeframe.

  • 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.





Problem & process

The first version of the application was created based on business needs by my client, the platform's CEO, without considering users' insights. When the client finds that, the user faces problems and gets feedback about it. He is supposed 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 users to see the changes they make.


Goals:


  1. Solve the main problems I explained before.

  2. There are usability issues that need to be solved.

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

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

Old Designs

Old Designs

Old Designs

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.


Design

Design

User story for Translator:

  1. Once he is logged in, the translator is going to see which articles he has to work on. He needs to see what action he needs to take and the status of his work.


  2. The translator wants to be able to see the articles he has to work on, when he does that, he wants to take a break and continue to do it Later. When he came back, he finished his work and asked for the creator to review it. Two hours later, the creator approves it and the translation is done.

Persona

The target personas for this product are 2 main personas

Editor


The editor needs to be able to write an article, automatically translate it using Google Translate API, or assign a translator to translate it and then pay the translator.

Translator


The translator might be able to manage the articles

assigned to him, translate, request a review from

an editor, and get paid. But the key persona is

the editor because, in the end, he’ll be more valuable

in it

Unfortunately, I can't share more about this project as I signed a NDA. But anyone interested can see the project now live here:

https://www.polyblog.io/en/
https://app.polyblog.io/login

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

Some of the steps to adding Product Attributes

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

Let's talk

linkedin

linkedin

Dribbble

Dribbble

Behance

Behance

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

Let's talk

linkedin

linkedin

Dribbble

Dribbble

Behance

Behance

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

Let's talk

linkedin

linkedin

Dribbble

Dribbble

Behance

Behance