Sentimental Minions

The theatricalities of the humble bookmark

  • a

  • Archives

  • Tweetions

Archive for the ‘Visual sick’ Category

Good bill/cheque design: Reliance Energy

Posted by Avadhut on 30 October 2008

I had never known that bills could look this good. Reliance has really scored a big one this time. It may seem trivial to a lot of people, but phone and electricity bills, at least in India, are in a dire need of some major overhauling. They are stupendously cryptic, and even knowing how much you have to pay and by when is a task requiring substantial digging-through-the-text. It is almost as if these utilities companies are trying to obfuscate our own information from us.

Take for example the MTNL bill, it is divided into numerous sections, lots of details, even the amount to pay is printed in red. And despite the plethora of numbers/sections it contains, most of the information printed does not make any sense to a layman—forget “the bill as a value add.”

The Vodafone bill does come close to being slightly more than useful. The language has a friendly tone, there are helpful visual cues all over the place, and I just love the cute little graphics all over the bill—it makes it seem like Vodafone is saying “Here’s your bill; we hope you like us enough to pay us” as opposed to “Oye! The bill’s here. Pay up.”

I thought that is as far as one could go with a bill. But then, today I saw the Reliance Bill stuck on my refrigerator. And, I think this is the only time I’d say this about a bill, it looked gorgeous. It made me—who usually just prefers to pay bills online—stand up, take notice, and actually blog about it.

It served on so many levels:
1. Told me who the bill is for.
2. What the amount is.
3. Told me what period was the bill for.
4. Gave me additional information about my electricity usage.

And all this without even flipping the first page. I mean, almost all bills take care of #1 and #2. But not in a manner that Reliance does. Take a look:

This is the first page. Flipping it over displays the more detailed conservatively-styled bill.

This is the first page. Flipping it over displays the more detailed conservatively-styled bill.

And #3 is something that most bills confuse me with. With their start periods and end periods and bill cycles. I pay bills on a monthly basis, and therefore I’d like to know which “month” the bill is for, not which “billing cycle.”

And what can I say about #4:

Detailed usage over past months.

Detailed usage over past months.

This is just good ole’ “Ha ha! Don’t act like your are not impressed.” I mean, my past usage as a small bar graph. Who’d have thought about it. This small section alone more helpful than MTNL’s entire bill.

It is all so well laid out, and epitomises the word “quick.” Almost the perfect bill for a city with barely enough time.

If we go ahead and deconstruct the bill, though, several things can be used for developing billing information screens for Web apps:

1. The font: Extremely important in setting the tone of the bill. I’d strongly recommend a san/semi-san serif font.
2. The language: Friendly. Informal yet professional. Helpful and approachable.
3. Layout: Clean. Uncluttered. One of the most important things here, which most designers overlook, is line-spacing.
4. Information: In stead of printing several sections on the same page, design a bill as “layers” that can be “peeled” off. The first layer could present the most basic information regarding the amount, due date, etc. Peeling off the first layer could present an itemized bill, and so on. This will also make your bill extremely interactive.

And lastly, deliver what your service promises even through your bill. Don’t let poor billing hamper an otherwise customer-friendly offering.

Posted in Bill/cheque design, Social media, System design, Visual sick | 1 Comment »

Aspiration or Version 2

Posted by Avadhut on 20 April 2008

This time around, I want to make something that will look better next year than this…

Just like Mr. Bowie

Here am I floating round my tin can
Far above the moon
Planet earth is blue
And theres nothing I can do.

Posted in Foo, Office, Visual sick | 4 Comments »

Pennywise the clown

Posted by Avadhut on 29 January 2008

Am almost done reading IT by Stephen King.

it.gif

Pencil on paper

He thrusts his fists into the post, and still insists he sees a ghost.

Posted in Folklore, Foo, Visual sick, Weeping cozened indigo | 3 Comments »

Will this do?

Posted by Avadhut on 26 November 2007

I have lunch with three women. Everyday.

They tell me a lot of stuff. So…

blackbeard_by_avadhut1.gif

P.S: Thanks R, S, and C, and a few thanks go out to P also. 🙂

Posted in Foo, Office, Sarcasm, Visual sick | 14 Comments »

Turbulent confabulations

Posted by Avadhut on 9 July 2007

My second site in Drupal.

index.png

Front page: Modules used: Panels, views, & a custom banner generation module. Although, Drupal does have a contrib Banner module for 5.1, I wasn’t too happy with the functionality. So coded my own module to handle things like Banner rotation, displaying of a recruitment banner when a new posting is uploaded, etc. Minimum work for the end user, in this case—HR. (Note: The banners in this image are simply an example—placeholders till the Web team comes up with new banners). Also, the search box and newsletter subscription form has been shifted to the top of the page and can be toggled (a tab-ing script in JS).

editage.png

Team page: Modules used: Custom Banner module, views, panels. Notice how the side-bar has appeared on this page now. This was not done through Panels (that would require too many CSS workarounds), instead a template-level workaround/hack was implemented.

