diaroogle

diaroogle

It’s not everyday we come across an elegant site (with a well thought-out design, good eye for typography and an appealing colour scheme) that is not someone’s portfolio site, design blog or a design company web site. Whenever I find such a site, I’m glad that issues of aesthetics concern not only designers. And the fact that the site in question is actually a Search Engine (though not your usual Google clone, but a “premier toilet search engine”) adds to the hope that one day all sites on the Web will be not only user-friendly, but beautiful as well.

Appropriately titled Diaroogle, this human-powered toilet search engine was launched in the first week of August, but it’s already generating a buzz on the Web. Some are bashing it as a disappointing application while others find it very promising.

What makes this site different from other washroom search engines (yes, believe me, there are others) is that each submission is accompanied with the poster’s personal experience and insider information which you won’t find anywhere else. Some toilet descriptions on Diaroogle are nothing short of mini-odes: some praise, others criticize while managing to pique your curiosity into try how bad the place is in real. Often they will give you a complete run down of what can be expected at that particular location, including the quality of food served, or the weird behaviour of people working there. You owe it to yourself to check out some of the listings there. If not because of the nature calls, then at least to get a few laughs.

However, I’m not here to talk about the technical side of Diaroogle, nor about the practicality of its application. I’d like to sing a bit of praise to its creators (designer Kevin Burg and developer Evan Cooney) for designing such a pleasingly looking site for not so pleasant calls of nature.

singing greys

The first thing that catches the eye is a gorgeous colour palette with dark and light greys and pinches of red that give the site a surprisingly classy look. It’s nice to see that despite shaping the site in a form of a toilet paper roll, (a paper fold in the top corner and a zigzag border in the footer) Kevin didn’t choose a brown & white colour scheme. The contrast between the foreground and background colours on the homepage is just perfect, though the small font-size of descriptions in the listings make them a bit harder to read.

the power of gotham

The choice of typography on this site could have not been more appropriate: the masculinity of the type Gotham (that was elected to represent Barack Obama’s Change campaign) appeals to male users of the site, while the femininity of Kuenstler Script Bold strikes a chord with its female users.

It’s interesting to note that Georgia was chosen to represent the promotional text on the site, (we can see it on the homepage and in the footer of the About and Press pages) while the rest of the text is handled with Arial.

There are also a few headings with image replacement techniques here and there, but they’re executed so tastefully that I don’t mind seeing them on the site.

criticisms

Even though I really like the use of Kuenstler Script Bold for the text in the search bar, unfortunately the CSS technique implemented by Kevin doesn’t work in Internet Explorer, so IE users miss out on that interesting feature.

Currently the CSS code that displays the background image in the search field is the following:

#search form input[type="text"] {
background:#FFFFFF url(/images/search_bg.gif) no-repeat scroll left top;
...
width:600px;
}

IE6 doesn’t support input[type=”text”] in CSS, so all we see is a short regular HTML text field instead. IE7 does display the background image, however after focusing and clicking on the search field to enter the keywords, the background image is replaced with the one without “Search toilets”, in IE7 it doesn’t disappear, so the search keywords appear on a busy text background:

#search form input[type="text"]:focus {
background:#FFFFFF url(/images/search_bg_focus.gif) no-repeat scroll left top;
}

This can be solved either with the use of CSS classes, rather than selectors or with JavaScript.

