posted by Veerle Pieters
16 February 2011
It's been a while since we last talked about a design project here on the blog. The one we want to share with you here is the design for a webshop we designed and (front-end) coded, called Designcollectors…
Designcollectors is a Belgian webshop that sells high quality design furniture from the Vitra Home collection. Their target audience are people who love timeless, durable design furniture. Design furniture is expense, but that's because they are more than just functional items. It's something we can admire in our interior for our entire life. It doesn't loose its value. The pieces are created by great designers, icons like Charles & Ray Eames, George Nelson, Frank Gehry, Verner Panton, Maarten Van Severen… Design lovers, design collectors. We at Duoh! were of course keen to be part of this project as it is something we are also passionate about.
The briefing we got from the client was mostly based on a face-to-face communication between the different parties involved in the project: the client, the back-end developer and us. The client didn't have a concrete plan to follow in place, instead there was the request of building 'such' website from scratch and so the whole briefing was based on the brainstorming session we had about the look and feel, the general approach of the site, and the technical aspects that would impact the back-end. For this project we were responsible for the IA and general concept, the design, and all XHTML/CSS front-end coding.
We started by defining the wireframes for the site, including the main pages such as the homepage, the product category overview page and product detail page, and all the shopping cart and check-out process pages.
The wireframe of the homepage
The wireframe of the product pages: product category page and product detail page:
The wireframes of the shopping cart pages: step 1 showing the shopping cart, and step 2 the login of members, or option to register:
The wireframes of the shopping cart pages: step3 showing secure payment via credit card, and step 4 the check-out page:
The logo and color palette
Once the wireframes were approved we started with the design of the web shop logo and the homepage. Our idea was to keep the general look and feel in the same direction of Vitra, since the shop is selling Vitra furniture.
It was clear from the start that the color red would be used as highlight color, in combination with a blueish black as primary colors. The site's design should feel light but yet colorful. So our intend was to use a lot of white to make sure the product photos pop. As secondary colors we chose a bright light blue, beige and a light sand color.
As for the choice of typefaces, we opted for Futura Bold in combination with Futura Book for the name of the logo, and Futura Bold for the big headings. For smaller headings which are HTML text-based, we chose Century Gothic as first option, Helvetica for second and Arial as third. Body copy and the rest of the text would be in Helvetica as first and Arial as a second option.
From the start we had the idea to combine the shop with a blog. This way the site would live and people would be informed about what's going on in the world of design furniture. Which new products come to market, finding out a bit of background info on how the products are built, or about their creator, info about expositions, new deals on the site etc. That's why the announcement of the blog is at the most prominent position of the homepage. It's a message telling the visitor that the shop is driven by people who are passionate about interior design and design furniture. Saying, this is not just another static shop.
Considering the people who would likely buy design furniture, we thought it was important to be able to look for products not only by category, but also by designer.
Another detail, if you can call it that, was giving special attention to the way the product is shipped. After all, you are buying something very precious and expensive. That's why we thought it should have its permanent place on the site somewhere visual, reassuring people that their product is shipped and delivered with extreme care combined with great service.
I need some help…
We've also spent some work on the help page. This way people really see how the site works, and they see how easy it is to shop and buy online from the site. People also get to see how the gift list feature works.
A visual heading for each category
When we were creating the wireframes I reserved extra space at the top of each page for a big visual. We had these great photos at our disposal to work with so we opted to give them a prominent placing in the design. Great photos help lift the design in general. They're ideal to sell your product —definitely if your product is design furniture. It's a must. These big visuals set a mood and atmosphere telling the visitor what the furniture is all about.
A visual shopping cart
One of the ideas we had was to try out something fun with the shopping cart. Once a product was added to the cart, it would appear in a vertical list at the top right in the header with a small thumbnail. At the bottom we used the shopping cart icon, in such a way as if the items literally fall into the cart.
Another thing on our 'special attention list' was the 'add to cart' link with cart icon, that it was placed on the detail page of the product and not on the category page. On some sites you see a cart icon already on the overview page, giving the user the impression that once he clicks the icon, he adds it to his cart, while instead he or she is just transferred to the detail page first. This is bad usability as the user expects a different action. Another reason is that most of the items are customizable, so the user also needs to define things like color, fabrics or something else.
A gift list
One of the features added in a later stage was the ability to create a gift list. We tried to approach this in a way that the user could create such list in less time and with minimal steps involved. We though this page should be extra appealing, by using something light and colorful in combination with simple language, highlighting the key words: 'Find', 'Create' and 'Edit'. It was based on the same idea on how we try to invite people on the homepage to shop. Using the 1, 2, 3… steps approach.
The Front-end coding
We were also responsible for all the front-end coding of the web site, meaning all the HTML/CSS coding, including jQuery scripting. The site has been up for a while, and uses XHTML Strict. In case you want to explore the pages we've created, you can view the list here. Just keep in mind that not all links within a page will work and that all data is fictive, as these are just templates we handed over to the developer.