Hyprbots' Procurement Feature

Best Capstone Award

Designing AI-powered finance processing platform which helps increase processing efficiency for accountants through reducing manual tasks

My Role: Product Designer

Designed the end-to-end brand identity for the firm

Designed 4+ product modules to support accrual and invoice processing AI-fintech capabilities

Refined Hyprbots' Design system based on team workflow and accessibility research


Team

Design Lead, Designers (2), PM's (2), Engineers, QA team


Duration

Jan - Apr 2024


Tools

Figma, Adobe CC

B2B SaaS

Design System

Hyprbots' Procurement feature

Best Capstone Award

B2B SaaS

Design System

Designing an AI-powered procurement module to help increase processing efficiency for accountants and scaling the product's design system

My Role: UX Designer

  • Designed a software module to assist accountants with procurement tasks through surfacing salient information for financial proofing processes.

  • Refined Hyprbots' Design System to support product responsiveness and maintain accessibility.

  • Designed end-to-end brand identity for the firm, supporting the MVP's investor demos and pitches.

Team

Design Lead, 2 Designers, 2 PM's, 3 Frontend engineers, QA team

Tools

Figma, Adobe CC

Duration

Jan - Apr 2024

Impact

$9M

raised in funding through the MVP

Design System

AA WCAG 2.0

standards met by the revamped design system

Brand Identity

50%

increase in web traffic engagement

BACKGROUND

Hyprbots is a fintech startup focused on reducing manual work across invoices, accruals, and procurement to improve efficiency for accountants and CFOs.

Founded in 2023, the team was building an Accounts Payable SaaS platform for mid-sized firms, with early efforts centered on AI-native co-pilots to demonstrate value to investors and early customers.

The firm was founded in 2023 and had been developing their Accounts Payable solution which was a software-as-a-service platform intended to reduce manual tasks for CFO and accountants within mid-sized firms.

01

Procurement Feature

PROBLEM

Procurement workflows in small and mid-sized businesses are slow, error-prone, and heavily manual; this requires accountants to reconcile multiple financial documents before taking action.

DESIGN BRIEF

How might we facilitate procurement reviews to help accountants identify and reconcile errors in the review process efficiently?

RESEARCH

I studied Hyprbots' approach to improving the review process: surfacing AI-parsed data to indicate errors and mismatches

Through shadowing calls with Hyprbots' CFO partners and working closely with senior PMs and design leadership, the core friction was identified as cognitive overload during the review phase and not the matching itself, which the AI handled


As the firm created AI co-pilots to automate procurement workflows, accountants still needed to review and validate AI-generated data.

SCOPE

Introducing the human review layer within the workflow (human-in-the-loop approach)

I focused on designing the human review layer within an automated three-way matching workflow — specifically how accountants scan, validate, and correct procurement data before taking action.

IDEATION

The real design challenge: AI trust in financial decision-making scenarios

When the system flagged errors after three-way matching, the workflow broke down in a predictable way. Junior accountants would scan the error list, fix the obvious mismatches, and pass the document up. Senior accountants would open it to be met with a full list of unresolved flags and panic: they couldn’t tell which errors had been addressed and which ones needed further digging.


The interface made human judgement invisible. This drove the design decisions. 

Error states indicated with accordions open by default

If AI flagged a mismatch, it had to be the first thing the accountant saw and not something they had to hunt for. Collapsed error states put the burden of discovery on the user, which led to errors being missed in a hectic workflow. The relevant accordions being open by default made the AI's judgment immediately visible and actionable. 

Including an acknowledgement and action section

This was the critical trust mechanism. Accountants needed a way to say: “I've seen this, I've assessed it, I'm choosing to proceed.” Without it, every unresolved lower-priority error looked identical to an unreviewed one, which caused senior accountants to panic. 


The 'Acknowledge' interaction created a visible layer of human judgment on top of AI output, making the handoff between junior and senior reviewers legible for the first time.

Prioritizing high stakes fields while retaining other details

Working with backend engineers, I identified which fields appeared consistently as fields coming from the ERP system the platform connected to. GL fields and tax lines were brought to the top since errors in those fields carry the most downstream financial consequences.


This was the first time field priority had been explicitly mapped to ERP consequence rather than visual convention.

OUTCOME

Two-pane layout which includes a document drawer as well as key finance information with error indicators to help accountants scan and take action to rectify procurement errors

The procurement review screen gave accountants a structured way to verify AI-parsed data, surface critical errors first, and take role-appropriate action, reducing the ambiguity that previously caused errors to slip through between junior and senior reviewers.

The three-way matching screen was crucial in enabling accountants and CFOs to process procurement tasks and take relevant action on errors identified by the software's AI-native co-pilot.


Although a large number of design artefacts produced to support the Procurement feature within the MVP are protected by an NDA, I would be happy to share further information regarding this project brief upon request.

IMPACT

$9M

raised through the seed funding & series A supported by MVP demos including this key feature shipped in early 2025.

