Home>Blog>Design in the Crowd

Design in the Crowd

As far as I know, there hasn’t been a lot of research into using crowdsourcing to optimize or even design web elements. So this weekend I ran a simple experiment into using crowdsourcing to create the world’s first crowd designed button.

The Method

As a starting point, I used the WordPress download button in the newly redesigned WordPress.org header.

wordpress-download-button

I coded it using LESS, which enabled me to add randomizable variables. By randomizing the gradient colors, border colors, paddings, highlights and shadows, I could create an unlimited stream of button variations. I kept the randomizations within a reasonable range, but there was enough randomization to create some fairly unique looking buttons.

Here’s a sample of the buttons my system randomly generated. Click for a full preview.

24763621949210646105211719818478732616476

Not all the buttons are attractive. Some of them came out looking weird. But, is it possible to find a diamond in the rough?

Here’s where I turned to the crowd, asking thousands of people to perform the simple task of choosing their favorite and least favorite buttons from a set of 3 randomly selected variations. The button they chose as the most attractive received a score of 1, the least attractive received -1 and the one in the middle received a 0.

I posted the job on CrowdFlower. After 4 hours and $30, I had ratings for 12,000 different button variations.

Processing The Data

It’s fairly easy to represent each variation as a series of numbers. You can represent colors using RGB, HSV and LAB. Paddings, font size and highlights are inherently numeric. From here I used regression to essentially smooth out the distinct scores of -1, 0 and 1 into continuous values ranging from -1 to 1.

The idea is simply that a good regression model will tend to give types of buttons that consistently received scores of 1, a higher value. Given enough data, the model should also be able to predict which button has the highest chance of receiving a 1 rating, or which button will would most often be selected as the most attractive.

I tried out a few regression systems. Google Prediction, Weka and my own custom system. In the end, I chose Weka. It gave the best results in the least time. I also like the idea that it’s open source, so it probably wont disappear any time soon.

After creating a model using the 12,000 variation ratings from the crowd, I used the model to predict the ratings on another set of random buttons. Finally, I chose the button with the highest predicted rating.

The Results

After all that, this is the button my system chose as being the most attractive.

most-attractive

Not bad! I’m not claiming this is the most attractive button ever designed, but in my opinion it’s better than the current WordPress download button. What’s exciting is that this button didn’t require design input from a professional designer. That was taken care of by the crowd.

For now, this was just a fun experiment I thought I’d share. If the system matures, it could serve as a useful tool for non-designers to drastically improve the designs of their interfaces. It might also be useful for designers to break through design block.

wordpress-header

If anyone from WP.org sees this, you’re more than welcome to use this button design :)

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 4 years, 6 months ago Peter Knight (@peterrknight)

    What an innovative way to crowd source, just brilliant. I just love the idea of combining an automatic process and a human process to come up with designs – all of it outsourced. This kind of setup might work well with figuring out various color schemes that may fit a site’s theme. Setup the right variables to make sure obvious mismatches aren’t created (color contrast etc) and let the crowd pick out color schemes they like.

  2. 4 years, 5 months ago Donty

    Interesting idea, innovative approach to crowd sourced design.

    It is almost analogous to natural selection and the evolutionary process. If you could get feedback from the results to affect the next generation of buttons you could have a responsive button design that moved with the times and changes in your audience. So long as those prepared to respond match the intended final audience then people get what they like best and the button ecosystem develops and sustains.

    Following way off, this could perhaps be useful in adapting navigation design dynamically for different visitors to match their personal approach. If you view visitors as different ecosystems that your site can evolve into it could detect the type of (ecosystem) visitor by how they initially navigate at a page eg clicking on images or text, pulling down menus or sliding shapes and present them with an interface that is suited to their needs.

    Each hybrid or species of your site could perhaps optimize itself based on the responses of each visitor. This would mean people who use text, sound or graphics differently would get the type of site they find easiest, eg visually impaired, non-native languages, etc.

    Although with all this, I hear a ringing phrase in my head from Henry Ford saying ‘If I had asked people want they wanted, they would have said a faster horse!’ :-)

  3. 4 years, 1 month ago Jonathan Wexler

    Cool experiment.

    It sort of seems similar to an approach a new startup is taking to booking flights, called Flight Hacking, and compibining that with a bidding scheme.

    I wrote a post about it:http://www.jonathanwexler.net/the-future-of-humans/

    Point is, I think, why not combine the best of what computers can do, randomize and iterate, with the wisdom of – human crowds – as done here, to get the best of both world’s.

    Maybe the crew at Flightfox can use your services, Greg?

    ;)

  4. 3 years, 9 months ago Igshaan Taliep

    That is a cool concept, well thought out and executed.

    Thanks for posting.

  5. 3 years, 6 months ago Max Pen

    Very good read!

  6. 2 years, 5 months ago Harvey

    Are you using making buttons designed this way in the SiteOrigin themes?

  7. 4 months, 8 days ago TecCrowd

    Thank you so much for this wonderful information.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More