2016 - Present

Numarqe

About

Numarqe

One platform to manage your corporate card spend, up to 60 day credit, multi currency cards in GBP, EUR, USD and more

Designs accurate as of - May 2023. This work is currently in progress, images shown may differ from final release

UX/UI

Multi-platform

User research

Figma

Marketing site

View live version

Requirements

The tasks at hand

Design a scalable design system and CSS framework that will grow with the business

Scope out and design the MVP for a new modern credit platform

Design the Numarqe physical card

Growth is king

Utilising Tailwind

When scalability and time is key

I usually always recommend Tailwind, due to its ease of use for developers and it’s focus on utility classes.
The option to utilise Storybooks, RedwoodJS and TailwindUI was a major factor
Utilising TailwindUI to reduce the time and cost to get the MVP up and running and into customers hands
Utilised Figma Tokens and the TailwindUI Figma library to rapidly prototype and eventually create developer friendly wireframes
Utilised Primary and FigJam to map out the flow

MVP it

Crafting the MVP

The process for the MVP was for it to be efficiently designed and built:

I focused on utilising as much of the Tailwind library as possible, in combination with Hero Icons to

Reduce the no of components we need to build from scratch
Clear and consistent iconography, with established accessibility features
Works well when integrated with Storybooks

Held design sessions with key stakeholders to run ‘design as you go’ workshops. These sessions lasted 1-2 hours and comprised of a series of live mockup wireframes. This gave me a solid understanding of the exact user requirements.

Systems required

Designing the system

In order to scale the production to match the pace of development we leveraged a custom TailwindUI library

Using TailwindUI as base, a custom version was created using bespoke components unique to NUMARQE. This included sliders, layers and micro-interaction elements
This was crafted in Figma, for maximum transparency across teams
A simpler version was created which forms the foundation of the brand guidelines synergising marketing and product
Increase consistency = better and quicker collaborations

Dash ahoy!

Data Dashboards

Collection of mockups representing modals, dashboards and the mobile experience

LOOKING FOR MORE?

Check out Dribbble for even more work and random bits.

Open Dribbble

Got an idea?

Book a slot