Fishpond Design Study

13th February 2012
Back to Blog

Fishpond website design in 2010

Fishpond home page

Fishpond in 2010 had a great catalog site, but not as good a customer site, so I rearranged some content but mainly added primary content to show top titles. I wanted to get the user/customer involved by showing them popular titles and then letting her dig into the site using search.

Search appears to be the primary action on the home page but I’d prefer to be shown product (entertained, really!) so that if I don’t have an idea what I want I can get some quick ideas.

I knew from their marketing that they were expanding into Australia and also competing with the big retailers like Amazon, so I wondered if I could help the design to beat Amazon’s (which I hate; still too cluttered!)

Fishpond wireframe

Fishpond home page wireframe

More often than not when you shop you’re looking for something specific. I put a product scroller right at the top and as the first navigation tab so it’s the first thing a user sees. She can buy that product now, or search through the carousel to see other most popular titles.

The Search area is top right on every page so if she gets a whim she can enter a title she’s heard her friends talk about, or even something mentioned on tv.

I felt it important to organise various user-centric sections near the top like Recommendations for You (based on recent searches and user account information), This Just In (to sell more popular releases that aren’t shown in the carousel) Browsing History (to show content she’s seen before so she can easily add to cart if she makes a decision to do so) and Bestsellers, to quickly and easily show the most popular titles.

While I agree this display choice highlights popular items and might alienate some, it’s the process of choosing these titles that shows customers what’s there, and allowing them to search on their own lets them discover titles that are more to their taste.

I added a deep footer for sitemap purposes and as a secondary navigation. Sometimes you just have a shipping issue and you want to get in touch with support to task that question; hiding this function only causes problems and bad customer feeling.

Fishpond design

Fishpond home page redesign

My goal with the design was to make updates without changing the overall styleguide laid out by the original site. I wanted new users to come to the site and know it was Fishpond (don’t want to break this trust!) but also to have them say they found it easier to navigate.

Top right I kept some blue for the signup and login feature but also made the logo more prominent and added an even more eye catching shopping cart. What’s the one thing you hold onto when you go to the store? The shopping cart. So I made sure this cart is always easy to reach, easy to read, and easy to buy from.

All section tabs are gray except for the active tab which is bright orange. The carousel area (jquery) flips through top titles at a good clip so it’s easy to review these and to jump around in case one gets missed. A prominent Buy Now button is helpful rather than being too demanding.

The other sections are either green (secondary) or gray (tertiary) so the user can find them but she isn’t confused as to what the pimary area is (the carousel). Secondary links and action buttons are green so they stand out but don’t conflict with the Orange/Shopping Cart function.

Fishpond website in 2012

Fishpond home page actual design in 2012

I’m happy to see the website is starting to take hierarchy more into account, using the product slider for featured products and adding order functions to a top bar “account” area. Search is still more prominent than the cart, but I can see why this hasn’t been changed since 2010, it’s probably the way most of their customers shop (they can discover this fairly quickly by checking Google Analytics).

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with WordPress, Shopify, Rails, Python, and ASP.net/Umbraco frameworks.

Leave a Reply

Your email address will not be published. Required fields are marked *