Brief
Brief
Brief
Contributions
User Experience
Design
Visual
User Flows
Interaction
Design
Design System
Prototyping
Competitive Analysis
Heuristics
Wireframing
Design
Contributions
User Experience
Design
Visual
User Flows
Interaction
Design
Design System
Prototyping
Competitive Analysis
Heuristics
Wireframing
Design
Contributions
User Experience
Design
Visual
User Flows
Interaction
Design
Design System
Prototyping
Competitive Analysis
Heuristics
Wireframing
Design
Tools Used
Figma
Framer
G-Chat
G-Analytics
Photoshop
Tools Used
Figma
Framer
G-Chat
G-Analytics
Photoshop
Tools Used
Figma
Framer
G-Chat
G-Analytics
Photoshop
Collaborators
Austin
CEO
Scot
COO
Shop Owners
Users
Shop Staff
Users
Collaborators
Austin
CEO
Scot
COO
Shop Owners
Users
Shop Staff
Users
Collaborators
Austin
CEO
Scot
COO
Shop Owners
Users
Shop Staff
Users
Timeline
Research
2 - 3 Weeks
Ideation
2 - 3 Weeks
Design
4 - 8 Weeks
Testing & Iterations
3 - 6 Weeks
Timeline
Research
2 - 3 Weeks
Ideation
2 - 3 Weeks
Design
4 - 8 Weeks
Testing
3 - 6 Weeks
Timeline
Research
2 - 3 Weeks
Ideation
2 - 3 Weeks
Design
4 - 8 Weeks
Testing
3 - 6 Weeks
This project aims to enhance and simplify the payment process, while maintaining emphasis and visibility while transactions are made. The Payments system is crucial for calculating shop finances and processing payments.
This project aims to enhance and simplify the payment process, while maintaining emphasis and visibility while transactions are made. The Payments system is crucial for calculating shop finances and processing payments.
This project aims to enhance and simplify the payment process, while maintaining emphasis and visibility while transactions are made. The Payments system is crucial for calculating shop finances and processing payments.
Importance
Importance
Importance
The financials and payments system is essential for tracking revenue, managing expenses, and maintaining accurate financial records. An efficient payments system directly impacts the ability to effectively capture transactions form different customer types.
The financials and payments system is essential for tracking revenue, managing expenses, and maintaining accurate financial records. An efficient payments system directly impacts the ability to effectively capture transactions form different customer types.
The financials and payments system is essential for tracking revenue, managing expenses, and maintaining accurate financial records. An efficient payments system directly impacts the ability to effectively capture transactions form different customer types.
Discover
Discover
Discover
Research Methods
Research Methods
Research Methods
1
Observations & Interviews
Observed technicians and sales reps when processing transactions. Over 100+ transactions, I would learn their pain points, note down walk-arounds, and other approaches.
1
Observations & Interviews
Observed technicians and sales reps when processing transactions. Over 100+ transactions, I would learn their pain points, note down walk-arounds, and other approaches.
1
Observations & Interviews
Observed technicians and sales reps when processing transactions. Over 100+ transactions, I would learn their pain points, note down walk-arounds, and other approaches.
2
Heuristics & Usability
Performed heuristics of the full payment section for an order. From retail customers to dealership invoiced customers, I found crucial areas to overcome and improve the experience.
2
Heuristics & Usability
Performed heuristics of the full payment section for an order. From retail customers to dealership invoiced customers, I found crucial areas to overcome and improve the experience.
2
Heuristics & Usability
Performed heuristics of the full payment section for an order. From retail customers to dealership invoiced customers, I found crucial areas to overcome and improve the experience.
Pain Points & Challenges
Pain Points & Challenges
Pain Points & Challenges
No Emphasis
The payment and transaction portals were not clearly highlighted for new users, causing confusion about whether they were making a payment.
No Emphasis
The payment and transaction portals were not clearly highlighted for new users, causing confusion about whether they were making a payment.
No Emphasis
The payment and transaction portals were not clearly highlighted for new users, causing confusion about whether they were making a payment.
Camoflauged
The payment and transaction portals blended in with the UI, making them hard to recognize. This lack of prominence during critical steps hindered users from easily completing transactions.
Camoflauged
The payment and transaction portals blended in with the UI, making them hard to recognize. This lack of prominence during critical steps hindered users from easily completing transactions.
Camoflauged
The payment and transaction portals blended in with the UI, making them hard to recognize. This lack of prominence during critical steps hindered users from easily completing transactions.
Functional, but not Usable
The payment system functions by capturing payments and indicating transaction status, it lacks human-centered design.
Functional, but not Usable
The payment system functions by capturing payments and indicating transaction status, it lacks human-centered design.
Functional, but not Usable
The payment system functions by capturing payments and indicating transaction status, it lacks human-centered design.
Unclear Payment Indications
Low-grade processing indicators caused users to frequently re-verify transactions. The vague design contributed to user confusion, making it difficult to quickly understand.
Unclear Payment Indications
Low-grade processing indicators caused users to frequently re-verify transactions. The vague design contributed to user confusion, making it difficult to quickly understand.
Unclear Payment Indications
Low-grade processing indicators caused users to frequently re-verify transactions. The vague design contributed to user confusion, making it difficult to quickly understand.
Insufficient Confirmations
Confirmations like “payment successful” or “payment failed” were not clear, leaving users uncertain. Missing micro confirmations increased time on task & user frustration.
Insufficient Confirmations
Confirmations like “payment successful” or “payment failed” were not clear, leaving users uncertain. Missing micro confirmations increased time on task & user frustration.
Insufficient Confirmations
Confirmations like “payment successful” or “payment failed” were not clear, leaving users uncertain. Missing micro confirmations increased time on task & user frustration.
Ideate
Ideate
Ideate
Previous system
Previous system
Previous system
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Order ready for payment
Payment Modal Menu
Payment Successful
Post payment
Solutions
Solutions
Solutions
Emphasis & Clarity
Emphasis & Clarity
Emphasis & Clarity
Simplify Visuals
Control
Simplify Visuals
Usability
Usability
Usability
Implement distinct visual indicators to clearly guide users to the payment section.
Implement distinct visual indicators to clearly guide users to the payment section.
Implement distinct visual indicators to clearly guide users to the payment section.
Implement a guided process for payment, breaking it down into manageable steps.
Implement a guided process for payment, breaking it down into manageable steps.
Implement a guided process for payment, breaking it down into manageable steps.
Develop separate flows for single retail payments, partial payments, and invoice dealer payments.
Develop separate flows for single retail payments, partial payments, and invoice dealer payments.
Develop separate flows for single retail payments, partial payments, and invoice dealer payments.
Ensure the payment area is prominently highlighted to reduce confusion.
Ensure the payment area is prominently highlighted to reduce confusion.
Ensure the payment area is prominently highlighted to reduce confusion.
Use visual cues to indicate the current stage of the payment process.
Use visual cues to indicate the current stage of the payment process.
Use visual cues to indicate the current stage of the payment process.
Ensure each flow is intuitive and easy to follow, catering to various user needs.
Ensure each flow is intuitive and easy to follow, catering to various user needs.
Ensure each flow is intuitive and easy to follow, catering to various user needs.
Provide real-time feedback to reassure users about their transaction status.
Provide real-time feedback to reassure users about their transaction status.
Provide real-time feedback to reassure users about their transaction status.
Create a more interactive and user-friendly experience with real-time feedback.
Create a more interactive and user-friendly experience with real-time feedback.
Create a more interactive and user-friendly experience with real-time feedback.
Prevent users from proceeding without completing necessary information correctly.
Prevent users from proceeding without completing necessary information correctly.
Prevent users from proceeding without completing necessary information correctly.
Design
Design
Design
Design system components
Design system components
Design system components
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Sidebar payment modals
balance bar component
Visibility
The additions of the payment sidebar modals and order balance bar components provided a higher depth on visibility of clear concise user actions with added indications.
Visibility
The additions of the payment sidebar modals and order balance bar components provided a higher depth on visibility of clear concise user actions with added indications.
Visibility
The additions of the payment sidebar modals and order balance bar components provided a higher depth on visibility of clear concise user actions with added indications.
Dynamics
Components were made utilizing design thinking and keeping dynamic design in mind. Options were visible on some variants based on user position and system alignment within the flow
Dynamics
Components were made utilizing design thinking and keeping dynamic design in mind. Options were visible on some variants based on user position and system alignment within the flow
Dynamics
Components were made utilizing design thinking and keeping dynamic design in mind. Options were visible on some variants based on user position and system alignment within the flow
Congruency
Adding on to the ever evolving Shopmanager design system, these components were crafted to blend in effectively to solve user pain points.
Congruency
Adding on to the ever evolving Shopmanager design system, these components were crafted to blend in effectively to solve user pain points.
Congruency
Adding on to the ever evolving Shopmanager design system, these components were crafted to blend in effectively to solve user pain points.
Motion
Motion
Motion
Animation used to visually indicate ready status of the Shopmanager merchant terminal & merchant partner exposure.
Animation used to visually indicate ready status of the Shopmanager merchant terminal & merchant partner exposure.
Animation used to visually indicate ready status of the Shopmanager merchant terminal & merchant partner exposure.
Lets the order shop sales representative know when terminal is ready to accept a card - insert, tap, or a swipe payment
Lets the order shop sales representative know when terminal is ready to accept a card - insert, tap, or a swipe payment
Lets the order shop sales representative know when terminal is ready to accept a card - insert, tap, or a swipe payment
This reduces confusion between the user and the customer, and allows the user to assist and guide the customer effectively.
This reduces confusion between the user and the customer, and allows the user to assist and guide the customer effectively.
This reduces confusion between the user and the customer, and allows the user to assist and guide the customer effectively.
Insert
Swipe
Tap
credit
Insert
Swipe
Tap
credit
Insert
Swipe
Tap
credit
Terminal Animation
Terminal Animation
Terminal Animation
HIFI design Flows
HIFI design Flows
HIFI design Flows
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
Adding a one-time 100% payment to an order
Adding a partial payment to an order
Saving order as an unpaid invoice for dealers
saving an order as an estimate or a quote
1
Adding a Full Payment to an order (100%)
This flow is for adding a single one time payment to an orcer and move the order to the "invoiced" or "paid"status
1
Adding a Full Payment to an order (100%)
This flow is for adding a single one time payment to an orcer and move the order to the "invoiced" or "paid"status
1
Adding a Full Payment to an order (100%)
This flow is for adding a single one time payment to an orcer and move the order to the "invoiced" or "paid"status
2
Adding a Partial Payment
Shops want to have the ability to accept partial payments, where orders are large, and take over a month to fulfill.
2
Adding a Partial Payment
Shops want to have the ability to accept partial payments, where orders are large, and take over a month to fulfill.
2
Adding a Partial Payment
Shops want to have the ability to accept partial payments, where orders are large, and take over a month to fulfill.
3
Saving Dealer Orders as Invoices
Dealer customers pay on a NET 10, 15,30, or even 60 day intervals in the form of collected invoices for work done.
3
Saving Dealer Orders as Invoices
Dealer customers pay on a NET 10, 15,30, or even 60 day intervals in the form of collected invoices for work done.
3
Saving Dealer Orders as Invoices
Dealer customers pay on a NET 10, 15,30, or even 60 day intervals in the form of collected invoices for work done.
4
Saving Order as Estimate
Create full orders and save as estimates for customers by printing them at the shop, or via email or text message link.
4
Saving Order as Estimate
Create full orders and save as estimates for customers by printing them at the shop, or via email or text message link.
4
Saving Order as Estimate
Create full orders and save as estimates for customers by printing them at the shop, or via email or text message link.
Test
Test
Test
User Testing
User Testing
User Testing
Conducted usability tests with 22 users, focusing on the redesigned flows and overall usability.
Conducted usability tests with 22 users, focusing on the redesigned flows and overall usability.
Conducted usability tests with 22 users, focusing on the redesigned flows and overall usability.
Measured completion times, error rates, and user satisfaction using quantitative and qualitative methods.
Measured completion times, error rates, and user satisfaction using quantitative and qualitative methods.
Measured completion times, error rates, and user satisfaction using quantitative and qualitative methods.
Reflection
Reflection
Reflection
Existing integrations
Integrating design solutions seamlessly with users’ existing workflows and other functionalities minimizes disruption and maximizes efficiency, a key practice I’ve adopted during this project.
Existing integrations
Integrating design solutions seamlessly with users’ existing workflows and other functionalities minimizes disruption and maximizes efficiency, a key practice I’ve adopted during this project.
Existing integrations
Integrating design solutions seamlessly with users’ existing workflows and other functionalities minimizes disruption and maximizes efficiency, a key practice I’ve adopted during this project.
Prioritize Visibility
Prioritizing clear, concise information, indications, and real-time visibility into statuses data points helps improve usability and empower users to make informed decisions
Prioritize Visibility
Prioritizing clear, concise information, indications, and real-time visibility into statuses data points helps improve usability and empower users to make informed decisions
Prioritize Visibility
Prioritizing clear, concise information, indications, and real-time visibility into statuses data points helps improve usability and empower users to make informed decisions
Consistency & Scalability
I learned to prioritize consistency & scalability while expanding the design system. This ensured feasibility for foreseeable product needs, leading to a user-friendly experience.
Consistency & Scalability
I learned to prioritize consistency & scalability while expanding the design system. This ensured feasibility for foreseeable product needs, leading to a user-friendly experience.
Consistency & Scalability
I learned to prioritize consistency & scalability while expanding the design system. This ensured feasibility for foreseeable product needs, leading to a user-friendly experience.
Thank You 🙏🏻
As I move forward, I am excited to apply these lessons to new challenges.
The insights gained from this project will be invaluable as we continue to enhance the Shopmanager SaaS application.
This experience has shown me the profound impact that a well-designed system can have on daily operations, and I am eager to keep pushing the boundaries of what we can achieve.
Thank You 🙏🏻
As I move forward, I am excited to apply these lessons to new challenges.
The insights gained from this project will be invaluable as we continue to enhance the Shopmanager SaaS application.
This experience has shown me the profound impact that a well-designed system can have on daily operations, and I am eager to keep pushing the boundaries of what we can achieve.
Thank You 🙏🏻
As I move forward, I am excited to apply these lessons to new challenges.
The insights gained from this project will be invaluable as we continue to enhance the Shopmanager SaaS application.
This experience has shown me the profound impact that a well-designed system can have on daily operations, and I am eager to keep pushing the boundaries of what we can achieve.
View NEXT CASE STUDY
View NEXT CASE STUDY
View NEXT CASE STUDY
Available for freelance & contract projects!
Available for freelance & contract projects!
Available for freelance & contract projects!
© 2025 Poojan P. All rights reserved.