The three-way matching screen was crucial in enabling accountants and CFOs to process procurement tasks and take relevant action on errors identified by the software's AI-native co-pilot.


Although a large number of design artefacts produced to support the Procurement feature within the MVP are protected by an NDA, I would be happy to share further information regarding this project brief upon request.

02

Design System Revamp

PROBLEM

The product was being actively used in investor demos; inconsistency in a fintech UI at that stage isn't just a design problem, it's a trust problem

Despite the brand identity being established, there was a significant gap in consistency of the visual identity with the UI of the firm’s SaaS product which was being built as an MVP.

DESIGN BRIEF

How might we expand the brand's identity into its SaaS platform to make it more cohesive with the brand image, usable and accessible?

PROCESS

The audit was manual: I evaluated the platform's accessibility, understood the team's adoption practices as well as analyzed the system structure to address the root of the issue

Since the product wasn't in production yet, automated tooling wasn't the right fit. I checked color contrast ratios, text sizes, and component states against WCAG 2.0 AA standards.

I also conducted internal team workflow research to understand how the system is used and updated to support the design and development teams. After outlining the basic refinement areas, I focused on revamping the system from redesigning the components to outlining a design system re-structure proposal to curating an implementation plan.

RESEARCH

The initial Design System audit revealed that the WCAG 2.0 accessibility standards were not being met by the current system and the need for building responsiveness into the product

About 20-30% of the components failed in the evaluation. The bigger gap was responsiveness: no breakpoint layouts existed anywhere in the system, meaning developers had no reference for how the interface should behave across screen sizes beyond the standard one. I decided to build that reference set from scratch.

OUTCOME

Components were redefined to meet accessibility standards from the atomic level and UI layouts were refined to set responsiveness standards on a page level

After an iterative process of identifying the apt color swatches, text and component elements to match the interface's requirements as well as meet the minimum accessibility standards according to WCAG 2.0, I created an updated version of the design system.


Team discussions, developer inputs and interviews were all part of the process of structuring the system in a way that adapts to the current workflow in a seamless manner.

IMPACT

AA

Standards achieved in accordance with the Web Content Accessibility Guidelines (WCAG 2.0) through updating the product's UI components.

02

Design System Revamp

Problem

Now that the brand identity for the firm was established, there was a significant gap in consistency of the visual identity with the UI of the firm’s SaaS product which was being built as an MVP. Additionally, an initial design system audit revealed that several UI components did not meet accessibility standards.

How might we expand the brand’s identity into its SaaS platform to make it more cohesive with the brand image, usable and accessible?

Process

I initiated a thorough design system audit to understand the level of maturity within the design system in terms of component availability, documentation structure and alignment with the latest accessibility standards (according to WCAG). I also conducted internal team workflow research to understand how the system is used and updated to support the design and development teams. Post outlining the basic refinement areas, I focused on revamping the system from the redesigning the components to outlining a design system re-structure proposal to curating an implementation plan.

Evaluation

Initial evaluation resulted in identifying that about 20-30% of the UI components did not meet accessibility standards and that the system was also missing layouts which considered various breakpoints to ensure the SaaS platform's responsiveness.

Outcome

After an iterative process of identifying the apt color swatches, text and component elements to match the interface's requirements as well as meet the minimum accessibility standards according to WCAG 2.0, I created an updated version of the design system. Team discussions, developer inputs and interviews were all part of the process of structuring the system in a way that adapts to the current workflow in a seamless manner.

IMPACT

AA

standards achieved in accordance with Web Content Accessibility Guidelines (WCAG 2.0) through updating the product's UI components.

LEARNINGS

LEARNINGS

The power of documentation and reflection

The power of documentation and reflection

I learnt how this helps in connecting the dots and bringing clarity within the messy, iterative processes which a design project may entail

I learnt how this helps in connecting the dots and bringing clarity within the messy, iterative processes which a design project may entail

Viewing design systems from a holistic view of visual, operational and practical uses

Viewing design systems from a holistic view of visual, operational and practical uses

Conducting research on how designers and developers use the system shed light on key documentation/ workflow issues which I was able to address.

Conducting research on how designers and developers use the system shed light on key documentation/ workflow issues which I was able to address.

The interlinkages of brand identity, design systems and product design

The interlinkages of brand identity, design systems and product design

Delivering shipped solutions and curating a live brand presence introduced me to the fast-paced yet interlinked lifecycles of these various aspects of digital solutions

Delivering shipped solutions and curating a live brand presence introduced me to the fast-paced yet interlinked lifecycles of these various aspects of digital solutions

IMPACT

Brand Identity

50%

increase in web traffic engagement

Design System

AA WCAG 2.0

standards met by the revamped design system

Procurement feature

$2M +

raised in seed funding through the MVP

Scrolled all the way? I sense a connection…

Let's Chat!

© Designed with ♡ by Ishita

Scrolled all the way? I sense a connection…

Let's Chat!

© Designed with ♡ by Ishita

Create a free website with Framer, the website builder loved by startups, designers and agencies.