Native Invoice Challenge

Good Design!

Hello Sama I truly love the idea of how you incorporate the invoice concept to the Figma. I have few suggestions for you: -Under the details about work, you have asked for the breakdown in terms of working hour and hourly rate which is not always the case. What if the designer and client has set price which does have nothing to do with hourly rate. -Also I would suggest you use Label on the top of the text field, it is considered as a best practice. Rest all seems great, Goodluck to you.

Simple and easy-to-use concept. Minimal design, aligning with figma design theme. Love the work!

Nice design & concept

Love the UI. Great attention to details too. The user flow is easy to follow. I can even select which project I want to create a bill for. Nice presentation. Great work!

it's really amazing ! kudos to you

I love your design. Super stylish. Also it has strong Spotify vibes.

Wow!!!! I have never used Framer, but gosh... this dark UI looks so clean. I have snapshotted for the inspiration

Love the way you have introduced the invoicing as a feature, feature introductions done right

@Shreya Badchariya Thank you so much

Clean and elegant work, Alok! I love that the designer has the freedom to edit every detail of the invoice. The AI feature adds a nice touch to the work. I would've loved the design to be integrated in an existing app but great work nonetheless!

hey @Sush thank you so much

Hi, Bhanu Good to see you here. Thank you so much.

Hi, Alok. such a clean UI loved it! Try to use real people avatar instead of cartoon/3d faces. so that people connect faster with product!

Awesome work!

Hi @Vishrut sharma, really appreciate your efforts in writing. So I'll start with the "Not leaving the existing design tool". Writing Invoice is not the main feature of our solution here, you will only write an Invoice post completion of any project, if the problem statement is "Not leaving the existing design tool" that doesn't mean we will add a section for writing invoices alongside design tools. Unless you wanna write an invoice alongside designing. So once you are done designing there is a separate/new TAB for writing the Invoice for example "Explore plugins", and "Community" they all open in separate TAB. But does that mean we are leaving the design tool? I'll let you answer that. So coming to "there is no option to add the logo of our company" & "there is no way to generate a unique invoice number or a place to manually type it" In the thumbnail you are only glancing at "Client Details" if you see at the left side you will see"--Client details" is highlighted which is an indication that we are currently entering only Client Details, now if you observe the menu there is "Header" so that is where we would add the logo & Invoice number. The menu(quick navigation) ends at the signature. which is the last part of writing an Invoice. (I would have added one more screen which presents only "menu or quick navigation" for better visibility. But we are only asked to present it through 1 single image. but you can visit my Behance to see the screens much more closely, I guess that would answer your 3rd and 4th point of feedback) Do let me know if this helps answer your concerns. thank you again.

- The Big Issue I find in this, is that it doesnt go with the Design Brief. As there isnt any way to tackle the issue of " Not leaving the existing design tool " thus how is it different from anyother invoice generator if to use it we have to leave our design tool . - Eventhou you wrote there " switch to designing " still it doesnt clarify me that how is it working ? is it a plugin or separate software. - Even If it is a Plugin, still Plugin isnt expected to cover up whole screen of the design tool - The missing ux problem I can find in this is that, there is no option to add the logo of our company, Thus it won't be usuable for the genral design agency or company. - Another major ux issue I can find in this it that there is no way to generate unique invoice number or a place to manually type it, as you may have known that every invoice have a unique invoice number. - The UI looks good but it feels like it lacks a character that really distinguishes it from the existing invoice generator in the market.

@Alena Chuyankova Thank you!

@ Sachin vaish 😊

Thank you @Nida Khan so much

Hello Alok, you did a really great job with designing this invoice platform, especially the idea to switch to designing platform.

Excellent work !

Wow! So clean! I love it!

The most professional-looking work so far! I love the simplicity of form design, the invoice preview can let me check for discrepancies and I can even download my own copy! It's not mentioned so I'm not sure how would the user go about accessing it in Figma. Great work tho!

Just saw this posted on Instagram!!! keep doing it Mate.

amazing work ! - you can add the "bill from" details automatically because it's a repeating task for a designer. - "Bill to" can also have an option to access clients ledger to grab repeating client's details. - The "Send Invoice" button placement could be below the Invoice preview, as the user don't need to move cursor upward after checking the preview to send invoice.

@Alok B, Thank You

So cool!!!!!!!

