Blog

Smart Kart UI Design

This is a few screens from a Smart Kart user interface. Basically a little computer that goes on your shopping cart and makes life amazing. Shopping cart accidents and fatalities will skyrocket, but so will store profits!  The main thing is that my design likes to highlight related products, specials, and recipes to keep people shopping. I was also sure to keep the total cost of the cart’s contents only on one screen. No way you’d keep shopping if you saw that total price steadily climbing!

I went with Loblaw® for my cart. I thought a grocery store was appropriate, and from the limited time I spent there I thought I’d have a pretty established design aesthetic to work from. I was pretty wrong, though. Their snazzy sign by my location has dropped the plural from their name, but the website hasn’t yet.  I got their nice spring green colour and ran with that, though. (the above picture is also a great example of a fun optical illusion: the ‘recipes’ arrow on the bottom is actually the same color as the ‘featured’ and ‘favourites’ links, but appears lighter because it’s on a lighter background)

smart kart map screen

The persistant navigation is on the bottom, easier to reach on a cart. The benefits aren’t just for the store, of course. Shoppers get to shop on a whole other level. There’s many engaging interactive features, like highlighting all your shopping-list items on the map, or showing items on special, adding all the ingredients of a recipe to your shopping list, and more! It would all be synced through a theoretical ‘myLoblaw’ application, which could be accessed online or through your smartphone. That engages the customer and gives them a real good reason to not to shop anywhere else.

smart kart cart contents

My classmate Michael Lynch has put his design online, in a much more speedy manner.  He went with a green color scheme but the set-up is pretty different overall. He has many more persistant buttons and forms, and everything is big and easy to read. That’s a logical choice, considering many users may not be used to computers. I was thinking about iPads, though, and how intuitive they seem to be for people to pick up. GUIs full of things you can tap and drag around that are decorated with fades and slides end up being engaging and help the user create a personal connection. It might cause shopping cart accidents, as well! You be the judge.

smartkart product directory

I also fell in love with the Gotham family on this project. Later on I met the anorexic younger sister Gotham Ultra Light. Very sexy and modern.

Tags: , , , ,

One Response to “Smart Kart UI Design”

  1. I’m a big fan of the ‘Goes Great With…” button. Sometimes I buy pita but forget to buy hummus and that could act as a reminder. Thanks for mentioning me.

Leave a Reply