At The Random Lines, we had always been toying with the idea of taking an idea and building a complete website in a day – much like a ‘hackathon‘. And we kept pushing it until we saw this. We’ve also been really frustrated, not just as web developers, but also as citizens about how unusable we think our government organization websites are. If you are not convinced, please take a look at the Take Charge page and follow some of the links they have listed there, and you will see for yourself.

We wanted to take a site that we would like to use and a site where we would be doing more than just a pretty design. And being Bangaloreans, we picked the Bangalore Electricity Supply Company Ltd (BESCOM) site. A company that most Bangaloreans love to hate, and whose website, we’ve traditionally never used!

And here is what it breaks down to in our view. A LOT of links sprinkled all over the site, and upon counting, about 3 different logins, to get into different parts of the site that do different things that you might come to the site for.

So the first thing we looked at was why people, especially people like us, would go to the BESCOM site. And because of the short time-frame that we were planning to do this redesign in, we did a quick survey of only a couple of our friends and here is a list we put together, of the things that we and our friends would go to the BESCOM site for, and these are in order of priority.

1. Pay Bills
2. Check usage / Manage account details
3. Report power failure / Check for a scheduled power cut.

And these were the top 3 things that EVERYONE we asked wanted on a BESCOM site. No one was really keen on the tariffs, or the circulars or the orders for transfer and everything else that is cluttering the home page currently. And add to that, ONE single login that should be used for everything you can do on the site. That was our main focus.

Now, all of these are things you do behind a login and so, we decided the main focus of the site should be on something completely different from these. And we think that focus area should be ‘Power Saving’ and it should be BESCOM’s prerogative to educate its customers about saving power. As a government organization, it is in their interest to save power and try and reach more areas that do not have power. And that focus area could also be used to highlight different things, news, announcements, something cool!

Without further delay, this is what we think the BESCOM homepage should look like –
(please note, that this is not a complete design, and is just a JPEG right now)

A giant focus area, which can cycle through different slides, a quick single login which can lead you to your account on BESCOM that lets you use all their services. A quick reference phone number that you can use to report problems, and what we thought would be a great feature – ‘Meet your lineman‘.

So there it is, one Sunday’s effort, which we submitted to the Meta Refresh team to take a look at. Let’s see if BESCOM agrees to this design!

Today, with Facebook shares, Twitter recommendations, and back links to your site created from all over the place, people enter your site at many different places. Especially if your site is content heavy. Traditionally, we have made our homepages shiny and then have just lost interest in the rest of the site. But with today’s Internet and the tools available with each of us, very few people actually consume content on our websites. Zite, Flipboard, RSS readers, and a myriad of other apps have made your website the source of the content, but not necessarily the place where that content is consumed.

And that is with the web as it is today. What about 2 years from now? When every square inch of the earth can get an IP address your TV will be able to browse the web, they already do! And so will your microwave or your fridge. At that point, your fancy homepage will be the last thing everyone sees. How well your content is structured and more importantly, how readable it is, by other machines, becomes of paramount importance.

With everyone getting busier by the day, and the amount of interesting things to read, watch and listen to only increasing, no one has the time to read everything you write or see everything you’ve made, and everyone is looking for their quick fix. Services that summarize websites, like TLDR.it are already becoming popular - hell, someone even summarized all the 1000 odd TED Talks that are online in 6 words each! This is going to become a lot more commonplace and very soon, we might be faced with a situation where people are only reading someone’s –  or something’s –  summary of our websites. At that point, your website stops being about how shiny it looks, but more about how usable and useful it is.

What do we do about all this then?

Pay a LOT of attention to your content and website structure. Ensure that your users are treated to a fantastic experience no matter where they land up on your website, and though this sounds a bit far-fetched right now,, try and ensure that this fantastic experience carries forward irrespective of where and how your users consume your content.

And best of luck doing it, ‘coz it’s much easier said than done!

Buzzwords have the incredible ability to almost describe a concept very wrongly, and at the same time, be condescending to you for not knowing it already. ‘Cause ‘everybody is talking about it’. So in the aid of clarity, and more productive work, let me clarify some of the newest and greatest internet phenomenon your business might encounter.

Web 2.0

This is an oldie, but a goodie. For a fair few years, this actually came to mean a visual style cluttered with shiny buttons, vast, bright coloured spaces, and bold typography. These visual traits did emerge around the time, but web 2.0 actually is the shift from the one-to-many approach of magazine and company brochure websites, to the many-to-many style of Facebook, Twitter and nearly every blog in current existence. It gave the web freedom, and a collective voice that could drown out the most powerful and influential people. It solidified the internet, not simply as a communications medium, but an ecosystem, and has since exposed vast crime and brought down corrupt governments. Web 2.0 is powerful, and here to stay.

