PayiQ
Project Specs
Role: UI/UX Designer
Timeline: 1.5 years full-time, part-time prior
Project Type: Payments Dashboard
Supporting Team: Project Manager, Scrum Master, Business Analyst, Front-End Developers, Product Owners
Context
PayiQ is a payment processor that embraces advances in cloud tech and AI to provide a new level of reliability and enhanced data insights to its customers. It is an emerging division of Quisitive.
Challenge
I was approached to take rough sketches and wireframes from product stakeholders and translate them into UI concepts. These deliverables would be used to communicate ideas to executives in the company, and help spur funding. While rough, these early concepts helped get the team on the right track to building out the product that became the merchant portal: a centralized dashboard for businesses to view transaction data, run payments via a virtual terminal, and more.
Process & Solution
Phase One: Ledgerpay
In the early days the product was loosely branded Ledgerpay. The team was small and design was rather nebulous at this phase. I worked part-time providing UI deliverables as features began to take shape, and lended my voice to discovery sessions. For this phase I designed mockups in Sketch, and repurposed a customized starter file to jump-start the process. These early conversations were critical to nailing down core functionality. Since branding was also conceptual, the look & feel was more in service to those functions at this stage of the process.
Overtime, a front-end developer was brought in to bring my designs to code. During this stage the product became more fleshed out as we came up with user roles (admin, merchant, ISO, and bank) and permissions. This is also when we expanded the portal to include new features for Settlements, and End of Day Reports, and Settings. My input was imperative in shaping the experience for each of these new features. As the sole designer on the team, I was the arbiter for the UX and had to remind other stakeholders that decisions needed to be objective with the end-user in mind. It was an exciting time to see the portal take shape, to move from concept to something that was coded and actually tangible.
Phase Two: Restyle & Design System Foundation
Eventually Ledgerpay became PayiQ and spun up from a pet project into a new division of the company. In this phase I joined the team full-time and was tasked with restyling the portal to better serve the new branding. I took this opportunity to make the jump from Sketch to Figma and take advantage of its advanced component variants, styling, and auto-layout features. My aim was not just to recreate and restyle the dashboard, but to introduce a foundational design system to better serve the product design and development process going forward.
I embraced atomic design methodology creating the most common elements like buttons, fields, and toggles, before creating more complex components like modals, columns, tables, and more. The design system also includes defined grids, and spacing guidelines to influence more consistent implementation after hand-off.
The design system lended itself to the slick new coat of paint across the portal, and served the purpose of expediting hand-off from design to development. Once implemented, this cut down development time and the design of new screens on my part. I went on to reuse the same system for the design of a DevOps website.
Phase Three: Feature Enhancements
After work on the restyle and foundational design system was completed, introduction of brand new end-to-end features slowed due to limited access to back-end resources. In the interim myself and the greater product team pivoted to look to make enhancements to existing features, and buildup our backlog.
One feature I was able to ship were enhancements to the portal tables. It brought increased value by expanding filtering capabilities and customization of the Transactions table.
Reflections
For my contributions to the design system and the restyle of the portal, I received a company award for excellence in Product Innovation. PayiQ is currently in soft-launch where it is being used daily to process transactions at a small scale and stress test the underlying architecture. Unfortunately, due to RIF a portion of the team was let go including myself. Even still, I am thankful for the experience I gained working on the team.