I have been learning UX and UI design along with Vue.js and recently found a real world problem that I thought I could solve using these skills.
There is no indicator to let you know that you have added an item to your basket.
There is no way to know you’re adding it to the basket and it gets worse on mobile.
When using the Chicken and Blues web app recently I noticed that there was no indication that an item had been placed into the basket when clicking on the product.
When picking a product that had options to choose from (sauce or extra meat) a model popped up to allow you to make this selection, however when you were picking a product that had no options it was added straight to the basket.
This had lead to others in the group adding multiple of the same item to the basket not realising that it had been added on the first click.
To add a micro interaction to show users that their selection had been added.
I broke the task down into 3 parts:
Recreate one of the menu items as found on the Chicken and Blues app
I needed to recreate a menu item to allow me to add to my interactions to it. I changed up the design a little and added all the options directly to each card item, thus requiring one less click to add the item to the basket.
Only add the item to the basket after a positive user interaction
Requires: A positive interaction to add the item to the cart.
I added a large green button with the price as its text, this price gets updated as you select/deselect options that have a higher price. This allows the user to know what action they are performing. Additional text like ‘Add to Cart’ could also be added with the price.
Action: Use a micro interaction to show the user that the item has been added.
A toast notification now alerts the user that an item has been added to their basket, with the current total.
I have been learning Vue.js after using it on a client project on my placement and as it is a reactive framework and is super easy to get started with, so I thought it was a good fit for the task.
Vuex is the official state management framework for Vue so was the best fit for managing the data between my Vue components. For such a simple app it is probably a bit overkill but it gave me good practice.
I wanted to further explore how simple it is to use Firebase with Vue so I have used it to store the details about each product. Once again it is super simple to use and only a few lines of code have it hooked into the app.
I am using Heroku to host the app. It is on one of their free plans which is great for development. There is a hook to GitHub that pulls the code on a new commit, Heroku then builds the app and servers the production code using a simple Express.js server.
This is a new component library that I found by chance when I was looking for ideas on how to do the notifications. It is used for the buttons and the notifications on the app and I think it works really well.
- The Menu Item component template.
It was a small change that adds to the experience.
I am really happy with how this project turned out. I purposefully kept the scope of the tasks small to allow me to focus on the interactions.
I feel that the notification pop-up effectively shows the user that an action has been performed once they have clicked the button, which is an improvement on the previous version.
Obviously this is all biased to my opinion as one person and the creator. Hopefully this story will lead to it being reviewed and commented on by others and I can make some more unbiased observations in the near future.
Take a look!
Thank you for reading.
If you want to check out the app it’s available at order.iamsimonsmale.co.uk. As it is hosted on a free Heroku dyno it may take a little longer to load as it sleeps when not in use.
Feel free to reach out to me if you have any comments, suggestions or thoughts, I’m @simonsmale on twitter.