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.

 

The new homepage

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.


25 Responses

  1. Sarah
    Sarah November 7, 2011 at 6:15 pm |

    This looks great, I love the larger images and can’t wait for the one page listing. Will shipping profiles be included with these changes?

    http://www.folksy.com/shops/eyeshootphotography

    Reply
  2. Elaine
    Elaine November 7, 2011 at 7:30 pm |

    Wow, that all looks wonderful – I love the front page colour scheme, very 70s.

    Reply
  3. accidentalvix
    accidentalvix November 7, 2011 at 7:32 pm |

    Love the new logo, and the overall feel is much fresher… can’t wait to see it rolled out :) xx

    Reply
  4. Becky / Redbirdjewellery
    Becky / Redbirdjewellery November 7, 2011 at 7:39 pm |

    might just have to stay up late on the 17th to see it happen – will there be champagne? Looks lovely!

    Reply
  5. Silversynergy
    Silversynergy November 7, 2011 at 8:58 pm |

    This looks fab!
    Looking forward to the new Folksy.

    Reply
  6. alisonmooredesigns
    alisonmooredesigns November 7, 2011 at 10:53 pm |

    I am totally in love with this new site! It looks like a lot of hard work has gone into this. Give yourselves all a well deserved pat on the back :)

    Reply
  7. Didy Ward
    Didy Ward November 8, 2011 at 12:54 am |

    I’m loving the new look and feel happy that Bonny Lass will be there when the new Folksy goes live. Better add some more items to be ready and waiting!

    Reply
  8. Su Bagley
    Su Bagley November 8, 2011 at 9:34 am |

    Looking good! Loving the new colour scheme, can’t wait until it’s live. Really like the one page listing and editing and that you are bringing in continuously scrolling pages :~)
    Good luck with the re-launch
    Su
    x

    Reply
  9. Gemma Andrews
    Gemma Andrews November 8, 2011 at 10:32 am |

    Liking the one page listing.
    Does the fact that html will no loner be supported mean that we will not be able to link to similar/complimentary items in our descriptions? Eg. This is also available in blue with a clickable link to the relavent item.
    Gemxxx

    Reply
  10. Lucy Hopping
    Lucy Hopping November 8, 2011 at 10:35 am |

    This looks so fresh and professional! Good to see that Folksy is moving with the times. Especially when it comes to the ease of use of the site which can sometimes be frustrating! Well done Folksy x

    Reply
  11. Colin Griffiths
    Colin Griffiths November 8, 2011 at 10:45 am |

    The new site design is great but I don’t agree with losing the sellers’ banners. They gave each seller an individual identity and were a chance to stand out from the crowd. The banners were signage for our own shops within the Folksy market.

    Reply
  12. Aileen
    Aileen November 8, 2011 at 11:01 am |

    SO excited about these new changes! The site is going to look fantastic and it will kick a few of us into working on our shops a bit. Love the Inspiration section. Having just done a very successful show where quite a few of the items were sold after a conversation about the inspiration behind the piece, I can totally see the value of this feature. Can’t wait to get working on the new look!

    Reply
  13. Sixes and Sevens
    Sixes and Sevens November 8, 2011 at 11:20 am |

    Liking the look of all the changes. I definitely think it will help us look more like professional designer/makers rather than hobbiest. I am a bit worried that in the larger format product images my photography won’t look up to scratch. Looking forward to getting started on new listings etc. Thanks for all your hard work in getting this done Folksy team.

    Reply
  14. zebedee
    zebedee November 8, 2011 at 12:09 pm |

    It all looks amazing….thank you Folksy. Zoe

    Reply
  15. Liz Muller (green grass)
    Liz Muller (green grass) November 8, 2011 at 12:13 pm |

    These are fantastic changes! I LOVE the new logo, and I am so looking forward to the new listings & site. Bring it on!!! Well done team.

    Reply
  16. Jo Reed
    Jo Reed November 8, 2011 at 1:33 pm |

    I love the new look, I was a bit worried that the fous would be the knitting/fabric side but this looks really modern and able to incorporate everything.
    I’m really glad we are emphasising the craft.

    Reply
  17. Vicky Jarman
    Vicky Jarman November 8, 2011 at 6:32 pm |

    this looks great – much more professional. you’ve clearly put a lot of thought into this. I’m new to Folksy but already looking forward to the one page listing, nice one!

    Reply
  18. robyn Wilson
    robyn Wilson November 8, 2011 at 7:12 pm |

    looks fab! especially the one page listing!
    When I click to select the images to upload, will I be able to use cmd/control to select them all at once? I’d love that!!!

    Reply
  19. pouch
    pouch November 8, 2011 at 7:58 pm |

    can’t wait for one page listing!! love, love, love :)

    Reply
  20. Hannelore
    Hannelore November 8, 2011 at 10:14 pm |

    Like the one page listing/ editing but don’t think much of the logo, sorry. Ebay is all that comes to my mind. And I didn’t think a shop banner was that distracting, plus people might remember the name of the shop and come back to buy further items, but if it is not there they may not be able to find you again. There you are, my penny’s worth. You probably don’t agree with me but that is nothing new.

    Reply
  21. Margaret
    Margaret November 8, 2011 at 10:37 pm |

    I have to agree with Colin about the shop banners, I like to feel I’m buying from an individual shop, not just buying from Folksy and the shop banner on the item pages added to the feeling that the buyer is in that particular shop and helps give the shop it’s unique identity. I often arrive at an item page from a link, so if the shop banner isn’t there it isn’t going to be immediately obvious which shop I’m in as it is now.

    Also, I’m not keen on the logo, it’s a bit distractingly multi coloured and looks a bit uncomfortable on the eye with the merged colours/letters.

    Reply
  22. Folksy re-design 2: Searching, Browsing and Finding — Folksy Blog

    [...] we did a walkthrough of key buyer pages and showed the new layout, design and logo. This is the second of three posts about the new design and I want to focus on the way in which we [...]


Leave a Reply