rufflr

rufflr is an online wardrobe. Follow people whose style you like, earn style miles each time you shop and discover amazing new clothes and accessories.

Visit Rufflr

rufflr was the brainchild of Ed Coke-Steel who came up with the concept of a website for sharing fashion on line. In 2011 he approached Tom and Joe to get involved with the project and a prototype site began to take shape.

rufflr’s vision is to provide a social fashion network, integrating with existing networks such as Facebook and Twitter, allowing users to browse, share, and shop for fashion on line. Users can create their own on line wardrobe or collection – adding fashion pieces that they love, want or own. Their selections can be shared with friends and they can also see what is popular among other users and fashionistas.

The prototype site underwent a revamp with a brand new design by Matt Gerish and a host of new features developed by the Human Made team led by Joe, with help from freelance developer Duncan Brown.

User participation and interaction

The key feature of the rufflr concept was user participation; the ability for users to interact with the site and add items to their personal collections from anywhere on the internet. Without user contributions there would be little content. The process of adding items had to be made extremely easy and straightforward and was achieved with the “ruffl It” button that users add to their browser with drag and drop.

Integration with existing social networks was going to be another key to success with the idea that users share information with friends and encourage more sign-ups. The site incorporates Facebook and Twitter login and registration allowing easy sharing of fashion selections.

The site also incorporates the idea of “Following” friends and other members within the site, with the ability to browse, comment on and add their selections.

All of us at rufflr enjoy working with Tom, Joe and the Human Made team. They are extremely knowledgeable and can implement even the wildest of ideas. They continue to be a huge asset to rufflr and we look forward to working with them in the years to come.

Ed Coke-Steel – Founder, rufflr

rufflr uses an incentive system of “Style Miles” to encourage participation. Users earn Style Miles by buying on-line from the site and inviting friends who then pass on a share of their Style Miles as well when they buy. Style Miles are redeemed via rewards from favourite brands. rufflr integrates with the Facebook invitations API allowing users to invite their friends directly through the site.

A later addition in early 2013 has been the rufflr mobile site. Like many large, image and content heavy sites, rufflr uses a separate mobile theme. This allows the site to be streamlined for mobile providing a much faster and more app-like mobile experience.

Taxonomy and presenting the relevant

With the enormous number of fashion products on the site there needed to be a way to sort through them and present the most relevant items to the user. This was done in a variety of ways using both custom-built tools and integration with existing ones.

For a product overview we built two similar solutions that present the user with the most popular, recent items across the whole site (Trending) and also amongst people they are following, and the people they follow (Your Trending).

Another way to refine the products is to allow user search by various characteristics including Gender, Category, Price and Colour. Some of this information such as price and product details is added automatically when a user ruffls a product via integration with the Google Products API, some is user selected such as category and gender. The biggest challenge came in categorising product colour.

Joe created a rather elegant coding solution that looks at the pixels in the product image and comes up with a primary and secondary colour classification for each product – github.com/humanmade/Colors-Of-Image. This allows users to select from a palette of 20 colours and have the nearest matches presented to them.

Another nifty behind the scenes tool converts all prices to the same currency so that items can be categorised into price ranges (although they are presented in the original currency in the front end). This involved use of the XE.com API to obtain the last currency rates.

The work done on product taxonomy was then progressed a stage further with the custom built “Style Genius” tool. When a user selects and views a particular product the “Style Genius” page presents them with a range of alternative products in the same colour, category and price range.

Site Performance and optimisation

With so many products to manipulate, performance optimisation of the site was a key issue. rufflr is hosted on Amazon Cloud and uses Sphinx to give lightning fast search performance. To aid in optimising the site, Joe built Time-Stack, a tool for monitoring and benchmarking metrics such as queries, time and memory usage within WordPress.

The Future

rufflr is has been a satisfying product for Human Made involving a unique concept, stimulating collaboration and many technical challenges. As a social network there is a degree of user directed organic growth to the site and as more and more users join the rufflr community it will be exciting to see the shape that rufflr takes and the challenges presented in the future.

  • click to enlarge
  • click to enlarge
  • click to enlarge
  • click to enlarge