Hyprbots' Procurement Feature

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

Best Capstone Award

Role

•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

Procurement feature

$2M+

raised in seed 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

Hyprbots' approach to improving the review process: surfacing AI-parsed data to indicate errors/ discrepancies

As the firm created AI co-pilots to automate procurement workflows, accountants still needed to review and validate AI-generated data. Existing Enterprise Resource Planning (ERP) interfaces surfaced this information in dense layouts, making errors difficult to detect quickly and increasing review time.

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

Supporting scanability through surfacing the most relevant extracted information while also allowing access to original finance documents for helping accountants tally details.

Error states used to surface errors

Grouping key fields based on relevance to improve users' ability to scan information

Responsiveness to scale information across screens while preserving information hierarchy and review flow

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

I worked within an existing product strategy and interaction pattern, refining the layout, information hierarchy, and error surfacing to support efficient financial review.

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

$2M+

raised through the seed funding round supported by MVP demos including this key feature, which was 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

A significant gap in consistency was seen between the firm's visual identity and the UI of the flagship SaaS product

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.

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

End-to-end design system evaluation included an initial audit to check the platform's accessibility, understand the team's adoption practices as well as evaluate the system structure

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, the focus was 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 as well as gaps in supporting responsiveness

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

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

More Projects

Encompass Dashboard Redesign

B2B SaaS

Multi-user Dashboard

Encompass Dashboard Redesign

B2B SaaS

Multi-user Dashboard

Yes, Chef! Cooking App

Encompass Dashboard Redesign

B2B SaaS

B2B SaaS

Multi-user Dashboard

Yes, Chef! Cooking App

B2C

Branding

Yes, Chef! Cooking App

B2C

Branding

More Projects

More Projects

Yes, Chef! Cooking App

B2C

Branding

Encompass Dashboard Redesign

B2B SaaS

B2B SaaS

Multi-user Dashboard

Scrolled all the way? I sense a connection…

Let's Chat!

LinkedIn

Medium

Resume

Scrolled all the way? I sense a connection…

Let's Chat!

LinkedIn

Medium

Resume

© Designed with ♡ by Ishita

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