HTML5 + CSS3

There’s been a lot of chatter on this, and whether or not your site is ready to embrace this exciting new technology. Let me clarify: it is not a new technology, and, your site is ready. HTML5 is simply the next version of the HTML specification, and asking whether you should use HTML5 is exactly like asking whether you should build with HTML. Of course you should, it’s HTML.

HTML is used to structure content so browsers know how to display the text and images, and the specification is agreed upon so that different browsers will allow users to have a similar experience. Version 5 brings a lot of new ideas to this specification that will mean a better and more sustainable internet tomorrow, but it will not break your website at all. So learn about the possibilities, and use it in good health!

Responsive Websites

I was recently approached with the idea that if we built a site in HTML5, it would automatically work well on different devices and scale intelligently. These two things have nothing to do with each other. Responsive design came about as a way to combat the every growing number of devices people are using to access the internet. It is no longer adequate to design for 1024, but rather to understand your users and what they are using. To learn as much as you can about the way they are accessing your site, and try to tailor the experience to suit them.

The first thing we’ve been able to tackle is screen size. We have to deal with giant 1920+ screens, all the way down to mobile phones at 320, and the hundreds of in-between models. Not only that, but pixel density has now become a topic of much concern. We can deal with these things by setting up rules so a browser can respond to any scenario it encounters.

Mobile Friendly

This is a broad, and mostly useless term because we haven’t defined clearly what ‘mobile’ is. It seems to include everything from that decade old phone that only renders text, to our current all-screen, touch based monsters, and even tablets. What about laptops, or those mini-laptops, or what people are calling ultrabooks. They all seem to be carried away, but data seems to suggest a large amount of people use their tablets and phones from home. On powerful wifi connections. Our preconceptions about what users might need in those situations are inherently flawed when we use a word like mobile, because we don’t actually know what we mean. Before you get sold on making your next site mobile-friendly, try and learn about your actual users. That puts you in the best place to give them a great experience.

And remember, smart phones are only getting smarter, and pandering to the lowest model may piss off your best customers.

User Agent Detection

This was the old school method of responsive design. Essentially, check if someone is using IE and then hurt yourself trying to give them a functioning site. Now, more than ever, this idea has become imperative. Phones have GPS, microphones, cameras, HD displays, touch controls, gyroscopes, and a website that wants to use these must be able to identify what is possible on the current device. This is called feature detection–check if a feature exists, use it. It is far more future-proof because if the feature is later implemented, your user will automatically get the benefit you’ve built.

This is all actually part of responsive design, and soon it may not be just features we are trying to detect. We’d like to know how fast someone’s connection is so we can send them smaller images; maybe know if their surroundings are dark so we can serve a more eye-friendly contrast ratio; know if they are in difficult reading scenarios (travelling), and serve larger type… the possibilities truly are endless, and the end goal is a more usable internet.

Social Everything

We’ve seen some stunning use of social media for brands and this has lead to more social media gurus than there are normal people. Social media as easy as it is hard. It’s like walking into a room full of your customers. There’ll be happy ones and disappointed ones, but most importantly, there’ll be questions. All you have to do is maintain a semblance of cohesion and hopefully make more happy faces. The larger the room, the more daunting the task–do you grab a megaphone and yell at everybody, or join smaller discussions and work your way through hoping the people you’ve influenced, help spread the word?

You are ready to jump on social media when you are ready to listen to feedback and constructively respond, to your entire user base at once. Tough, but entirely doable and there are many examples of excellence.

Content First Design

This is a reach towards the control over details print designers often have. Before something is printed, every last word and image is checked and perfect… the design is ideally made for that exact piece and changing even one word could mean a fairly dramatic change. We don’t have this luxury in web design. Our sites are built powered by a CMS, which means content can always change, even after things are published. What content-first actually means is intent and structure first. In order to design most effectively, designers need to know what kind of content is going in, how it is likely to be formatted and roughly how much of it there will be. This allows us to build with all the possibilities in mind, so the finished product looks good no matter what gets put in at the end. So before you start picking colours and fonts, think about your content, plan what you’d like your user to see; how you’d like them to go through your site, and work towards that.

Final Thoughts

Each of these sections could actually have its very own book, and most do. I’ve tried to summarise because often the explanations are as confusing as the buzzword and you might not finally know whether to worry about it or not.