Hey Hrithik, great idea. I had the same idea as well. Another level that I thought we could go in this was integrating multiple platforms (as some designers like to spread their work across to better organize things). Anyways, great clean design. Just one little thing that got me hung there for a while before I realized that I was looking at it wrong. You see the whole page (New Invoice) looks like it's divided into two columns, and because all input boxes are the same stroke width as the divider, it's hard to make out the separate section. I was kinda stuck for a while thinking, I have QTY, hours, rate, but where do I add the item name. It looks like a separate thing. So, I would suggest, either making the dividers more prominent and adding extra space before and after the sections; or changing the spacing around so that the relationship between elements is better visible. Other than that, great work buddy. P.S. I like the clean and straightforward presentation.

Fun Fact- I dozed off before submitting the design and realised that I had not uploaded my work just a few minutes before deadline was ending . So I had to create the final presentation within the final couple of minutes. The result is in front of you😂 Thanks for the feedback though. ^_^

I like that you narrowed down the problem statement of creating invoices within the app. The concept of the timer is unique among all designs. I have no complaints regarding UI or UX. The only little thing I think could've been improved is the presentation. The white space is all over the place. I would suggest aligning the second screen to the top-left of the first. Awesome work!

Thank you so much, Sachin :) I didn't think about tax and stuff, those things are handled by that payment gateway. If you are talking about users putting the tax then NO, there isn't anything related to the tax. The user can set up the payment method while setting up the account or change anytime to whichever payment method/gateway is available in their country. It will suggest as soon as you type in a few letters of their name but the ledger thing you mentioned is a really good idea. Thanks again Sachin for taking your time to help me improve by proving this valuable feedback :)

Good question ME UI/UX Designer, actually, they have to set up the payment method while setting up the account initially. They can select other payment methods (on the web) by clicking the "Account" on the top right or the "more" option near their current payment method. Thank you :)

Thank you, Alok :) Ah, yes I got your point of view now, I didn't even think like that while crafting it. It feels so generic now after thinking from that perspective. Thanks, mate :)

Thank you so much Firman :) The "business" will receive an email with the invoice and a link to the payment gateway to complete the payment. So, no, the business doesn't necessarily need to work with Figma :)

I liked the quality standard of plugin design as compared to figma's standard. I have some points : - is there anything related to tax ? - you can't narrow down the number of payment gateways / methods for the customer, what if he doesn't own a Paypal account ? - There can be an option for adding the customer details to customer ledger, in case you want to bill a repeating customer. Amazing work !

Only one question what if the customer has no PayPal account. In some countries PayPal is banned like Afghanistan, Bangladesh, Cameroon, Central African Republic, etc & your whole design process is based on PayPal. Other than this your native design is amazing. Great Work

Rest aside this design is professional!

That is a very efficient way to have the native invoice, through the plugin. but there are many few concerns, there is no mention that it is an official plugin, since you are using the name Figma let's assume it is a 3rd party community generated plugin, people might not trust with financial information that they provide, to solve that u could have visualized somewhere a feeling of security, letter which, a website for the plugin can have a full detailed explanation of features and security

Wow! That's a great design! I love how it looks very professional and clean! However, what if the "business (in general)" mentioned in the short challenge doesn't work in figma? Or let's say that business deals with sales etc?

Heya, the design is very minimal indeed. Although, I do have some concerns here. 1. On the left-most side, when you're asking for Company Name and all details. At first, I had the impression that I had to fill in Client Details. So I guess, by simply changing the copy to "Your Name" or "Your Company Name" would be more descriptive. Or simply add section headings. That would give me an idea of what details I need to fill in at a quick glance. 2. You're asking for Company Logo in a text input field. Ideally, there should be an upload option. 3. I see you've kept the Currency option in Company Details, but I believe, this information would be more appropriate in the prices section. 4. In the second step of the 3-step process, I'm pretty confused here. Firstly, what does "Price Product" mean. Secondly, where am I supposed to add the price of the product I add? And thirdly, what am I supposed to add in the input box, because the placeholder says to input the price, but then where do I add the name. Also, we must consider the use case here. The user is a freelance designer, as mentioned in the brief, so they're more likely to add Deliverables or Project Details instead of Products. So instead maybe you can consider using the term "Item" 5. Lastly I'd like to say, that this feature, as Shreya mentioned, is not gonna be used too much. So a better place for it would be Plugins or even better Widgets. P.S... 6. I realized this pretty late, the section with the Payment method. Well, it felt like I was making a payment. But here we're gonna be asking the client for payment, so doesn't matter which card they use. We just wanna mention our Payment details here. So you would maybe ask for Bank Details or Paypal.Me link (or whichever their preferred method for accepting payments would be). I'd conclude with that.. lots of insights, and I hope it helps.

Good idea, although I wouldn't add the option in the menu bar itself. That bar is for frequently used actions, while a user would only need to generate an invoice after the design has been completed. I would rather place it in the file options. Another thing that comes to mind is the opacity seems really low. It's hard to read the options. I like the overall UI and UX. Good attempt!