Other than this, the small font-size in the listings and a wish to see the links to the sites in the Press & Praise page, I don’t have any more critical remarks about Diaroogle. It is one beautiful site for a rather peculiar project. What do you think?

  1. Kevin Zak

    Excellent find, Vivien. This website really puts into perspective the idea that great typography and design can be found anywhere on the web. I had no idea that services like this existed (although I admit it is a pretty good idea) before reading this review, and it seems like such an odd place to find this level of quality design.

    I agree wholeheartedly with your observation that Gotham and Kuenstler Script Bold compliment each other very well. I absolutely love Gotham and I had not noticed that Obama used it until now. Thanks for that bit of knowledge!

    The footer definitely needs some work, in my opinion. The links are not spaced well and seem out of place in the grand scheme of things. I don’t really have a suggestion on how one would improve it, but I don’t care for how that aspect comes off. Other than that, it is an awesome design and quite a unique concept. Very nice review, Vivien.

  2. Joey

    At first glance, this website seemed kind of pointless. But then I viewed it on my iPhone and it actually seems like it *could* turn out to be a pretty good idea.

    Overall, the typography is very well executed, on both the full and mobile version. I’m not a fan of the Kuenstler Script Bold, though. They could have chosen something similar but a little easier to read, I think.

    They did a nice job of integrating Google Maps into the full version, but it is fairly useless. The full version of the site is prettier (and has more features) than the mobile version, but I can’t imagine a single instance where someone would need to use the site on a computer rather than their phone.

  3. Joey

    EDIT: What I meant, regarding the implementation of Google Maps, is the fact that mobile browsers can’t see Google Maps, which defeats the whole purpose.

  4. johno

    Yes, an excellent find. A nice looking site, and love the copy: “It’s for the discerning, on-the-go defecator…” That’ll keep me smiling all week. A very elegant looking site. Love the colour palette. Another great review, Vivien.

  5. Kevin Burg

    Hey this is Kevin, I designed the site. Thanks for the feedback and the criticisms. The script typeface I chose is actually Exmouth ( http://www.dafont.com/exmouth.font ) but it is seemingly indistinguishable from Kuenstler Script Bold. I chose it because it does compliment Gotham well but also I found it to be excessively exquisite for a site that is about toilets.

    Regarding the search form in IE6 - I made a conscious choice to not support IE6 since this is a side project and ignoring it speeds up development in a major way. To be honest, I’m within inches of putting up a page like this for IE6 users:

    http://tumbluke.com/post/47695343/from-now-on-all-ie6-visitors-to-lukees-will-be

    And about Google maps - I can’t say for certain how they appear for your average mobile device but on the iPhone version we do load static maps and I intend to create a link that will open up the location of the toilet in the iPhone Maps.app so you can really get some use out of it - especially with geolocating and GPS.

  6. inspirationbit

    Thanks, Kevin. I’m glad you’ve learned something new from my review. Last night I was reading a few articles on your blog, and enjoyed them a lot. So now you’ve got yourself a new reader there ;)

    Joey, I can’t comment anything on the functionality of Diaroogle on iPhone, because I don’t have one. As for using that site on a computer, rather than from a phone, I think I would do that if I go to NY next time. I could look for an area I’d be spending the day at in advance. Already now I’ve learned that I shouldn’t be wasting my time by going to Starbucks washrooms, as in NY they’re dirty and have long line ups ;)

    Glad you liked the site and the review, John. Are you still smiling when you recall the “discerning, on-the-go defecator”? Hope you checked a few of the listings I linked to in this review and got a few more laughs ;)

    Kevin, thanks for clarifying the use of type. I was afraid that I might point at a wrong typeface. But I was very close, looks like someone created a copy of Kuenstler Script Bold, and released it as a free font Exmouth. ;)
    As for ignoring IE6 users, although it’s very tempting, I wouldn’t do so, as there are still many users out there who wouldn’t know how to upgrade their browser, let alone switch to FF or S, they don’t even know what the word browser means, they’re just aware of that little “e” icon that allows them to go on the “internet”.

  7. Eric Hoffman

    Great review and nice looking site to be sure. I’m a little uneasy with the use of the words toilet and engine in a sentence (or tagline as the case may be)…

  8. Jane

    I totally agree with the simplicity and ease of the design. This website has a really nice balance with its typography. I will however mention that sitorsquat.com has a great design as well and the function of the site far exceeds diarooogle’s website as a whole.

  9. Rafe

    is there a forum on the site?