To a better internet: live long, and prosper.

The site needed to be redesigned to give the talks more focus and drive the content from user submissions. Central to this goal, was the idea of not spreading thin over lots of subjects, but letting a user experience the information with its related areas, and grow into the rest of the site as individual and deep channels. Each page has enough content to pique interest, but it quick to allow a deeper exploration rather than a scattered browse through everything.

After the conference, the site will become a space to spread ideas for innovation.

The site is built to clear standards, and designed specifically, not to be responsive, but to render beautifully at any size.

The entire portfolio system is built on vimeo‘s API, so video updates and seamless and simple and they maintain complete control over their video content.

The backend of wordpress, which houses the text content, has also been customised deeply to allow simple, and semantic updates to ‘Add a Director’ and connect to a vimeo album.

The site aims to be driven through a travelogue, connecting the experience of visiting Kerala with the packages they create. It’s more than transport and hotels, it’s learning about the cities you’ll visit, the people you’ll meet and the experiences you’ll look forward to.

The design was driven to help the colours of the photographs stand strong, interconnect the different aspects of the site, and make reading long articles easy and pleasurable – all the while leading to an incredibly simple final form that initiates the booking process.

In addition to the website, we also handled the illustration for Joshua’s Heritage logo. Joshua’s is a sister property, also located in Kerala.

So far, I’ve stood on the side of: designers should know about the tech they are using to know its potential and use it well. But one idea pushed me straight over the edge – designing in the browser.

Generally, the process for quite a while has been, a designer opens photoshop and puts together a beautiful image of a website. This is shown to a client for approvals and then the developer gets to work. He curses the designer for using rounded corners and drop shadows that cross box lines and the final product is a close approximation of what the designer intended. This is why print designers can’t do websites. They have no clue what a developer has to do to get their design to work on different browsers.

So for the latest version of our site, I decided to skip the Photoshop step entirely and go straight to the browser. There are quite a few advocates of this method, but I had never tried it for myself. The other big advantage I had, was that the content already existed. It was laid out in WordPress, so when I wrote my HTML, it wasn’t with damned Lorem Ipsum, it was real. And this make a really big difference in choosing fonts and sizes, especially when aiming for a responsive site. We embrace reflow and have to work in a flexible medium to truly understand what different users are going to see. It isn’t a process of getting the site to look the same on all systems and browsers. But getting it to look right on all browsers.

If you want to work in the web, this should be your introductory ritual of sorts. It breaks all your expectation and frees you from the constraints you put on yourself, your obsessive control over what the design should look like.

Welcome to the internet.

Bacardi Breezer drives their campaigns with music and to spread the excitement, they needed something that broke boundaries and did something entirely unexpected. OML, who handles their marketing devised an online game that allowed players to control a dancer at a party. We worked with Babble Fish Productions for sets and shooting and programmed the game in AS3.

It’s seems like a term created solely to allow some quote-padding, because if you’re not building for your user, who are you building for at all? I have the same problem with ‘design thinking’, after all, all thinking primarily involves design. If not, it is simply recollection. But this post isn’t merely a rant on the semantics of our industry.

What is a user then…

When we build websites, this seems to simply be the people who finally use the site. We choose the percentage of them we’d like to target clearly, and we tailor the site to benefit them as much as possible. This is important. And many people have written many articles on the subject. I’d like to broaden this definition, and take it a step outside just the final product.

A user is the next person who will use what you’ve made

I’ve started using a great service to turn my designs into HTML before we connect a CMS to it and touch up any CSS work. To me as a creator of a PSD then, they are my users – they need to be able to understand my intent for design and turn that into a functioning site. That file then needs to be understandable enough for a programmer to insert back-end hooks and flexible enough to accept content it was designed for. And that final code then needs to be usable enough by me, to edit and poke and prod and get everything working just right. Each of these stages, has a user. And that user is integral to the project. I’ve been on all three sides of this circle and more often than not problems arise simply from something getting lost in translation – it wasn’t designed for its next step, its next user.

Even further out

If I’ve made sense thus far, then we can extend this beyond the actual project as well. Your first email to a potential client should be usable: they should know why it’s there, and what their ideal next step is. The quote, and subsequently the contract can both be usable and allow simple understandings between all parties. Your office can be usable: do people know where to wait, whom to speak to when they walk in, are they given enough reason to anticipate the next step? Everything we put into ‘user-centred design’ can be applied to everything else as well if you broaden your definition of a user.

It could make the world far more pleasurable to interact with.