cnbc_news1.png

News page: Modules used: Views, Panels. Notice how the date has been displayed—this, again, was a template level hack implemented in node.tpl.php. The blockquotes have been styled to attract attention fast to the important bits, like in newspapers. Makes for easier skimming through.

faqs.png

FAQs page: Modules used: Views, CCK, ConTemplate. Instead of using the contrib FAQs module, I used CCK to create a custom FAQ type. Further, the displaying of the content on the FAQs page—questions on top with named anchor links below—was automatically generated by using a template defined in ConTemplate. Easier for HR to upload questions without meddling with any coded bits.

cutlture.png

Work culture: A static page, but it was made AJAX-y by using the accordion functionality of MooFX.

employee-speak.png

Employee speak: Modules used: Views. Employee Speak was implemented as a custom data type and this listing page was generated using Views. All icons were handcrafted to go with the theme of the site.

colin_speak.png

Employee speak (Individual pages): Modules used: Views, Panels, ConTemplate. Notice how author names and Taxonomy are not linked and the submission line is styled quite differently as compared to the default Drupal style. This is again a template-level hack implemented in node.tpl.php.

careers.png

Careers page: Modules used: Views, ConTemplate. An open/close Javascript wrapper was used to minimize the scrolling and dynamically display content without having to reload pages.

teams.png

Teams: Static content page.

contactus.png photos.png

Facility tour page: Again a static content page. However, the Lightbox Ver 2 Javascript plugin was used to display a slideshow of photos without having to reload pages—the main Web page grays out and a photo is overlayed on top of it with “next” and “prev” controls.

facility.png

Contact us: Simple static content page.

Like I said, it will be a while before this one goes live, but at least the port to Drupal has been performed. The level of CSS detailing Drupal allows you to define is mind boggling. All you need to do is understand the styling system (Drupal has several different style sheets to deal with—system.css, default.css, style.css, and any other style sheets that are bundled with the contrib modules).

I found the Firebug plugin for Firefox an excellent companion in styling Drupal sites as well as to ensure that your site is standards compliant—it helps unlock the complex levels and hierarchies realized by Drupal style sheets.

In the end, it would be the safest to say that no matter what your design looks like—custom tables for each page, differently styled lists on different pages, differently styled blocks on different pages, etc.—nothing is impossible in Drupal.

Posted in Drupal, Office, Visual sick | 7 Comments »

Visual sick

Posted by Avadhut on 6 June 2007

Finally, I have uploaded the screen-shots of my Intranet. A wonderfully powerful and ludicrously flexible system implement in Drupal. I wish I could upload a working version somewhere, but my company policies would not allow me to do so.

front1.png

Frontpage: Custom handcrafted theme, high-clarity PNG icons, etc. The layout and look of the page was possible due to two Drupal modules—Views and Panels. The event calendar on the left is AJAX based and also generates iCal feeds (for MS Outlook). RSS 2.0 feeds are listed at the bottom.  

handbook.png

Handbook: Uses the book module. Again modded and themed to suit our requirements.

submit-post.png

Posts: Being editors, my colleagues wanted everything from the posting section’s WYSIWYG editor. The answer was the FCKEditor. I modded it a bit to better suit our requirements. For post classification, I used a hybrid categorization technique wherein primary post classification is done by selecting hard-coded categories and secondary classification is performed by specifying (optional) free tags. Primary classification determines where all the posts show up, and secondary, aids discoverability.

forums.png

Forums: Taxonomy module facilitated the creation of several nested/flat forums. They are a big hit in the office, accounting for more than 35% of all the interaction. Discussions regarding everthing—from new process reengineering excercises to Intranet look & feel—were discussed on forums.

post_single.png

A simple node page: Shows how a single post/article looks. Notice the green arrows indicating nested comments—makes it easier to track conversations.

posts.png

Post tracker: Tracks all recent posts, new comments, etc. Life has been easy thanks to the Views module.

library.png

Library: Custom node type, Views, & jRating.

library_inner.png

Library listing: A book listing from the library. Custom data type themed using the ConTemplate module. Notice the AJAX-based rating module at the bottom. The “loan now” link auto-generates an email in MS Outlook and sends it to the designated librarian. Books loaned out do not have the loan now link, instead they display information regarding who has loaned the book, when, and when he/she plans to return it!

recommend.png

Recommend a resource: Allows anyone to recommend books/subscriptions for the organization to buy/subscribe to. Generated using the WebForm module. It auto mails the forms info to the designated person. Also, it allows someone with enough privelegs to view statistics regarding form submissions and download all submissions in a EXCEL format!

microsite.png

Microsite: A microsite developed entirely within the new system. Notice how the left and right blocks have changed with the change in site.

calendar.png

Event calendar: Allows all to view role-based events, download iCal feed for one/all events, add comments to events, etc. This page view feeds directly into/from the small block on the right.

And finally, for some shock value, below the graphical representation of the database schema—db_schema.png—knock yourself out!

Posted in Drupal, Visual sick | 11 Comments »