Accounting Software

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration.
Project overview

Accounting Software “Xero” is one-way extension you need to manage expenses, track money flow and have all necessary documents in one place.

Our aim was to revamp the Stripe Xero application with a primary emphasis on acquiring new customers, specifically targeting existing Stripe users and encouraging them to become new Xero customers.

Tasks
  • Design the log-in page and the new account sign up
  • Design the new account confirmation and the 3 onboarding flows for new account users
  • Redesign the three-tab core application flow
  • Design the “preview mode” for users to see the application with test data
Tools
Figma
Figma
Solutions
Outcome

After considerable UX/UI research, studying the Stripe system, we organized a clear and intuitive structure for Accounting Software extension “Xero”, so that it could serve businesses, accountants, and bookkeepers. They can manage expenses, track money flow and have all necessary documents in one place. We also designed the preview mode which helps new users to discover full potential of the app.

Solutions

Design system

To ensure consistency and establish a distinct style for Xero, we conducted a thorough study of Stripe's widely recognized and effective design system.

Accounting software - Overview of the "Xero" extension - Displays a design guide for the Xero integration, including sections for typography, colors, badges, and buttons.
Accounting software - Overview of the "Xero" extension - Displays a design guide for the Xero integration, including sections for typography, colors, badges, and buttons.

Design system

To ensure consistency and establish a distinct style for Xero, we conducted a thorough study of Stripe's widely recognized and effective design system.

Design system

To ensure consistency and establish a distinct style for Xero, we conducted a thorough study of Stripe's widely recognized and effective design system.

Accounting software - Overview of the "Xero" extension - Displays a design guide for the Xero integration, including sections for typography, colors, badges, and buttons.

Design system

To ensure consistency and establish a distinct style for Xero, we conducted a thorough study of Stripe's widely recognized and effective design system.

Accounting software - Overview of the "Xero" extension - Displays a design guide for the Xero integration, including sections for typography, colors, badges, and buttons.

Design system

To ensure consistency and establish a distinct style for Xero, we conducted a thorough study of Stripe's widely recognized and effective design system.

Accounting software - Overview of the "Xero" extension - Displays a design guide for the Xero integration, including sections for typography, colors, badges, and buttons.

Onboarding

Users can choose between Express Setup, Guided Setup, or Skip to App. Guided Setup was made as a detailed step-by-step process for users who prefer thorough guidance.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration setup.
Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration setup.

Onboarding

Users can choose between Express Setup, Guided Setup, or Skip to App. Guided Setup was made as a detailed step-by-step process for users who prefer thorough guidance.

Onboarding

Users can choose between Express Setup, Guided Setup, or Skip to App. Guided Setup was made as a detailed step-by-step process for users who prefer thorough guidance.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration setup.

Onboarding

Users can choose between Express Setup, Guided Setup, or Skip to App. Guided Setup was made as a detailed step-by-step process for users who prefer thorough guidance.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration setup.

Onboarding

Users can choose between Express Setup, Guided Setup, or Skip to App. Guided Setup was made as a detailed step-by-step process for users who prefer thorough guidance.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration setup.

Profit & Loss

This page was essential for users to track their finances, including Income, Cost of Goods Sold, Operating Expenses, and more. We designed filters to align with Stripe design guidelines, ensuring ease of use.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration.
Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration.

Profit & Loss

This page was essential for users to track their finances, including Income, Cost of Goods Sold, Operating Expenses, and more. We designed filters to align with Stripe design guidelines, ensuring ease of use.

Profit & Loss

This page was essential for users to track their finances, including Income, Cost of Goods Sold, Operating Expenses, and more. We designed filters to align with Stripe design guidelines, ensuring ease of use.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration.

Profit & Loss

This page was essential for users to track their finances, including Income, Cost of Goods Sold, Operating Expenses, and more. We designed filters to align with Stripe design guidelines, ensuring ease of use.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration.

Profit & Loss

This page was essential for users to track their finances, including Income, Cost of Goods Sold, Operating Expenses, and more. We designed filters to align with Stripe design guidelines, ensuring ease of use.

