Give every step a place.
Break business setup into distinct stages, with visible progress and context.
0%
CASE STUDY / 03Mswipe✳
Business payments.
A clearer way forward.
From the first business detail to the final payment confirmation. One connected experience for onboarding, invoices and everyday money movement.
More than a payment screen.
The design connects business onboarding, invoice management and payments—across desktop, mobile and the emails in between.
MY CONTRIBUTION
UI/UX design across the product journeys, responsive layouts, interaction states and component handoff shown here.
THE CHALLENGEMake a detailed business process easier to follow without hiding the information people need to act confidently.
Keep the invoice in view.
Connect the entered details with the document they create.
Design the exceptions too.
Include failed uploads, returned invoices and payment recovery.
One workspace.
A connected set of decisions.
The solution brings setup, invoice creation and payment decisions into a shared interface. The navigation stays familiar while the content changes with the task.
Progressive business setup
Separate identity, documents, banking and contacts so each step has a clear purpose.
Context beside the action
Keep the invoice preview close to the line items and details that shape it.
A path beyond the happy path
Make room for rejection reasons, returned invoices and payment failures.
Built for focus.
Recognisable at every step.
Blue actions, quiet surfaces and a dark navigation rail give the workspace a consistent hierarchy. This visual breakdown follows the supplied UI screens.
Colour with a job to do.
Primary actions stand out against white forms. A darker rail separates navigation from the working area.
Ag
Regular 400Medium 500Bold 700
Roboto Typography
Roboto is the typeface used throughout Mswipe. Its clear letterforms support information-heavy screens, while regular, medium and bold weights distinguish supporting text, field labels and primary headings.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ₹ % + −
abcdefghijklmnopqrstuvwxyz
0123456789 ₹ % + −
Icons
A consistent outline style gives common actions and navigation items a recognisable visual cue. Simple shapes work alongside text labels for tasks such as invoices, payments, uploads and account management.
Illustrative icon examples representing the product’s main tasks. The original interface icons remain visible in the supplied screens.
From the big picture
to the next action.
The dashboard offers a starting point, while management views organise the people, records and reusable information behind each transaction.
01 / DASHBOARD
A view of business activity.
Summary cards, invoice records and activity charts bring different levels of information into one starting view.
People and permissions.
User management gives the workspace a dedicated place for managing its people.
Reusable business information.
The item catalogue keeps recurring invoice information organised alongside other master records.
Complex setup. Clear steps.
Account creation leads into a guided business profile. Identity, documents, bank accounts and contact details each have their own place.
Buyer and seller onboarding have different requirements: bank details are optional for buyers and mandatory for sellers. Upload errors include a retry path.
A smaller screen.
The full story.
Dense workspace content becomes a vertical reading order. Forms, invoice cards and confirmation states remain part of the same product.
SWIPE THROUGH / TAP TO EXPLORE
The details make it a system.
Clarity, repeated.
Component states bring inputs, selections, validation and feedback together. A consistent blue action colour and restrained surfaces carry through the workspace.
The experience continues outside the workspace.
Welcome messages, password recovery and payment requests share a familiar structure and a clear next action.
A complete experience,
including the in-between.
End-to-end coverage
Business setup, invoice creation, review and payment states form a connected product journey.
Across touchpoints
Desktop, mobile and transactional emails share the same task-oriented approach.
Ready for refinement
The component states and exception flows provide concrete material for handoff and usability testing.
These are design deliverables visible in the supplied files. Business impact and usability improvements have not been measured in this case study.
Good payment design
makes complexity
feel manageable.
The everyday journey and its edge cases belong in the same design conversation. Task completion, recovery and comprehension are the next things to validate with users; no measured launch outcomes are claimed here.
