Groupon’s Buy! Button

There’s a spark of genius in Groupon‘s little green “Buy!” button.
On this particular website, the one main goal is to get the visitor to click the “Buy!” button for whatever deal appears on the screen. The first step in making this happen, of course, is designing the “Buy!” button so that it is easy to find and making it so that visitors to the site easily understand that they are supposed to click it. Groupon has done excellent job with this by not only making the “Buy!” button the largest button or link on the screen (except for maybe the main logo perhaps), but also by:
- Coloring the button in a shade that is similar, but a whole lot brighter than the background.
- Making the “Buy!” button pop even more by beveling it outward to give it a 3D real-life button-like appearance.
- Accentuating the button even further by placing it on top of a bright blue background – a background that extends to the left (Note: the button is on the left because people read from left to right, and anything on the left is going to be seen first) outside of the website’s main content area, which draws even more attention to itself.
- And finally (but a whole lot less noticeable at first glace), the designers of Groupon have designed the background of the website so that there are subtle light green rays that seem to burst outward from the center of the screen – or rather, burst outward from the “Buy!” button itself. These lines, of course, when you view them on the edges of the website, draw your eye back in toward the center and back in toward the “Buy!” button.
The color scheme for the “Buy!” button is used throughout the website (in the sidebar on the right for example), but it is the one main “Buy!” button on each page that is truly the star of this website. More importantly, it is this button that keeps its visitors clicking and continues to make money for Groupon.com.