Accounting Software - Overview of “Xero” extension - Shows data analytics for Stripe Users with a section for Xero integration.

In & Out

This page is an indispensable tool that we designed to empower users with a simple overview of their financial transactions.

Accounting Software - Overview of “Xero” extension - Displays financial analytics for Stripe Users with an integrated Xero section.
Accounting Software - Overview of “Xero” extension - Displays financial analytics for Stripe Users with an integrated Xero section.

In & Out

This page is an indispensable tool that we designed to empower users with a simple overview of their financial transactions.

In & Out

This page is an indispensable tool that we designed to empower users with a simple overview of their financial transactions.

Accounting Software - Overview of “Xero” extension - Displays financial analytics for Stripe Users with an integrated Xero section.

In & Out

This page is an indispensable tool that we designed to empower users with a simple overview of their financial transactions.

Accounting Software - Overview of “Xero” extension - Displays financial analytics for Stripe Users with an integrated Xero section.

In & Out

This page is an indispensable tool that we designed to empower users with a simple overview of their financial transactions.

Accounting Software - Overview of “Xero” extension - Displays financial analytics for Stripe Users with an integrated Xero section.

Shortcuts

We also added a page with shortcuts to find external actions leading to the main website of Xero. They are organized by common page names.

Accounting Software - Overview of “Xero” extension - Showcases the interface of an accounting software with an overview of the "Xero" extension.
Accounting Software - Overview of “Xero” extension - Showcases the interface of an accounting software with an overview of the "Xero" extension.

Shortcuts

We also added a page with shortcuts to find external actions leading to the main website of Xero. They are organized by common page names.

Shortcuts

We also added a page with shortcuts to find external actions leading to the main website of Xero. They are organized by common page names.

Accounting Software - Overview of “Xero” extension - Showcases the interface of an accounting software with an overview of the "Xero" extension.

Shortcuts

We also added a page with shortcuts to find external actions leading to the main website of Xero. They are organized by common page names.

Accounting Software - Overview of “Xero” extension - Showcases the interface of an accounting software with an overview of the "Xero" extension.

Shortcuts

We also added a page with shortcuts to find external actions leading to the main website of Xero. They are organized by common page names.

Accounting Software - Overview of “Xero” extension - Showcases the interface of an accounting software with an overview of the "Xero" extension.

Preview mode

We created a preview mode so users may look through the app before fully using it. This helps to understand the principle of Xero and discover the possibilities it provides.

Accounting Software - Overview of "Xero" extension - Shows data analytics for Stripe Users with sections for Profit & Loss, In & Out, and Shortcuts.
Accounting Software - Overview of "Xero" extension - Shows data analytics for Stripe Users with sections for Profit & Loss, In & Out, and Shortcuts.

Preview mode

We created a preview mode so users may look through the app before fully using it. This helps to understand the principle of Xero and discover the possibilities it provides.

Preview mode

We created a preview mode so users may look through the app before fully using it. This helps to understand the principle of Xero and discover the possibilities it provides.

Accounting Software - Overview of "Xero" extension - Shows data analytics for Stripe Users with sections for Profit & Loss, In & Out, and Shortcuts.

Preview mode

We created a preview mode so users may look through the app before fully using it. This helps to understand the principle of Xero and discover the possibilities it provides.

Accounting Software - Overview of "Xero" extension - Shows data analytics for Stripe Users with sections for Profit & Loss, In & Out, and Shortcuts.

Preview mode

We created a preview mode so users may look through the app before fully using it. This helps to understand the principle of Xero and discover the possibilities it provides.

Accounting Software - Overview of "Xero" extension - Shows data analytics for Stripe Users with sections for Profit & Loss, In & Out, and Shortcuts.
No items found.

Outcome

After considerable UX/UI research, studying the Stripe system, we organized a clear and intuitive structure for Accounting Software extension “Xero”, so that it could serve businesses, accountants, and bookkeepers. They can manage expenses, track money flow and have all necessary documents in one place. We also designed the preview mode which helps new users to discover full potential of the app.

Linkedin

Linkedin

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline