Hi @ganas
Trust all is going well. Any update on this?
Kind regards,
Great idea
Sorry for not updating this in a while. Here are is the design I came up with and looking for you inputs as I’ll finalize it and start a bounty to implement it. In the design the goal was touch screens first, so i avoided any typing or message boxes and notifications and used tab approach.
Here is a link for the design:
poserpnext.bitballoon.com
and here some screenshots
http://2.1m.yt/_DuqrwS.jpg
http://2.1m.yt/jcf9vEj.jpg
http://2.1m.yt/tfKvVgj.jpg
http://2.1m.yt/SCva-HR.jpg
http://2.1m.yt/AKeglFh.jpg
1 Like
@ganas
Wow! Looks great!
I really like how you used the tabs approach. It looks much tidier.
I added some suggestions for modification to simplify it a bit and speed up the work flow.
I hope it doesn’t seem like I’m nagging because it looks like a lot of inputs. I really like your design and I would really like to see it in ERPNext!
Customers:
- Merge the “Serving” and the “Customers” button: The Costumer-button would show who is been served at the moment. If you click on it, the “Customers” screen is shown.
- Put the active customer also in the queue-list and make the active customer highlighted.
- Then get rid of the “select” button (arrow) in the list. Instead you could just click anywhere on the customer to select it as active.
- Put the “delete” button on the very right of every customer row, deleting on accident would happen less.
- Get rid of the “delete” button on the “Serving” button because it is already on every Customer row.
Add a new Customer:
On a tablet you would use a screen keyboard. This would cover most of the form. Maybe it would be better to have a “New” button by the search field and then use the whole screen for the form+keyboard.
Cart:
- I can see the idea of the sliders but I honestly think you would be much faster with a traditional POS number keyboard, also on a touch screen! Think about it:
-
A customer buys two cokes: You press “2” “x” “coke”
-
You want to give the customer 15% off: “1” “5” “-%”
-
You want to gibe the customer 2.00 off (this possibility is missing): “2” “00” “-”
-
You want to change the amount of a previous item: select the item and use the number keyboard.
-
Fiddling a slider to the correct number is less practical!
-
I would put a traditional POS number keyboard with “00”, “x”, “-”, “-%” and “delete” buttons
-
Instead of the “x” as delete button I would use the “garbage” button for consistency.
-
You also need a possibility to give discount to the whole and to part of the cart. The traditional way is a “subtotal” button but maybe there is a better idea.
-
Isn’t there a better possibility then a dropdown list to select a category on a touch screen? (I don’t have a better idea either.)
Payment and Summary
I really like the Paymernt-tab! Simple and efficient!
I would add a “00” button to the number keyboard. Entering 100.00 is much faster with it.
But is the Summary-tab really needed? Couldn’t you just add a big “Finish” button to the Payment-tab which does a predefined process (like printing the receipt).
You could also put some smaller buttons to do different things (like send the receipt by email or delivering everything by mail). If you then need more information (like the email-address), you could be send to the Customer-tab or an other tab would be opened which asks for the missing information.
Thanks again for your hard work!
2 Likes
Thanks those are really valuable inputs I agree with most of them and will update the design.
Just this part, would you mind explaining more?
I used the sliders in the cart because you can simply fetch the available quantity and maximum discount allowed for the employee and set them for slider limits so you don’t get annoying notification when quantity not available or exceed allowed discount. Also you can easy integrate the price list rules with the sliders so available discount on the slider will be updated based on qty. Anyway we can drop them for traditional POS number keyboard
1 Like
This is very nice and what I would like for a POS provider.
Have this been put up in GitHub issue or is there any bountysource for it so we can contribute to the development?
Of course:
A great thing about your design is the lack of scrolling. Everything is always visible.
The “new customer” form is the only place where that is not true:
Every on-screen keyboard I could find on Google Play uses the full width of the screen and more or less half of the hight. For your design this has the consequence that everything lower than the “Billing Address”-title would be covered and you’d have to scroll down.
To avoid that you’d have to use only the top half of the screen for the form. To insert it into your current design I thought a “New” button which opened an overlay form using the full width of the screen would be an answer to that. But I can see now that you wanted to avoid overlays. So it’s overlay vs scrolling… But maybe you have a better idea.
I hope my explanation makes more sense now.
By the way: If you get rid of new customer form on the right side you get free space for other things. For example valuable informations about the selected customer: recent history (“by the way we have a new add on for your…”), next birthday, family members… (Could be something to think about for a next release.)
Hm… I see your point now and I see the benefit of it but I honestly think there has to be a faster way for the cashier. Maybe its enough to just write down the max discount next to the discount button. If they put more then allowed they get a sound and the max discount turns red or something…
Two more things:
“+” button
I would add a big “+” button in the top bar to open a new sale. If a default customer is set in ERPNext then you go right away to the Cart-tab with the default customer preset. Otherwise you go to the Customer-tab to choose a new customer.
This could speed it up the switch to a new sale especially if a default customer is set.
Change from “Unregistered” to a new customer
In an retail store you often get unregistered customers. In ERPNext there has to be a specified customer. As a workaround you have to have a customer called “Unregistered” (or similar).
Lets say you start with customer “Unregistered” but then you realize you need to register this customer (maybe because you have to call them when their order has arrived). You don’t want to overwrite “Unregistered” nor do you want to open a new cart and repeat the sale.
You just want to swap from “Unregistered” to a new registered customer. Maybe you could add the possibility to change a customer to an other one. Or maybe there is a better solution to this problem…
@ganas
I hope I’m not too annoying with all my inputs. It’s just that I’m really exited about your design!
1 Like
Hi,
I totally agree. What if we have to add “Unregistered” Customers to queue? In retail, it is more than often that we have “Unregistered” customers.
One way around this is to add a customer called “Retail”.
Also, quick change of POS Profile, while I understand that it is related to ERPNext login.
I would also want to see a 2nd screen for customers so that they can view what was scanned and the total for cart. Maybe can add this to the bounty too.
This is way cool…
\i need this one for my restaurant business
Here is an updated design based on the inputs
poserpnext.bitballoon.com
Changes
1- search box in the top. In this search box, you can:
- Search the system for new customer in the system, where if you find and select a customer, the active customer will be put in the queue list and the new searched customer will be the active one.
- without typing in the search box, there will be a list for customers in the queue for quick switching
- In it you will also be able to click add new customer which will switch to the customer tab
2-Customers Tab
- Removed the search section
- Put add new customer in the top row with full width. so keyboard in touch devices doesn’t hide any field
- Edited the view of customers in queue, where the rows are selectable, and moved delete customer to the end to avoid accidental deletion
2-Cart Tab
- removed sliders and replaced them with touch pad
- added notification on the label to show available qty and max discount
- added Pay button to easily switch to the payment tab
3-Payment Tab
- added buttons to Print receipt, email receipt, edit cart, and clear the customer after payment is done.
4-Summary Tab
- removed ass its functionality integrated with payment tab
5-Active customer
- clicking on the active customer switch to the customers tab so can easily switch with other customers in the queue
6-Online Tab
- nothing change as it just provide easy way to see non synced transaction in case the POS is offline
1 Like
Great and lovely @ganas
Just to comment a bit, hehe
-
Have a field for Discount Coupon. Future proof the POS as discount coupons seems the norm in the retail world. Or if Discount Coupon DocType to be provisioned along with POS update.
-
Cart Summary. I think to put in Item, Item Price, Qty, Total Item Qty will be much better.
-
Should be able to select default customer, for example, retail shop will more often than not choose Walk-In customer
Thank you very much @ganas !
One thought is, this is a completely new design language. I’m not so sure it is a good idea to introduce a standalone design language with the module, as that will be jarring for the user experience.
However, it would make a lot of sense to make this a standalone Electron app for ERPNext POS. In that sense, design language could be modified, and there are further possibilities. However, that would increase cost and development time drastically, so feasibility and community interest will easily be in question.
new design language? I’m just using different css (the one that i use for my frappe system), if I replace that css with frappe css then the feel will be in line with frappe. also here we are just prototyping how the interface should be organazied so don’t let the colors distract u 
Now in the costumers tab, you can easily edit the information of any costumers in the waiting list. this will be helpful especially for the case not fully registered, customer where u can add customer with the minimum details then update his information later if needed
this is cant be done in erpnext as u cant place transactions on non registered customers, so the only way is to create customer with the minimum details and edit if need later, or use one customer (usually called walk-in) but in any case u cant have cart for non registered customer.
This is not available in erpnext as of now, so it doesn’t make sense to add it. leave it until this feature is available then it can be included in the POS.
I’ve updated the summary section[quote=“frehu01, post:21, topic:14638”]
“+” button
I would add a big “+” button in the top bar to open a new sale. If a default customer is set in ERPNext then you go right away to the Cart-tab with the default customer preset. Otherwise you go to the Customer-tab to choose a new customer. This could speed it up the switch to a new sale especially if a default customer is set.
[/quote]
This now have better implementation using the search field, where there u can search, add, or select different customer from waiting list
Let me know if there are any changes needed, so we can start the bounty asap. Myself I’ll put 150$ and I hope you guys can help chip in so we can get our new POS.
The good news is that most functionalities are already available in the current POS, even now there is a pull request to add customer in POS.
@rmehta If you guys have any inputs on the interface before we start bounty on it
2 Likes
Nice - adding another 0 to that would be an interesting amount for a bounty!
Am also willing to contribute $150.
…We should be able to get that extra 0 in with little effort …
Here’s the full details for the interface (will be linked in the bounty)
Here is the bounty link
https://www.bountysource.com/issues/40458024-bounty-for-new-pos-interface-design
You can fine a prototype for how the interface should look like in here
http://poserpnext.bitballoon.com
and heres the full details
Overview and customer tab
- customer tab (where can add new customers, see the customers in waiting list, edit …)
- Cart tab (where can select items for customer shopping cart)
- payment details (where we process the payment)
- Online (is green when the pos online or grey when its not,) in it u can see the non synced records in case the pos is offline
- is the customer who’s shopping cart is active and being served right now (clicking on hime will take you to the customers tab where you can switch to another customer from the queue or add new customer)
6- is search bar, where you can search for new customer in the system or quickly switch with customer in queue list
7- is the form where you can add new customer. - is a list of customers in the queue, the customer being served is highlighted
- clicking the customer name will switch him to be the active customer.
- here u can edit customer information where the will be populated in 7 where you can do quick update
- here you can cancel and delete the customer shopping cart and remove him from the queue list
Search Bar
12. clicking on the search bar, you will see customer in waiting list where u can quick switch also u see add option where it switch u to customer tab, other wise you can search and select customer from the system
Shopping cart
13. you are able to select the category of the items, and the item view will be updated to only show that category
14. is where u can scan barcode or enter manually
15. is a list of the items in the cart, where u can delete an item by clicking the X icon in the left, also selecting an item will highlight it and populate its information in 16 to update qty or discount
16. here you can update qty or discount for item selected in 15 (notice the information about available qty and max discount is updated on the labels)
17. the payment button takes you to the payment tab
Payment Tab
18. is a summary of the items in the shopping cart
19. you can quickly add payment for different payment methods available in the system
20. you can submit the payment, print the receipt or email it, or go back to edit cart, or after payment you can clear the customer
Online Tab
21. you see all the transactions that haven’t been synced in case the pos was offline
2 Likes
Here is a link for the bounty. I put 150$ and I really encourage you guys to contribute to the bounty (any little amount will count). It will benefit all of us
https://www.bountysource.com/issues/40458024-bounty-for-new-pos-interface-design
@olamide_shodunke please add you contribution to the bounty. let’s keep the ball rolling
3 Likes