An Overview
Netswitch.ai is an innovative card payment solution that allows businesses to issue debit, prepaid & commercial cards to employees instantly with spend controls, with authorizations supported on or off Netswitch.
The Challenge
Netswitch needed had built the core-infrastructure of the product, but needed help designing an intuitive front-end for Business Administrators and Employees
With a small team consisting primarily of Business Leaders and Technology Experts, they needed a Visual-minded UX Designer who could understand the product at a macro level, and prototype a intuitive, usable, and trustworthy digital experience for Business Administrators to issue corporate cards and track transactions.
The Solution
Techfin.llc helped translate conversations, slide decks, and spec sheets into:
- Figma UX flows
- Webflow Design System and Prototype
- Dozens of custom built components
The Project was managed remotely through:
- Notion Project Management Page
- Loom Videos
We used Webflow to go beyond static prototyping, building a fully responsive frontend, and exporting out the HTML/CSS/JS for the Lead Angular Dev
Background
Personas
Competitive Analysis
Research Takeaways
- RBAC (Role Based Access Control)
- KYC/KYB Regulatory Requirements
KYC/KYB Regulatory Requirements
After researching other Corporate Card Platforms, like Ramp and Brex, I identified that they were missing key KYC and KYB regulatory requirements, which would be essential for onboarding new customers and users onto the platform.
In Figma, I prototyped a compliant onboarding flow based on reference regulatory designs from Ramp.
Developer Requirements
The Lead Developer, Emery, was well versed in Angular Material, and planned on using prebuilt components to build the platform. I designed around her requirements, ensuring all components I built corresponded with a component in the Angular Material Library.
Low Fidelity Flow
The Netswitch Team had already outlined a rough flow on a slide deck, which was a helpful reference for my design.
Design System
I expanded the color palette, fonts, and styles of the live website, netswitch.ai, building a more defined Design System and Style Guide.
High Fidelity Flow
In Figma, I redesigned their Lo-Fi Slide Deck based on Angular Material Components, as requested by the lead developer
Fully Responsive Dashboard Prototype
Were I to hand off a Figma Prototype, it would have created a lot of work for Emery, and I like to reduce development workload and time where I can.
Fortunately, Webflow has a phenomenal front-end builder that allows a designer to build a fully responsive (and often functional), design as well as export the HTML/CSS/JS code to hand off to developers
This helps with
- Interactive Prototype Testing
- Designer to Developer Handoff
View the Interactive Prototype →
Project Management
The Roadmap was managed remotely and, for some stretches, asynchronously on Notion and Loom. Although the Netswitch team and developers preferred to leave the camera off, and communicate primarily through email, as a visual builder, I preferred to walk through my designs in loom videos.
Communication
Although I managed majority of my work on Notion, which has many convenient embed capabilities, most of my communication with the Netswitch team was conducted through GMail. I would attach links to prototypes, loom video walkthroughs, and the project management page to these emails
