News

The process behind the Social Signal website

posted by Veerle Pieters
18 May 2009

At Duoh! HQ we aren't afraid of a challenge and that's exactly what this socially oriented site turned out to be. We had to reboot ourselves during the design process but that's all part of our job description. If you are interested in a look behind the scenes read on.

About Social Signal

Social Signal is a web strategy company that helps business, non-profit and government clients use the latest web tools to engage their customers, supporters and the general public in crucial conversations.

The scope

Our mission was to create a site with a design that creates these adjectives:

  • Creative, warm, fun
  • Innovative, cutting-edge
  • Brilliant, smart, insightful

The balance had to lean towards creative and fun. Our client didn't want to feel dry or corporate and still come across as smart and knowledgeable. As designer it is our task to translate all these goals in something that works.

You win some, you lose some

The very first design proposal started off with a more neutral feeling, using subtle colors for the content and color accents for the navigation. For some reason we got stuck on the idea of using the colors of the logo for the different sections for the site. It didn't really cross our minds to use more of the colors of the logo throughout the design. We just thought that this would be one step too far, and that the site would look way too playful.

Social Signal very first design

The first feedback we received was that the design didn’t feel as creative and funky as the brand. They were wondering if the design just needed a few playful graphic elements and the judicious use of more colour, or a completely new concept. They did like the very clean, almost Mac-like design and the distinct areas of the page. They wanted a more creative, less corporate looking design.

And so 'colors happened'...

First design proposal using the bright warm colors, with rainbow

We decided to use a lot of the primary colors of the housestyle which are warm ranging from red to yellow. Red is the main color throughout the site and is used as link color, as well as accent color. Yellow is used as a background color for the footer. Together with the red to orange gradient, we tried to create some sort of a transition between red at the top towards yellow at the bottom. This way things look colorful, but still balanced. Using green and blue for different kind of accents throughout the page, helped giving the design a visual hierarchy.

Final design

After several tweaks and revisions, this was our final design:

Final design

The client liked the rainbow very much but wondered if visitors might misinterpret it. Using only the primary warm colors for this and making it look more like a signal seemed to be the ideal compromise.

Impact of the design on the website

It is hard to imagine but there are still people who think that design isn't important. We strongly believe that it plays a very important role in the greater story. To learn what impact the Social Signal design had for our client we asked Rob Cottingham this question.

What kind of impact and or results did you see from this redesign of Social Signal?

The most immediate impact was with our team: we love, love, love the new design. It's made us much more enthusiastic about encouraging people to visit our site.

The response from customers, colleagues and visitors alike has been overwhelmingly positive: lots of compliments on the new look, but more important, we're seeing a big upswing in engagement on the site. Everything from overall traffic to blog comments to contacts from the site is up sharply.

And one unexpected but delightful outcome: we love to spend time there. Because it feels so much like Alex and me, and because it's so attractive, we're much more motivated to generate new content and engage with the site ourselves.

What we did

Brand design and consulting, user interface design, graphic design, and CSS/(X)HTML template development.

Comments

  1. 1 kevadamson Mon May 18, 2009 at 11.03 am

    The final design certainly takes the best of the two previous designs and makes it work. Looks fantastic. Great job!

  2. 2 Benjamin Alijagić Mon May 18, 2009 at 11.11 am

    Great Job!

  3. 3 Faisal Mon May 18, 2009 at 11.11 am

    wonderful

  4. 4 Dion Mon May 18, 2009 at 11.24 am

    Third try is a charm here! Very much like the warm feeling of the site, playful but still trustworthy. Bit confused about the rss type rings, suppose they are part of their housstyle? Not liking the tabs tho. Seem to cramped in comparison with other design elements of the site which are spacious. Thanks for the great write up :-).

  5. 5 Matt Hill Mon May 18, 2009 at 11.56 am

    Wow, this is a gorgeous design! I really love the bold use of colour. Red is a favourite of mine, but it’s often hard to use in large amounts on websites and I think you’ve managed a really good balance here.

    The slighlty sketchy feel also works really well, with simple shadows under image borders and folded/torn paper adding interest without going over the top.

    I’m curious that the client didn’t like the full colour rainbow of option 2, I think it’s a great accent.

    Excellent work :-)

  6. 6 Sean Mon May 18, 2009 at 11.57 am

    A truly beautiful site and a great post to read.

  7. 7 Jan Mon May 18, 2009 at 12.18 pm

    The final product is absolutely stunning! Is this the first time you had to do several revisions for a client?

  8. 8 Bridget Stewart Mon May 18, 2009 at 03.16 pm

    I really like the final design. I think changing the rainbow to a signal was a wise move. It fits with the name of the company and still adds a great flavor.  The bold use of color is fantastic.

  9. 9 Simon Wed Jun 3, 2009 at 10.54 am

    Inspirational! I love to see these “workflow” type articles, it really helps to identify with the development process that we all go through.
    The vibrancy of the design is also so fresh, when everything else these days seems to be going “Web2.0 grey”, much like the first draft!
    Maybe this will push me to be more bold in my next designs!
    Thanks for a great article.

  10. 10 Daniel Thu Aug 6, 2009 at 08.33 am

    I love to see these workflow type articles, it really helps to identify with the development process that we all go through.