News

DealTattle

posted by Geert Leyseele
24 November 2009

DealTattle.com provides coupon codes and discounts for millions of ready-to-buy deal-minded shoppers. Duoh! was responsible for the creation of the logo and the design of the web site.

Doing research

When DealTattle LLC approached us to create their online presence, we started the project by doing some research to see what competitors were doing. The common factor that almost all coupon sites share is that there is a lot of content to deal with. On most sites it's hard to find your way, and see structure in all the information, and that leads towards usability issues. Our main goal from the start was to make an attractive site with a simple and easy to use interface.

Sketches for Dealtattle logo

Design process

We started this project with the creation of the DealTattle logo. When we stared thinking about how we would visualize things, we delved deeper into the reason why you would use the site. We envisioned a sort of a mascotte that would serve as the DealTattle brand. The main purpose of a coupon site is to save money. After giving it some thought we came up with the idea to use a savings pig. That's when Veerle hit her sketch book and started experimenting. You can see that process from sketch till finish in the movie below.

Evaluation of the content

After receiving the content from the client we started to evaluate everything. We tried to give the content a structure so that it would easily guide the visitor towards the coupons he or she was searching for. With all the content in place we tried to avoid multiple things screaming for attention.

The top part is the section of the site that sets the mood of DealTattle. In the first try we had a landscape in place but that didn't work out as well as we originally thought.

image

We were trying to set a certain mood, but the focus got away from deals and saving money, which is what the site is all about. So we dropped this idea and tried to focus more about the concept of saving money instead. Sometimes you have to reboot your brain and that's what we did. As a result we came up with the idea to use the coupons to represent the searching. Now the the main focus points are the little piggy and the search field in that top part of the site. With all the different kind of coupons on the homepage we thought of using jQuery and make separate items for popular, new, expiring, free shipping, and printable. This way the user can tab over the different coupons and only see the coupons for that particular part. We tried to give all the content enough breathing space so that it didn't overwhelm the visitor.

DealTattle web site
Icons

To represent the stores, we had an idea to use a big icon. We would use that icon to make the logos of the participating shops look a bit more interesting and draw attention to them. Working with several logos where you have little or no control over is always a designer's challenge to make it still look attractive. At the end of the project the client also asked if we could create icons to visualize the most popular categories of coupons that are available on the site: electronics, toys, clothes and computers. By introducing these colorful big icons, the user's attention is drawn to this particular area, which seems perfect to create a breaking point with the text.

Sketches for icons for Dealtattle

Icons used in the DealTattle web site

Portfolio

You can view the logo and the web site in our portfolio.

What we did

Graphic Design, art direction, user interface design, and information architecture

