The inside scoop: Designing Vend’s new point of sale.
How do you redesign a bread & butter tool that 15,000+ retailers around the world use all day, everyday?
Vend was officially launched in 2010 at Gather. It was the first cloud-based point of sale that took the world by storm, & quickly grew to become the bread & butter tool for more than 15,000 retailers around the world.
Since then, Vend has grown along with its early adopters, into a feature-packed retail platform that’s more than just a point of sale. We began unbundling Vend into separate products to enrich better experiences for targeted personas.
As part of this move to unbundle, we released a fully native iOS Register in late 2014 which gained great positive feedback from our users, especially from cashiers that use the app day in day out to make sale transactions. Its speed, usability and design was much more intuitive compared to the web counterpart.
Bringing it back to the web
After collecting valuable feedback from our users, we knew we had to bring some of those native patterns to the web, which has largely remained unchanged since the beginning. The old web point of sale was also showing signs of technical debt which hindered on development time for new features. It was time for a rewrite. It was time for a redesign.
Focus on the problems
We started the process by gathering all the problems our users had with the old point of sale:
1.Two seperate search bars for products and customers.
This pattern was odd for modern web apps, considering there are only two criterias to search for.
2.Search results were overwhelming
Search results were not categorised by product variants. Stores with large product libraries found the lengthy search results hard to use.
3.Not responsive
There were areas that were not optimised to adapt to multiple devices. It was optimised only for the laptop & iPad. The layout resulted in a a lot of wasted screen estate on bigger displays, which could potentially be used for better purposes.
4.Quick keys? Not as quick as barcode scanning
While the quick keys were shipped with good intentions, we received a lot of feedback from the retail industry on the usefulness of this feature — it is faster and safer to use the barcode scanner than navigating through the quick key tabs.
I marinated the problems for a few days.
Responsive + Modular
The problem that ended up standing out the most for me was around responsiveness. Not only on the responsiveness of the design, but the responsiveness around working in a retail environment.
“I wish my sell screen could look like my e-commerce website where I could browse by brand/ category etc and have full images and product information displayed easily.” — Vend user
Hey, why not?
Why are we limiting the form factor of the sell screen to device dimensions?
What if we blur the line for omnichannel retailers?
What if the point of sale was merely just a search bar + checkout list?
What if we ditch quick keys?
What if the point of sale was made up of lego-like, customisable components to suit different businesses?
What does a fully responsive point of sale look like?
I had a bunch of questions in my head, I boiled them down to three.
- What does a responsive, lego-like, customisable point of sale look like?
- How do we improve the existing products & customer search?
- What are some of the lego pieces we can offer our retailers?
Question 1: What does a responsive, lego-like, customisable point of sale look like?
Mobile first
I began by listing out only the essential components for completing a sale transaction:
- Search products & customers
- Edit the sale (Discounting & notes) — Checkout
- Pay for the sale — Payment screen
- Complete the sale — Post payment screen
I’ve left the customisable modules area open intentionally to make space for features that aren’t validated yet.
Question 2: How do we improve the existing products & customer search?
Better, faster, stronger search
Combine product + customer search
We brought global search from iOS Register to the web. Combining products and customers into a single search bar.
Separate product variant selector
We are now only showing top level product names in the results dropdown, and clicking the result will bring up the variant picker. This little change has drastically improved the usability of product search.
Slow typer? Use a barcode scanner for even faster checkout
The global search bar also acts as an area for barcode scanning. Simply put the search bar in focus and the user can quickly scan products into the checkout.
Question 3: What are some of the lego pieces we can offer our retailers?
Who knows. The landscape of retail is forever changing. Every retailer may have different ways to run their store. With that in mind, we’ve intentionally left an open space for adaptation in the future. Here are some examples of how these lego pieces could potentially work:
More questions worth asking
After covering the 3 main questions above, we already have a solid redesign & a much more usable point of sale. However there are still more questions worth asking, for instance:
How will retailers use the new responsive point of sale?
Will this encourage retailers to have multiple windows open for different tasks?
It has been a thrill to be part of the web point of sale redesign. Instead of re-skinning and recreating old functionality from the old point of sale, we wanted to rethink & rebuild the product from the ground up. The goal was to deliver the most value to our users in the shortest amount of time, yet provide a solid foundation for speedy development to enable us to keep iterating, testing and shipping.
At Vend we embrace change, because we are aware that retail is constantly evolving. It’s important we keep that in mind so the products we build are versatile enough for wherever the future trends lead us.
Register (Vend’s new web-based point of sale) is now in open beta. It is still a work in progress, so if you are already a beta customer, we would love to hear your feedback. Have fun selling! *cha-ching*
