Put Functionality Before Design, Free City Supershop!

As someone who reviews ecommerce sites daily, I know that the same old design and layout can get boring. I totally support websites that break the mold and try something new and fresh with their design. However, my support fades really quickly when design gets in the way of usability and functionality. A good example of this comes from Free City Supershop. Sure, it looks cool, but there are aspects of the shopping experience that have been sacrificed for this design.

Let’s take a look at the home page first. There is a large banner at the top, and then below that, shoppers can scroll through all the items on the site. They’re all just thrown in here together, but you can click on one of the category icon buttons across the top to see only t-shirts, sweats, accessories, etc. This part I don’t mind. What I do mind is that you can’t see any product names or prices. Shoppers will have to click on the quick view or full view of every item they want to know about. I also mind that there isn’t a search function or a sorting menu, and I would suggest adding these asap.

freecity1 copy

I clicked on the quick view for this white t-shirt to find out more about it. This is a little weird too, because the quick view option looks a lot like the full view, expanding to fit the whole width of the browser. I’m not really sure what the point is. There are even some related products suggested at the bottom. Again, no product names or prices, so it’s kind of hard to tell what you’re even looking at (especially with those circle things, which are buttons). I was also a bit confused to see shoes here. I figured out that shoes are under the accessories category, but the icon for that category is a phone case, so I hadn’t realized this site sells shoes. Making a separate category for shoes would be a good idea.

freecity2 copy

Although I personally would never spend $160 for a t-shirt, I added this item to my cart. There isn’t any sort of pop-up, but the purple “your bag” button in the upper right corner indicates it has been added. I clicked here to view my cart. This page doesn’t match the color scheme of the rest of the site at all, so it’s a little jarring. I do appreciate that there’s a status bar along the top showing your progress through the checkout process. But I also noticed something weird here. There is a check box under the “yes!” column, and I have no idea what it’s for. I went though the whole checkout without it checked, and it worked just fine, so I’m confused. I suggest eliminating this, since it doesn’t seem to have a purpose.

freecity3 copy

Other than the fact that all the checkout pages have a totally different look and feel than the rest of the ecommerce store, the process itself was pretty simple. However, I want to point out one more page that I have a problem with: the contact page. Shoppers can access this page from the button in the upper right corner. Another different color scheme here… Maybe the whole site is just meant to be mis-matched? Regardless, my quick suggestion ┬áis to add the time zone. With an online store, you can’t assume that shoppers will know that your physical store is in California and on Pacific time. Best to anticipate potential confusion and let people know.

freecity5 copyThe main lesson here is that although a unique design is great, and an ecommerce site should always express the personality of the brand, this has to be done cautiously. Usability and functionality have to come first! Free City Supershop could use some updates, such as adding a search function, sorting menu, and names and prices for each product on the category page, to make the shopping experience easier and more intuitive for the customer. Otherwise, the cool design of the site is just a waste.



1 Comment

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>