Comments

  1. 1 Michael Short Tue Nov 24, 2009 at 08.50 pm

    Wonderful job as usual Veerle :) You never cease to amaze me. The website is clean and easy to use, so I think you achieved your goal there and the icons look great.

  2. 2 Kathy Burke Tue Nov 24, 2009 at 09.07 pm

    The movie with the process from sketch till finished result in Illustrator (I guess) is fun to watch. You get a bit of insight in how you are doing it with the pen tool.

  3. 3 Tony Geer Wed Nov 25, 2009 at 03.18 am

    Very nice, but it looks like the pig has an extra foot or he’s using his back leg to hold the loudspeaker : )

  4. 4 sana Wed Nov 25, 2009 at 07.54 am

    You have a typo in the movie: “DealTatttle”
    ———————————————————————
    I would’ve favored a design with less elements. The logo is brilliant, but the site is too crowded with unnecessary elements.
    Especially the coupons placed on top of the Search box seems to have no benefit, but only distract attention.

  5. 5 Joseph Wed Nov 25, 2009 at 07.57 am

    I like the looks of the mascot and really appreciate seeing the creative process.  I always feel like i learn something from watching you.  However, i’m confused by the 5th leg that’s holding the megaphone.  (Don’t tell me that’s its back left leg reaching forward!)

  6. 6 Chris Govier Wed Nov 25, 2009 at 09.45 am

    Sana said:

    The logo is brilliant, but the site is too crowded with unnecessary elements.

    I wonder sana if you ever looked at any other competing coupon sites out there? This one is so clear compared to most of them. This design doesn’t feel crowed to me personally because all elements have enough white space around them. In my case the search box just gets my attention due to the clever use of the coupon there.

  7. 7 Katrien Huysmans Wed Nov 25, 2009 at 11.15 am

    I agree with Chris from comment 6. Doesn’t feel too crowed to me as well. It is fun to see someone come up with something different for a change. The search field with coupons is cute example of approaching it from an another angle. Love the dresses as well!

  8. 8 Veerle Pieters Wed Nov 25, 2009 at 11.42 am

    sana said:

    You have a typo in the movie “DealTatttle”

    You are correct. Sometimes I don’t see typos when I am designing.

    I would’ve favored a design with less elements. The logo is brilliant, but the site is too crowded with unnecessary elements.

    I think this is personal. We tried to give the design and all its content as much whitespace as possible. The only part I would have left out personally is the logos of the shops because they are hard to keep clean and can contribute in making it appear more crowed. However this is compromise and I understand that they are needed in this situation. The search box was indeed an idea to try to do something different to achieve an eye catcher. Most people that I showed the design really liked that part, including the client. In the end that is what counts imho.

    Tony Geer and Joseph said:

    Very nice, but it looks like the pig has an extra foot or he’s using his back leg to hold the loudspeaker

    Never noticed it while designing it to be honest but now that you mention it you both seem to have a point. It was a though job to keep the pig in balance (so that it didn’t fell over) and still be clear that he is holding a megaphone. I’ve adjusted the pig’s leg and you can see the result at the end of the movie.

  9. 9 Philipp Graham Wed Nov 25, 2009 at 01.31 pm

    I love the attention to detail in this project. Everything seems to be in good balance and is well executed.

  10. 10 Tony Geer Wed Nov 25, 2009 at 04.15 pm

    Nice save Veerle.

  11. 11 Courtney Zielinski Wed Nov 25, 2009 at 04.21 pm

    I love the site! It’s got a lot of character and seems really easy to use. My question is more technical: did you also build the backend of the site, or did you pull in a developer to help with that?

  12. 12 Geert Leyseele Wed Nov 25, 2009 at 06.16 pm

    Courtney Zielinski said:

    My question is more technical: did you also build the backend of the site, or did you pull in a developer to help with that?

    No, in this case we weren’t responsible for the conversion to (X)HTML/CSS and the creation of the backend. Client had a developer for that.

  13. 13 Maleika Fri Nov 27, 2009 at 02.06 am

    This is a lovely design and a lovely colour scheme. The problem is, I cannot read most of the content without squeezing my eyes. There’s far too little contrast and I do have a relatively normal vision and am in my early thirties. People whose eyesight deteriorates naturally or people who simply have some visual impairment, I think it’ll be problematic.

    J

  14. 14 Geert Leyseele Fri Nov 27, 2009 at 02.04 pm

    Maleika said:

    There’s far too little contrast and I do have a relatively normal vision and am in my early thirties.

    Most of the important items such as the navigation of the coupons, the coupon explanation, coupon code and a few others are in recommendation of WCAG AA. Others fail indeed. The problem with following the contrast rules to the letter is that all items become overly contrasted and it starts affecting the design. We opt to hold middle ground and let some pass but others fail in favor of having an attractive design. Personally I am 42 and don’t have to squeeze my eyes to read it on my monitor (same on the laptop screen). Screens and how they are set up play an important role in this as well. Cheap screens make reading and contrast hard because they change the appearance of colors etc.

  15. 15 jennifer Tue Dec 15, 2009 at 06.31 pm

    A beautiful well thought out project as always.  Thank you for sharing the process.  I’ve been keeping tabs on your posts for a long time and have learned a great deal.  I love the font you used for the dealtattle logo.  May I ask what font it is?

  16. 16 Veerle Pieters Wed Dec 16, 2009 at 01.27 pm

    Jennifer said:

    I love the font you used for the dealtattle logo.  May I ask what font it is?

    The font is called MUSEO 900. MUSEO has five weights (100 300 500 700 900). 3 weights are free (300 500 700) and 2 are paid (100 900).