Love the organization of this and the step by step procedure. One thing I would think about is how to save your company to make the process quicker, for example by uploading and saving a branded invoice template.

A very good idea to add it along side the icons in the tab

1) The invoice icon is very similar to "writing email" icon. 2) You can use Checkboxes instead of Radio buttons, as Radio buttons are used to select One among many options, the client should have a freedom to pay via multiple ways.

@Sachin Thank you for appreciation brother! Yes I agree with you that most of professional task manager is done over a desktop rather than mobile apps. However, my idea is quite similar with figma mirror mobile apps. Nothing much to do on the mobile apps, just some main features :))

@Alok Thank you for your kind words mate! Yeah I think so that my idea is quite beyond the design brief since I'm trying to combine the task management apps and quick invoicing :)))

@Sachin vaish you are 100% right. To add it, the mobile version of the same will be available for quick access and response.

The hard work you put in the project is worth appreciation though, i think the professional design tasks are usually done over a desktop or a tablet. Mobile screen is too small for that.

That is a very cool mobile design, But I feel like the concept is going beyond requirements and the thumbnail has very less showcase of invoice thing!! I must say, that the UI looks cleaner! and have snapshotted for inspiration

A plugin is a great way to create invoices without leaving the app. I like that you've covered all the fields. You forgot to change the page indicator which confused me a bit. I like the UX. The UI looks more like an error message to me. Maybe work a bit on the color scheme

Nice, Vishrut. Try and make it modern, as people and the tech world are evolving at a faster pace, users have a heavy amount of expectations from design, very less amount of population wants to see the old designs repated. The interface design has come a long way from what you presented, One more point I would like to add is - when we are designing anything for a particular brand/company we try to adhere to their brand guidelines. I understand that Figma is open source and allows us to create our own plugins. When there is so much visual difference between users' favorite tool and 3rd party plugin, people tend to lose trust ( then how do you expect them to input financial data) unless the plugin provides the utter needs without which the user cant process his needs.

@sachin vaish Hey, the design is purposely looks different, as in the world where every ui seems copy of another ui, I wanted to have different outlook and approach towards it. I feel like after uploading it to Crowwn it got extremely compressed thats why it kind of looking pixelated. Thanks for the feedback :)

I liked the concept, but as you're using the figma screen for reference, the UI of the Invoice Generator barely match the Design Quality of figma. The text is kind of pixelated, may be due to poor resolution. you can take help of crowwwn for uploading a fresh HD picture. There could be an option for creating ledger for repeating clients, as to save time when you bill the same client.

Heya Vatsal, I just wanna add one thing here. The problem statement had asked for a solution to generate invoices in the software/tool that the designer is already using. Although a separate design tool is also a great idea, that would require the users to shift to this tool (which is very less likely to happen). For now, the user's problem would better be solved with something in-build their existing tools. Something like a plug-in. I hope you understand what I'm trying to get at. Your solutions needn't be a fully designed website or app, it can very well be something else.

@Manan Patel Thank you for your valuable feedback!

I liked this UI! You can give automatically generated information.

I love this UI you can cut some repeating form elements from the invoice making process like - "Billed by" & " Business logo" don't need to be filled every time, the designer can setup this in the first step himself/herself. - Invoice should be automatically generated. - it should fill the current date automatically, if the designer want to change the date, he can also change it manually. these common info should be automatically filled by the software/plugin itself to save time for the designer.

Hello Ankit, your UI is good. I have few suggestions for you: - Under the section of 'Create Invoice' why are there two tabs 'New invoice' and 'History'. When creating something new why would there be a option to view the previous invoices, This can be confusing for the user. - Under 'Bill to' is the user suppose to write the name of the client or email address that is not clear. A few more details about the client can be asked. - Also you have not provided the total invoice price, just the unit price is not enough. What is the total amount to be paid should be shown. -An option to preview would have been real helpful Rest all seems fine. Goodluck

The UI is very neat & clean. I want to add some points : - Next to "Bill to" you can add an option to select client details(which are already added in the database) , if making invoice for a repeating client. OR if you're making invoice for a new client, you can give an option to add the client details to database for future. - need to mention the total amount (as i can see only Hours & Unit Price ) or you can give an option to preview the invoice before sending to client. - How would you send the invoice to the client ? as there's no option to add email if it's a new client. - if you made the invoice feature only for figma clients, then it's being more specific.

