The Problem

Algordanza is a Swiss-based global leader in producing memorial diamonds—transforming cremation ashes into certified diamonds. The Hong Kong branch has been using HubSpot to host their site, which served as a central hub for their customer information, order data, and marketing needs.

Despite this, Algordanza Hong Kong's ordering process remained largely manual and paper-based. Staff spent significant time on repetitive data entry and manually updating order progress. Additionally, numerous steps were required to liaise with different parties to complete each order.

The Solution

The goal of this project was to design a digital form solution that would simplify and automate the order flow, from integrating with Xero for payment processing to leveraging HubSpot CMS for automated lead scoring and pipeline tracking.

Timeline:

Dec 2024 - June 2025

Role:

Lead Designer

Responsibilites:

UI/UX Design, Client Training

current flow

We started by recreating their current flow and mapping out all parties involved, including customers, the Algordanza HK team, Algordanza Switzerland, HubSpot, Xero, and Google Sheets.

Through this, we discovered that the existing order process required extensive manual effort across multiple touchpoints. Staff had to:

• Manually enter customer and order data from paper forms into multiple systems

• Manually create an internal order using Word

• Manually enter payment information into Xero

• Manually create a deal in Hubspot for a new order and update diamond progress stages to trigger email communications

• Handle document submissions (e.g., cremation certificates) separately

• Handle pricing for diamonds (include multiple diamonds and discounts) manually

All of this was inefficient, labor-intensive and created ample room for errors, delays, and inconsistent data.

New Flow

We aimed to design and implement a new user flow that would simplify the process through automation and digitalization, reducing manual effort wherever possible. This included:

• A new order form supporting bilingual use (English & Chinese), customer document uploads and can handle conditional logic, multi-diamond orders,and dynamic price calculations

• Integration with HubSpot to trigger a deal creation, automating the sales pipeline by capturing prospect data and eliminating manual entry

• An internal order and quote generation system in Hubspot

• Integration with Xero for payment processing for both the customer and Algordanza Switzerland

• Integration with Google Sheets for easy pipeline updates

Given the complexity, we had to consult with the development team and went through multiple rounds of iteration with the client. While not everything could be automated, the final improved user flow we came up with significantly reduced the number of manual steps required.

In the new flow, once the form is submitted, a deal is automatically created in HubSpot—eliminating manual data entry and automating their sales pipeline. Staff simply needs to review the deal and then generate an internal order and quote sent to Algordanza Switzerland and the customer respectively. After the customer signs off, an invoice in Xero will be created and once payment is made, a purchase order for Switzerland will be automatically generated as well. Staff would then send the purchase order to Switzerland who would then send its invoice through Xero.

Algordanza Switzerland would then update the diamond progress in the Google Spreadsheet file, which would then automatically trigger the email to inform customers.

By connecting HubSpot and Xero directly and using a single digital form as the entry point, the new flow ensures that data is captured once and propagated automatically, no longer requiring repetitive manual entry. The result is a faster, more reliable, and far less error-prone process

While we were using Hubspot as the base for the form, it would require a customized design and coding for what we wanted to achieve. So we started with creating low-fidelity wireframes to get the overall structure and design of the form confirmed first.

The main objective was to create a clear, readable form that would not overwhelm customers—especially those navigating grief. Since the original paper form was already broken into sections, translating it into a multi-step digital form was a natural fit. Because the form is quite long, we added a progress bar intended to allow users to freely go back to previous sections. I chose to position the progress bar on the side rather than the top to prevent the page from becoming overly long and to avoid excessive empty space on the sides. We also included a final summary page displaying all questions and answers, so users could review and edit their information before submitting.

Visual Design & Layout

After refining the design with the client, I proceeded to develop high-fidelity prototypes in Figma, utilizing its capabilities to create clickable content and demonstrate conditional rules to make the logic understandable for both developers and the client.

I used Algordanza's and Semper Fides brand colors to highlight the progress bar and added a subtle background texture to make the form more comfortable on the eyes and more aligned with their existing branding. These color elements also helped break the monotony of lengthy content.

With the sidebar and form fields in place, I had to carefully balance layout and spacing consistency. I started by laying out the images for Carat Size and Cut to see how they could fit in a single row, then worked backward to establish a grid. Some pages had different numbers of fields, so I adjusted content spacing accordingly to avoid inconsistent layouts and to balance negative space—ensuring the design never felt too empty or too overwhelming.

To account for scenarios where customers ordered multiple diamonds, I included buttons in the progress bar under Part 5: Diamond Details, which were also designed to be clickable.

To save time, I created a few select pages to establish the grid and layout system rather than designing every mobile screen. This served as sufficient reference, giving developers everything they needed to implement the rest consistently.

The biggest challenge was adapting the progress bar so that it remained readable and clickable without taking up too much screen space, especially with the additional diamond tags. After several iterations, we arrived at a compact solution that preserved functionality while respecting mobile constraints.

Part 1: Hubspot

1. After you fill in the form, go to the Deals section in Hubspot

2. Rename the deal to your preferred order/reference number (This will appear in the internal order and quote)

3. In the left sidebar, scroll down and select ‘Yes’ under ‘Create Quote’.

4. Refresh the page and the internal order and quote will be automatically generated as a PDF that you can attach in an email

5. Click ‘Yes’ under ‘Raise Invoice’ 

Part 2: Xero

1. Go to Xero and under Invoices, you’ll see the invoice has been split into two 

2. Add the payment to generate a receipt and a purchase order 

3. Go to the Purchase Order page to see the created purchase order and manually change the currency and costs as needed

Part 3: Google Sheets

1. Lastly, you can update the order status using this Google sheet which has been linked to Hubspot. When you input the order information and add the dates for each stage, it will automatically update it in the Algordanza Order Status pipeline and the status update email will be sent.