Design a SaaS workflow diagram for homepage (SVG + frontend)

Project description

I’m building a SaaS platform called PayCIS, which helps construction companies manage subcontractor payments under the UK Construction Industry Scheme (CIS).

paycis.co.uk

The current homepage hero section shows a generic phone mockup, which does not clearly communicate how the product works.

I want to replace this with a **clean, modern SaaS-style workflow diagram** that immediately explains the process from building site → approval → payment → accountant.

The designer should design the diagram and implement the section directly on the site.

---

Workflow to illustrate

The diagram should show the following process clearly using icons connected by arrows:

1. Subcontractor applies for payment
A construction worker on site submits a payment request using their phone.

2. Site manager approves
A site manager reviews and approves the request.

3. Back office makes payment
Office staff process the subcontractor payment online.

4. Details go to the accountant
Payment records and CIS deductions are automatically recorded.

5. Job done
Everything is paid and recorded correctly (green tick / completion symbol).

---

Design style

The design should match modern SaaS product graphics.

Style references:

* Stripe
* Xero
* Zapier
* modern fintech landing pages

Requirements:

* clean vector icons
* icons connected by arrows
* minimal text
* rounded shapes
* subtle gradients or glow effects
* professional UI illustration style

This is not a generic infographic — it should look like a polished SaaS product graphic suitable for a homepage hero section.


Layout

The diagram must:

* fit within a single homepage section
* work well in the existing hero layout
* be responsive for desktop and mobile
* use a vertical or circular flow, or weaved around the text
* clearly communicate the process visually

Retain the existing descriptive text on the home page and preserve all meta data and tags. Make any minor tweaks to the text as advised by the client.
Preserve the text boxes on the existing page that MANAGE YOUR CIS PAYMENTS ONLINE.

Alternatively, I am open to wildcard suggestions from good designers with Saas marketing experience, who understand our product and want to make a suggestion for revised graphics for the whole here section, but not altering the structure.

Our logo has changed a version of the new logo is attached.

paycis.co.uk

A screenshot of the current homepage will be provided.

Implementation

The selected designer should also implement the diagram into the site code.

Requirements:

* diagram delivered as **SVG**
* integrated into the homepage section
* responsive layout
* clean HTML/CSS implementation
* submit changes via **GitHub branch or pull request**

Deliverables

* SVG workflow diagram
* editable source file (Figma or vector)
* implemented homepage section
* GitHub pull request ready for review

Pricing

Please submit a fixed price for the entire project.

I am not looking for hourly pricing. You PPH fixed bid must be clearly indicated on PPH, not within your bid text.

Proposals

To confirm you have read the brief, please start your proposal with:

Workflow diagram for PayCIS.

If you are able to include a quick concept sketch or rough mockup with your proposal, this will significantly increase your chances of being selected.