I liked the design - except the high saturation of Red & Green, they are kind of hitting the eyes. - You can try different font for "Revenue increase, 23%", not so pleasing. - In the revenue tab, You can fill the "Monthly" tab to make it prominent. - The "Add Logo" area is something which is a one time setting where we need to put our company logo. So, there's no need. Also if you've added that to put the client's logo, there's no need for that as you can't delay your invoice if they delay in sending their logo.

I like the experiment with colors in the invoice. I don't see how it solves the problem tho. You can create more screens to explain the user flow which leads to generating this invoice.

Hey Aditya, what you have made is just a invoice. The main challenge was to incorporate invoice making feature in a design tool. I hope you understand the task well.

The Invoice template is nice. But, - How you will send the Invoice to the customer, as there is no CTA (Call to Action) - There's no Tax amount mentioned - Though this is just an invoice template, it doesn't solve the problem mentioned, you need to show how you've solved the invoice generating and sending process easier.

found it, thanks

hi Sachin, I have made everything available in my design that i mentioned to meet the user expectations. It's just on the sidebars and on the top, because of the size of image restrictions i was forced to post the design in a single image which made it barely visible to see anything on the screens.

The concept you've mentioned in the caption is barely visible on the screen. ( like - keeping the computerised record of invested assets, - time invested on the project - transparency with the client that require live tracking i think - showing originality of idea & design ) All I can see is the solution of the problem not the extra features mentioned. If the features mentioned in the caption can't be shown then the user expectation can't be fulfilled.

Hey, your design looks nice and clean. Although the main challenge was to create mockup for a design app where you can also send your invoice from. Whereas you created a design just for a invoice management.

Excellent work !

The design is not visible because of small size. At first I thought the delivery code page was supposed to be the design. I appreciate your efforts but no one can understand them until they can see them.

You could have enlarged the images rather than the text for presentation, as the screens are barely visible. though i have some points : - You can't bill a client on the basis of tools used (here tools means basic tools in a design software), you can charge on hours / project bases. - You can add the amount of external paid tools used if you want to disclose the tools. I can specify this only with barely visible screens.

I think there's no direct way to access the invoice feature like - creating a new invoice - managing invoices etc. It seems like the invoice can only be accessible only if the work done is design or screens. How you'd include the cost of research you did for the project. I think you should give a separate tab for "Invoice" in the left panel.

I love the neat design and presentation! I can add items for pricing. Export, payment, and client tabs are also visible which I think covers all the details required to create a quick invoice. User shouldn't need to expand the project first to open it since its a frequent action. Have you considered adding open project button to the side, or underlining Mr. Oogway so the title itself opens the project?

Hey Aditya, I just saw your design and to be honest, I very much liked the mix of precise and clean design. According to the project management dashboard, this looks professionally good. I could definitely make you a team member for my future projects. The thing I personally disliked is that the UX could have been a bit more simplified (The assigned projects should be shown on the main dashboard as smaller instances and so on...). Being a project manager, I would love that feature as this thing is just an addon step that we need to work on unnecessarily when opening the website. I hope you enjoyed the process and would love to be in contact with you soon. Regards, kunaaal

Hi Kunaal i am hopeful that u ll keep sharing ur feedback on my upcoming design. Thanks

Hi Kunaal Thank you so much for encouraging me, i really appreciate ur kindness and hopeful that some organization will hire me soon .and definitely i will keep these feedback points in my mind in next challenge.

Hi Sachin first of all thank you so much for taking out time for feedback and honestly i want to tell you that i was not able to understand the challenge so i tried myslf whatever i cud do.and thanx for feedback,i will keep these points in mind in next challenge.once again thnx plz keep sending feedback in my upcoming challenges, all feedbacks are really helping me to grow as a uxui designer.

Sorry to say but I think you didn't read the challenge carefully. The challenge was to include an invoicing feature in the design tool itself, so that the designer don't need to switch to other tool to send invoice to the client. Though you made a good solution for invoicing, but it doesn't solve the problem. Even though, - UI colors are good, but you need to work on content alignment and padding (3rd slide) -

Hi Manisha, I think you have a great eye for color selection, copywriting and illustrations and I love the design to be honest. If I were to create a website, I would hire you as a UI/ UX designer to work with me as a team. There were some tweaks that could be made to further refine the design such as element placement could have been more precise (3rd slide: bullets can be aligned... and more). The darker shade of green (used for elements) could be set at a lower contrast to sustain the visibility and let the viewers connect the design with the yellows in the design. I loved the color palette used for the design and I think this is the first time I've encountered such a palette. Overall, I loved your work and would love to see more of yours. Also, I'd be delighted if you work on the feedback and come up with the changes I recommended. Regards, Kunaaal