Folksy re-design 1: Layout and Design

Folksy is evolving. We’ve been working to improve the platform and the service in light of feedback we’ve had, testing we’ve done and our own desire to do better for you.

The design work is designed to improve the buying experience and ultimately help designers and makers to sell their work. The most visible signs of this evolution are the new layout for key pages, a change to the logo, and a change in the navigation. Over the course of three posts this week we’re going to be introducing the new changes. In this post I’m going to give an overview of the changes, introducing the general layout across key (mostly buyer) pages and some of the information design they use. The next post will look at what we’ve done to improve search, browse and findability. The final post will focus on some of the features and functions we’ve introduced and will also identify some of the things we’ll be doing for subsequent releases to the service in the following weeks and months following this major release.  The release is scheduled for midnight (GMT) on Thurs 17th November so you’ll all be able to experience it on Friday 18th.

Optimised for different screens

As people are now using a variety of devices from laptops and desktops to iPads and smartphones we’ve tried to make the site usable at different sizes and widths. The design is responsive up to 978 pixels wide and will respond to different screens sizes (for example 768px, 480px and Android and iPhones).

The layout and logo

The new design still focuses on images of work, in fact it gives more emphasis to imagery, with each grid image being bigger (190 * 190 pixels as opposed to 145 x 145 pixels). A cleaner and more professional layout will inspire confidence in Folksy and the many designers and makers and their work. At the same time we’ve retained the character and personality that so many people love about Folksy. The logo is a nod toward the fun and variety that can be found and also an antidote to the clean, professional layout.

Homepage

A homepage is rarely the first place that people arrive at. Most people coming from search and third party sites arrive at category or item pages. Yet it is still important in setting the tone for a service and serves as a good base point for browsing and in many ways is analogous to the window display in any good high street store. We’ve kept the homepage (logged in and out) as the place to promote featured items around a central theme. The theme will be named, something that people could only guess at previously. The homepage also features one of the featured sellers at any time. In the next release after launch we’ll be introducing dynamic themes which will also be promoted from the homepage (and elsewhere). More about that later.

The themes you see at the top of the page will initially be there to promote different categories and sub-categories and content on Frankly as well as prompts to sell.  These promoted themes may appear on section and category pages too.

Section pages, Category pages and Sub-category pages

We now have section areas which are essentially ‘uber’ categories, then category pages and of course subcategory pages. The drop down navigation means you can scan categories and a selection of subcategories quickly. I’ll say more about browse and findability in the next post but I want to highlight two things these pages do which differ from what you’ve been used to. Firstly, we have filters across category pages and sub-category pages for price, materials and colour. Secondly, we have continuously scrolling pages – no pagination. Continuous scrolling is a relatively new behaviour online it’s particularly well suited to a site like Folksy where you have large inventory. Here is a category page (with just a few items in to indicate how it will look):

Recently listed items, which used to appear on the buying page now appear in each section page (relevant to where they are listed):

Item page

We’re excited about the item pages. This is where a piece of work sells itself and speaks to the customer. We wanted to bring more of the designer and maker into this space, to draw attention to the provenance of the work. Key to the provenance of any work is knowing the individual behind the work and a place where the item was made and a time or date. So, in this example, you can see that the item is “designed by Corrina Field in Birmingham, September 2011”. It’s a way to present data that sounds human.
The page celebrates the work and for this reason the banner that was used to adorn item pages is no longer displayed. This is partly because in tests we’ve done it was distracting for customers to see so many different banners, many of which did not do justice to the work they sat alongside. The customer wants to explore the seller’s other work once they have begun to appreciate the piece of work they are currently looking at and not before. The size of the item image has also increased from a maximum of 495 pixels wide to 642 pixels wide. Whereas all images used to be cropped square the new designs allow you to have different aspect ratios (landscape or portait up to a maximum of 642*1000). This will only apply to new listing, existing images on the site will be framed so they’ll still look beautiful:

(note: the inspiration text for this item is actually drawn from the interview with Corrina this week in the Folksy magazine, Frankly).

Shop page

Personally, this is my favourite page. We’ve brought more of the designer and maker into the page, with copy drawn from their profile page. It says craft and that is critical in a service that is promoting designers and makers and their craft skills. The navigation switches to the left in a traditional two column layout, which respects the way people read, from left to right. Banners are still supported (there just isn’t one in this screenshot) and existing banners will be resized to fit perfectly in the new page. I don’t think there’s anything more to say, it’s just simplicity well done:

The listing process

We’ve been planning a one page listing and a one page edit for over a year and we’re so pleased to deliver both in this release. One. Page. Phew. HTML in descriptions is no longer supported, again, to try and give the buyer consistency across the site. Other changes to the listing process include fields to be able to promote and show work differently, so for example where an item was made, when and also an optional field to describe the inspiration for the work. Not everyone will feel inspired to complete inspiration so if you don’t complete this field it won’t display.

All the images you see in the blog post can be found in the Folksy Redesign Flickr set.

Up next: Browsing, searching and finding.