Retail Price Checker
Design improvement
Designer Name: Ramon Shitta
Project Duration: 7 weeks (development ongoing)
- Research and data collection – 1 week
- Wireframe and prototyping – 2 week
- Design iteration testing – 1 week
- Design adjustment for developer handover – 2 weeks
- Report writing – 1 week
Tools: Invision, Figma, Zeplin, Visual Studio
Role: UX Research, UI Design,
Background of the problem
When I was working in business operations in a supermarket, we had a problem. There were issues with getting the up-to-date prices of the items onto the individual items in the supermarket. In order to remedy the situation, a team member of mine made a design using HTML, CSS and JavaScript. It worked fine for about 6 months till we had to switch platforms that broke the API endpoints.
After doing a UX design course I realized that the design was a bit hard to use after observing a few of the team members and customers struggle to use the interface. Based on that I suggested doing an improvement, and that was the basis of this project.
Current design features
- Connectivity – Knowing if the system is online or offline gives visibility to the user and to the technical maintenance team as to if the prices will be up-to-date. If the system is not connected for a long amount of time there’s a very low probability that the prices will be correct which will lead to customer complaints
- Status bar – This lets us know how effectively the system has pulled all of the information from the main database it’s connected to an EPOS via an API connector. All of the entries being pulled means that all of the prices are up to date and there’s no need to refresh the system
- Price – This is the most important, what is the item and what is the price?
- Shopping list – Apart from just getting one item do you use or would like to have a feature where they can add up the prices for a few items and see the total.
- Users – technical team, supermarket staff, customers
Thinking about development from the beginning
To be sure the design was possible to be developed, some decisions were made from the beginning as to how the layout could be in order to ensure that on different screen sizes the design would be able to fit. That being said each block had to be defined and each breakpoint had to be considered before the design process in order to see what was possible that could fit on the screen.
My main question was “What is the most important to show on the screen?”
I realized a few things about the current interface:
1. There is no clear hierarchy – Every font is the same size and it is unclear what is the most important
2. Not all of the information is for the customer – due to the different users of the system there has to be a way for them to see information relevant to them while still prioritizing the price which is the most important for the customer.
3. Price location – The most important information is price yet it is not the most obvious focal point of the screen
4. Colors used are a bit distracting as they never leave the screen
5. Notifications – it has to be clear that they are a temporary pop-up and not that they’re a permanent fixture on the screen so that it is also clear how that’s the notification can be closed
Notes from the user tests:
- The information at the bottom of the screen is more for the technical team and they can confuse customers if it remains front and center of the screen.
- Though it would be nice in order to add things to a shopping list, at the moment the business is not ready to do that because that starts to bleed into the e-commerce store that’s upcoming.
- The instructions could be a bit clearer and a bit more front and center
- The overlay is a bit aggressive, and the timing can be worked on because it’s a bit fast
Realizations based on user test notes:
- there was a lot of distracting information that was not relevant to the main action being displayed on the screen.
- In order to make this information easier to understand, a hamburger menu was introduced that would be the main form of indication if anything is wrong with the system. Based on your interaction with that hamburger menu different menus would pop up showing the relevant information.
- The most important information is price and it should be bold and higher up when the information is retrieved
Solution & Impact Overview
Based on the feedback collected the designs were redone and it was found that it was possible to join two of the designs into one. That led to a more streamlined and simple process to follow in order to check prices.
Based on my research here are the final high-fidelity screens and a link to the protoype in Figma. After this, I handed over to the developer to bring the solution to life.
Usage of product
In the supermarket that I worked in there are about 1500 transactions a day. Though this number might not seem significant, it becomes a lot when each customer has questions about prices that they need to ask. There’s not only slows down the work that the team members have to do but it also forces them to have to go back and forth between a cash register and a customer to continually check prices.
If 25% of customers use the price checker a day, that would amount to about 400 individual price checks in a day.
