Label Manger: Invoice Creation Flow
Monstercat · Feb-May 2023
Enhancing the invoice creation user flow involves simplifying data entry, and providing contextual guidance to streamline the process, ensuring accuracy, efficiency, and a seamless experience for users.
Overview
Invoice Creation Flow Improvement
Timeline
Nov 2022 - May 2023
Team
Front-end & Back-end developer, Head of Tech and Project Manager
Role
UX · UI Designer
Deliverable
Responsive Web
Target users
Internal Staff
Background
Why invoice matters?
1
Invoice is one of the features being used by all staff in every dept on dairy basis
2
30% of work what finical team does is double checking and fixing errors of invoices
Solution 03
To create a new invoice, users must be knowledgeable about ..
Solution 03
To create a new invoice, users must be knowledgeable about ..
Research
What we found from user observation
Same team, same value
Refer to the previous one they submitted
Unaware of Clone invoice features
Solution
UX pattens to solve the problems
1
Prompts to start
Offer a template feature that provides guidelines for each department on which fields are typically important to fill out when creating specific invoices.
Inject a clone my recent invoice feature in the creation process, along with a clear signifier for users on how to duplicate an existing invoice.
2
Information chunking
Chunking the required fields in a logical and intuitive manner, so that they know what to fll and not to.
3
Contextual guidance
Provide clear and concise explanations of each share type and their intended use within the invoice creation interface. Give live-time feedback what impact they will make in creation flow.
User Flow
The current user flow
User Flow
The improved user flow
Validation process
How did we validate the soluitons?
01.
Prompts to start
Invoice creation option
Providing three options to create invoice
Invoice creation option
Flow Chart
Wire Frame
Invoice creation option
1st draft of Hi-fi Mockups
Proposal A
Proposal B
Validation 01
Heat Map: Do three options appear to be available in any states?
Proposal A
Proposal B
Final Solution 01
Final Solution - Invoice creation Initial modal
There has been issues in UI reported from usability testing. We release the distractions it by adding one more depth and
distinguishing UI of three options.
Testing results
Final Creation Modal
Validation 01
Final Solution - Template & Recent invoice modal
Template invoices
Recent invoices
02.
Information chunking
Validation 02
The current creation modal
Information chunking was missing, that results confusing and error-prone, leading to potential misunderstandings.
Validation 02
1st draft of chunking - based on fields characteristic
Grouped according to characteristic the field itself. However, it could not solve all the problems we initially pointed out. Still vague guides on what to fill and where to get information.
Validation 02
How do users assemble information?
Final Solution 02
Final information chuking - filling invoice form
1
2
3
03.
Validation 03
Guidance regarding required fields
Under the asset and share type drop down, titles are only guide users received, wasn't enough to pick correct ones.
Validation 03
Asset relation
Validation 03
Share type
Validation 03
Knowing the impact
The system will provide instant suggestions for payment terms based on the input. Show both industry-standard options and tailored recommendations.
Next Step
Lessons Learned
Clear documentation makes lives easier for everyone! I learned the hard way that when you leave room for interpretation, your designs probably won’t be engineered to spec. I had to revisit my designs several times to ensure that component padding, naming conventions, and other forms of documentation were consistent and clear. During my subsequent project, I began documenting my work from the outset and even created a template for future designers to use.
