Neat: Create a New Business Card
Overview
Neat is an online B2B platform that offers global companies a diverse range of business products: company incorporation in Hong Kong, a digital corporate banking solution and business expense cards.
As the Card product evolved, the initial MVP product offering, and subsequent flows, needed to be reviewed and optimised based on customer and business needs.
My Role
As Senior Product Designer, I am responsible for owning and delivering the full product design cycle of the Neat Visa cards vertical. I work closely with the product owner, stakeholders, developers, QA engineers and other cross-functional teams to produce meaningful work for business strategy and customer needs.
Product Problem
The current flow has too many variations/options for picking currency/card
The flow is not scalable for future planned features
The Card product is evolving at a pace which the current flow did not allow for changes without a major design revisit
Customer Problem
Business Owners (BO) want more flexibility
BOs want more customisation for their corporate cards, such as tagging and naming in order to categorise expense
The current card product and offering is too simple for an evolving business’ needs
Reframe the Problem
How might be redesign the Create New Card flow as a seamless experience that gives business owners total control and customisation?
Research Objectives
Understand internal/external users’ perception of the current Create New Card flow
Understand any customer pain points
Uncover areas for improvement
Discover new customer insights to inspire product roadmap
Project Objectives
Create additional utility and added-value features for business owners
Create an experience that is simple, streamlined and engaging
Redesign the flow in a scalable way to include and make way for future planned features
Empathise Through Research
Listen to customer feedback and understand experience pain points
We interviewed several internal Neat colleagues and users to understand pain points and uncover user insights in the existing journey.
“The “Add Cardholder” button is hidden at the bottom when there’s a lot of cardholders”
“What does pending status mean? Do I need to complete more?”
“The current UX is straightforward, simple [and] easy to understand”
From our interviews and usability tests..
We crafted customer journey maps for each Job to be Done – as a way to view the entire customer journey from a holistic point of view - to understand gaps, pain points and uncover new opportunities for improvement.
Main themes that emerged from the research –
It’s hard to navigate the long cardholder list
Unsure of the “Who will completely registration” step
Strong desire for multiple card creation
UX is simple, straightforward and easy to use
The “Preferred Name” part takes too many steps to complete
After specific flows, it seems like the card is ready, but actually card registration is still pending on the Cardholder to complete
Define the Direction
Identify the end user, project objectives, and opportunities
It’s an important exercise to take a look around the industry through market research to see what other products are doing.
Not as a way to copy or validate, but to keep up with the latest technology, simplifying the experience, and staying ahead of the curve.
Building an affinity map from the research enabled us to identify and streamline themes and pain points, which then drove the project scope and opportunities.
Design Opportunities
Enhance/Add the ability to search by cardholder name in the list
Make “Add New Cardholder” CTA more accessible
Condense & simplify the “Who will complete registration” form
Allow for multiple card creation in one go
Maintain the simplicity and ease of use in the next iteration
Optimise “Preferred Name” screen experience
Enhance the card registration statuses
Streamline the Cardholder KYC (Know Your Customer) process
Ideate Concepts
Time to brainstorm with the team, identify priorities and technical restraints
I put pen to paper, sketched out some ideas to prototype, swiftly mocked up various flows in Figma, and conducted temperature checks internally through polls in Slack channels.
For quick temperature checks, we created a #design-testing channel to easily shoot over ideas and get feedback from colleagues on the fly.
Working closely with the product manager, developers and QA engineers, together we brainstormed big ideas, defined technical constraints and headed in a direction.
*Unable to share full details due to NDA
Time to Execute
Bringing all the ideas, feedback and suggestions into real, live pixels
Reimagining the Create New Card flow was a massive undertaking and affected several different touch points across the entire Neat product – not only within the Cards vertical.
We considered specific user flows and touch points:
Neat Business Dashboard (desktop)
Create New Card flow
Cards Overview page
Individual Card Detail page
Neat Mobile App
Cards Overview tab
Individual Card Detail
Internal Dashboard
Card Detail
Design System
In order to maintain consistency and scalability with the overall Neat experience, I looked towards the existing design system and language.
Any new components would need to be consulted and reviewed within the design team to keep consistent with existing product elements and components
Design Core Values:
Simple, Human, Scalable
Updated Design - Selected Screens
..vs Old Design
Time to Validate
Testing the design to validate, uncover insights and receive feedback
We reached out to our Neat community for in-depth user interviews and usability testing on the brand new design.
“Card nickname is useful! If you have many cards, [it’s easy to] forget which one is which”
“Such a simple flow, I like it. It can’t be any quicker!”
“I like that you can pick existing [cardholders] and search by typing.”
Excitement for company card
Card nickname & purpose should be optional
UX is simple, compact and easy to understand/use
Card Detail banner: Simple, subtle but clear
The “Select Cardholder” is now more efficient as a drop down/search bar
Major themes that emerged from testing:
Project Retrospective
-
What I Enjoyed
Working closely with product manager to drive this feature based on business needs and research
Always a pleasure to work in an end-to-end project
-
Lessons Learned
Clearly identify project scope in the beginning to avoid scope creep
-
What I’d Do Differently
Recruit more Neat customers for user interviews/usability testing (if only we had more time!)
Work even closer with technical teams to scope out their work, so that they are not burdened with a feature that crosses multiple sprints