Tuhin Kumar

(via Instapaper)

(via Instapaper)

It’s here. #tweetbotforipad (Taken with Instagram at Pulse HQ)

I started a new blog. You should check it out.

“When you try to copy Apple, it’s like trying to copy an oak tree. You have to plant the seed and watch it grow then see what it came up with. You can’t then just watch what it became, go to Home Depot, buy a whole bunch of lumber, paint and fake leaves, then build something. Because what you build is going to be half-assed and not an oak tree in any way, shape or form.”

Can we please stop this meme now? Shit Silicon Valley says

The Ubuntu HUD reminds me of the “Just Type” from WebOS

Go out and take a walk. Lovely weather in Palo Alto. (Taken with instagram)

It’s a Girl! 

How can you not want this car? 

Craftily stitched together dialogues to for a dialogue. Also wonder what would it look like with SOPA/PIPA

Samsung’s Smart Window

This is seriously amazing.

Color App - Pool Hopping Commercial

And that is how you should NOT make a commercial. Also not fair for the guy who had to stand out of the pool to shoot them having all the fun.

A good friend asked me this question a few days back and I thought more about it this weekend. So here are some quick thoughts why I feel people share stuff online:

Ego Boost

Like it or not, a majority of us share stuff online with the final motive of being liked and commented upon. It is one of those things everybody does, nobody likes to accept. All my posts about my new gadgets belong here.

Journaling life

In lack of a dead simple tool that lets you journal your life and all aspects of it, people choose to use the services that they love to journal their life. Half of my Instagram and Path pictures fall in this category.

Your perspective of the world

I know many people in this category. People who share with the simple purpose of sharing how they see the world through their eyes. Or just an opinion. The other half of my Instagram is this. Random photos of oddities I witness everyday.

Random thoughts that cross your mind

I post almost every “safe for work”, not highly opinionated thought that crosses my mind on Twitter. I am guessing there are more like me. It is more like an alternate blog that just takes a lot less time to post on. 

No matter what you say, people share for some random combination of the above reasons. Their is most of the time, not just one reason to share this. Like everything else, it is complicated.

If given the choice between expressing an opinion and being useful, or pleasing most people most of the time by saying everything is great even when it isn’t, I’ll choose expressing an opinion every time. And if that results in derogatory feedback, so be it.

It is good to have opinions, it means you have thought about something. And what good are opinions, unless voiced!

Marco’s quoted text from his article pretty much summarizes my viewpoint on opinions.

Earlier in the day I got an email from NYTimes that talked of how my subscription is getting over. Surprisingly I have never been their subscriber.

Then I read the following on Twitter:

And then I get this in the email:

Hey New York Times, here is lesson #34 of screw up management. Don’t let two versions of the same story come out from the company. And if you ask me, here is a simpler rule, just be honest.

San Francisco in 1955: Interesting to see how cities evolve. Wonder what the parallel of “survival of the fittest” is for cities. 

“As a designer, you have your baby that you want to try and sell. To make it saleable, you might pick someone who has really nice photos in their profile and use that to make your mockups,” Felton says. “But you’re ultimately just lying to yourself and the rest of the group if you think everyone’s page is going to look like that.”

In what is a lovely article, Felton describes something that I have myself learnt over the years. It is the simple fact that when you are creating mockups, you can either choose to have the best of the photos to adorn content and make your design saleable, be that to a client or team members, BUT you know deep down that it would not be looking this awesome once you create some not -so-awesome content in those placeholders. Sadly that will be the case more often that not. So why fool yourself by using the best images and content for placeholders.
A corollary to this is that it is always the best to design for edge cases than designing for the average cases. If your design can adapt itself to the extremes the averages will of course fit in just right. 

“Yeah, it’s kind of hard to do.”

-Drew Houston in the first meeting with Apple on being asked how they hacked their way into Finder

I will admit it. I am a big fan of Dropbox and have immense respect for the engineering prowess of the team. I am eagerly waiting for the first Operating System that utilizes the doors of possibilities that Dropbox opens. 

However, that line right there, shows the attitude that made this possible in a market that others assumed was already over saturated.

It’s kind of hard to do, it always is. That is why it has probably never been done before or not been done in just the right way. That is why you have a chance to do it. That is why you chose to do it.

I have not been writing for quite a while except for the one time I forced myself because I had to write. It is not because I have been doing too much work or been on a trip to the Antartctica. It is not because I have not been creating content. Anybody who follows me on Twitter and other social networks knows I post something or the other almost everyday. I am still writing but on a different medium.

And that is exactly what has changed. The way I create content. Stuff I want to write about on my blog (not sure it is a blog anymore too, probably just a journal) is what I already do intertwined with certain long form posts when I need to talk about something in the open.
I do not want to manage 3 blogs, where on one I post about my personal stuff, another for design and another for tech and startups. They are all my passions and together make me, so it makes a lot more sense for me to have them all in one place.

In light of that I have been exploring options of a new blogging platform that makes it as easy for me to quickly snap a picture from my mobile and post about the amazing typography on the street sign I just saw as it does for me to sit back at night and write in a minimal interface like IAWriter or Ommwriter.
I am not even sure I need a hosted solution anymore. I would be happy to have my site powered by Dropbox if there were such a solution.

So here is what I would like from my ideal setup:

• Be able to write in a text editor of my choice OR the writing interface is minimal
• Has a great mobile app that is almost as powerful as the web version. If that means cutting on features of the web versions, so be it.
• Allows me to quickly post from any page on the web scrapping relevant content like text, videos, photos etc from that page a la Tumblr.
• Allows native cross-posting of stuff from other social networks like Foursquare, Instagram, Flickr, Twitter. I would prefer this to be inherently built in the app in a fashion similar to Storify so that I can quickly choose a picture I just uploaded to Instagram and make it the latest post on my blog.
• If there is a possibility of using Dropbox as a storage solution, so be it.
• Uses Twitter/Facebook as the only medium of comment.

I have been trying to look for such a solution for some time and have not found any. If at all there is something that is in the interwebs that can make me do this, please let me know. I honestly do not want to spend time on creating such a setup from scratch or hacking WordPress to do it.

Dear Steve,

I should have written this letter long time back, when I had a chance. When I had hope that there was this slight possibility that you would read this and maybe slighter possibility that you would reply to it. I never did.

I was too afraid to never hear back from the one person who I looked upon as an idol. A figure who through his years of actions had set a guidebook for me to reference when life threw a puzzle I had no answer for. Now I know, that fear of grief was nothing compared to the hollow sinking feeling when I know you will never read this. When I know that the guidebook’s last pages have been written and there are no more comebacks, lessons and magical things to come.

I have never met you or seen you in person. The closest we might have come tangentially would be when you spoke of Pulse, the company I was to later work at or when you and others at Apple had decided to give Pulse the Apple Design Award while I had just joined them. For every other moment of my life I have come only as close as using a Mac or the iPhone or the iPad and wondering if I could ever tell you how thankful I am for all these creations.

Had it not been for you, I would not be a lot of things I am today. It was my first MacBook that inspired me to become a designer. It was my first Apple blog that got me into blogging. It was my first iPhone that made me get into photography. It was your 2005 speech at Stanford that made me take the final plunge into the world of design and leave a conventional career behind. It is my first iPad with which I write this. However, you will never know and I will never have that elated feeling for which I wanted to do great work all my life so that one day Steve would take note.
For someone who I never knew personally you have sure touched my life on so many levels. I do not think I have it in me to cry for losing a person in my life but the closest I could ever come to that I did when I heard about you. You had set out to create a dent in the universe you ended up changing it for all of us.

Steve, Thank You!

Make Hacker News more readable

Hacker News is one of those sites that are open throughout the day on my machine. While it houses brilliant discussions and an amazing community, as a designer, the design of the site did not feel right to me. It was a pain to read through comments and I always had to hunch forward to be able to read through the micro sized type.

I ended up creating a stylesheet that brought beautiful typography to Hacker News. Meet Georgify: a Chrome extension which has now been ported to Stylish with Userstyles.org as well. Georgify is an alternate CSS for Hacker News with a focus on typography and readability. It uses Georgia as the typeface and some typographic sugar like limting line span to 50-60 characters and sufficient whitespace to improve legibility. Give it a try and you will be pleasantly surprised.

Flavors

• Chrome Extension
• Userstyles.org/Stylish

Original HN Post

Design a beautiful, usable and better interface for creating lists from reviews on Yelp.

The task for redesigning the list feature on Yelp was part of the design task that Yelp had given me to assess my skills. In this post I go into the detail of the process and also share the end results with you, hoping that you enjoy and learn from it but more importantly give feedback as to how it could have been improved.

Information Architecture

The first step was trying to understand the features, navigation and userflows on Yelp. A precursor to this step was understanding the underlying information flow/architecture on Yelp. I made mindmaps of the associations of features and also of the navigation of the Yelp site.

Navigation @ Yelp

The existing navigation at Yelp breaks many UI and IA conventions. Features like Mail which are aimed at User to User conversations are placed in the Primary Navigation as are promotional links like Invite Friends which need to be placed within the pages and NOT in the Primary Navigation. Also from my understanding not every page needs to have the full fledged search dashboard. The users whose prime need is to search would have done the same on the homepage (which should ideally consist of a full fledged search), however the internal pages can save screen space without compromising severly on the user experience by fetching the current location of the user (using profile info, IP or Geo-location) and allow search using that for internal pages. Of course with the first search the user will land on the search page which again has the full fledged search dashboard with What and Where forms. Attached Information Tree gives a better and coherent navigation structure.

Features @ Yelp

Places/Businesses are at the heart of all the features on Yelp. These Places are closely connected to Reviews in the Yelp world which are written by a loyal part of the community. To improve the utility, usability and accessibility of the List feature on Yelp, they need to be integrated with Reviews. I proposed to allow users to not just to make Lists as a separate process (as it is currently) but also while occasionally scanning the Reviews written by them. This is captured along with the correlation of features as below.

A SWOT Analysis

Being an Analyst, I seldom can ignore the SWOT Analysis of any existing design. I did the same for Yelp with a focus on the List Feature.

Strength

• Will be used by most loyal Yelpers
• Info about lots of places sharing a commonality
• Highly Opinionated and hence Personal

Weakness

• Poor visual hierarchy
• Too cluttered
• Cannot add reviews from the Review page
• Number of steps to create list can be reduced to one

Opportunity

• Venues should show up which list they feature in
• Repository of Lists (popular) from Main Navigation
• Public/Private Lists
• Icon/Badges assigned to lists based on categories or an algorithm that checks the relation between items on the list

Threat

• Trips feature from Gowalla (Not exactly same)

Who is the common user?

Due to the inherent nature of being created from one’s own reviews, the lists are highly likely to be created by active Yelpers in comparison to new users. These users are already familiar with the interface of Yelp and hence complexity can be introduced to aid a quicker process. This gives the Drag and Drop approach a very high advantage as compared to the Checkbox selection of items or adding reviews individually. 58% Yelpers lie in the age group 24-44. Another 20% in 44-54. Use of large and clear typography along with non cluttered minimal interface is hence suggested by the numbers.

While it is great to understand the common/average user, it is always best to see the needs of the extremes because if those are met, the averages will take care of themselves. The extreme users in Yelp could be either someone with very less reviews or someone with reviews in the range of 500s or 1000s. The design consideration in the first case is to make the interface intuitive while in the latter it is to aid the searching and finding of the appropriate reviews within those 1000 reviews. Both these issues have been dealt accordingly in the design as will be revealed later.

Issues with current design

This is how the Yelp List creation process (2 step) looks like as of now.

We do not really need it to be a two step process. Both the steps can be merged into one. Also since the user is a regular user of Yelp, it is not really important to give them ideas of what the list might contain.

Below is the List page where one can access all the lists written by them as in the current design.

As can be seen above, the side profile column has too much information. Do we really need all of this on each page? The “Create List” Button is not the primary focus on this page. Subdued by the colors surrounding it. Due to the placement of two lists in one row, there is a need for horizontal as well as vertical scanning. Might be better to use one List per row and improve the poor visual hierarchy of the page.

Wireframes

The wireframes shown below aim to solve most of the problems in the existing design. The profile info column has been shifted to right to allow focus on the primary content of the page. The alternate light and dark stripe in the list page allows easy scanning of lists. No more horizontal as well as vertical scanning to view lists. The above two step process has been reduced to a one step process.

Another feature added is the ability to create lists on the fly via contextual menu (as on Twitter). It allows users to add reviews to existing lists or create a new one. The new list creation is aided with a modal window which gives a feeling of getting things done without “leaving the page”.

Also as can be seen the header and footer have started taking a far more streamlined shape that allows users to not always be bothered by the big search dashboard but still keeps full fledged search within a click’s reach. Also the links pertaining to users accounts have been kept accessible via a single drop down.

Another choice was between using tabs or vertical side navigation for the various features accessible via user profile (tips, mail, reviews, lists, bookmarks etc.). However, due to high number of features I decided to go ahead with using conventional tabs to avoid usability issues arising on users with small screen who would need to scroll down to reach for links like events, bookmarks or compliments which would lie at the bottom.

Visual Design

The process of visual design was complementary to the process till now. As can be seen, the current Yelp design has a very Web 2.0, plastic feel. Somehow, it does not radiate warmth and openness that the community of Yelp is symbolic of. I decided to go with a more open visual aesthetics that show the warmth and openness. Since the process of writing a review is a very open process, the interface and interactions should supplement it and aid users to write better comprehensive reviews.

Other features include clear call outs, and large typography to aid the user base which is mostly in 30s and 40s. Also the forms have been made highly interactive to aid the process of creation of lists. The Your reviews part of the Create List page now features a search box that allows users to filter reviews based on keywords/categories besides the conventional Sort by options.

I would urge you to provide all kinds of feedback via twitter or email on the process and the design.

We would want you to simplify the user flow and also create a much warmer interface.

Folllowing my redesign of the Instagram interface where I tried to not only make it more appealing in terms of visual design and UI conventions, the kind folks at Burstn got in touch with me to see if I could do something similar for them.

We set out to just work out the user flows and also create a visual mockup of certain screens if time and budget permits. One of the essential ways in which Burstn positions itself away from Instagram is the rapid nature of photo sharing that it promises and supports. Sharing a photograph as quickly as possible was their primary aim. They were not building an app that allowed the users to share pretty pictures, they were more into sharing memories as they happen. My role was not only limited to a designer but also an advisor in terms of product strategist giving feedback and suggestions wherever necessary.

I started of with a very simple map of the flow of the user while taking a photograph and also ranking the processes based on what’s the most integral part of the app to the least important. This can be seen below.

This was followed by the creation of screen wireframes (on paper). Each screen’s observation and notes have been added alongside the screen. A later discussion of the screen for adding fliter was discarded since this was not their priority. The Geolocation wireframe was made to show the pictures of all the Burstn users around a place giving a tangible memory and sense of association to the place. This is what I believe the central purpose of geo-location. The screens can be seen below.

We then decided to create a few screens to show the possibility of the visual design and changes possible. I had complete freedom to play with the color scheme and was not bound to a blue color palette as in their current app design. The SX-70 Polaroid followed a central part of the inspiration. A major part of the reason being the fact that it could be shaped into a gorgeous icon if we were to go ahead with the design and also the very history of the product design that revolutionized instant photography was apt to be associated with an app that promises speedy capturing and sharing of memories.

The final screen design are as follows. They are screens for the Popular photograph section and the user profile screen. The big plus is the button to follow a user which when pressed would rotate to show a cross which indicates that you can un-follow them when you would want to. Hope the process shed some light of the thought process that went behind in designing the UI of the app. Also do go and check out Burstn in the App Store.

The natural progression of things on the web is inevitable. One form of technology gives way to another and the fountain continues to flow. Assuming stagnation especially in the interwebs where things change by the day would be foolish to say the least.

Take into account the very need of Google OS based device since the announcement and keeping in view the growth of the Android platform since. When the announcement was first made, like everyone else I was very excited but today I would read about it in my RSS Reader and never care about it the next moment. That is the best and the worst things about the web. No matter who you are, things will change and even the best laid plans will falter.

In light of this knowledge, let us take a look into a small app that is gradually redefining the landscape of the way people share and click photographs. I am referring one of my most used apps on my iPhone, Instagram. Even if you have not used it yourself, I am sure you have seen it in bits and pieces via the links left by one of its 3,00,000 users (in less than 1 month of launch). If Twitter and Flickr were to have a love child, it would be Instagram.

What is it that has made Instagram such an overnight success. The number of photography apps in the App Store is endless, then what made it such a quick hit among masses? What is the secret sauce that founders Mike Krieger and Kevin Systrom seem to have figured out?

What problem does it solve?

For any app, the first and most important question to ask is “what problem does it solve”. The how comes later. Instagram solves the problem of sharing our moments effortlessly with the world and in a way that makes us look creative. I have talked about tapping the ego of the user and Instagram taps into our inherent urge to be creative (hipster if you may). In one click it allows me to explore the world of people who are not only far more creative but also share brilliant photographs despite the limitations of the device and the app (if you question this, have a look at Dan Rubin’s Instagram timeline).

Unlike Flickr where the focus is porting over friends and family from other network or seeing what they are uploading once in a blue moon, Instagram founders understand that there are only a billion other ways to do that. So they went ahead and solved the more complex problem of sharing moments effortlessly and also seeing what others share, no matter whether they are friends or family or someone I have never heard of before.

Call it Instagraphy if you may!

Remember the time when all that blogging meant was writing long thoughtful pieces and along came a little blue bird that went by the name of Twitter. The landscape of blogosphere changed since then and today microblogging as a term is limited to only the social media fanatics. For the rest of the world, it is sharing opinion and views. Whether I do that in 140 words or write a novella about it should not really matter.
In a similar fashion, in a world of HD cameras and brilliant lenses, instagraphy bring photography to everybody and at all times. Every decent mobile phone is now equipped with a camera that can save a moment forever. Till now the moment was normally captured and forgotten. It was only when you ever took out the cable to sync your photographs or cared to email them to yourself that that moment was shared. With Instagram, it all happens effortlessly. Sharing photographs over multiple networks is a magical potion that Instagram has brewed very craftily (second only to the now banned Campl.us).

The retro charm at no extra cost

Instagram has a set of filters that you can apply to your photographs and it all works like a charm. The process is streamlined and the filters beautiful. The end result is a photograph that not only can be shared easily across multiple social networks but is also worth sharing and gaining some street cred for being a creative hipster.
There are other apps like Hipstamatic that do this, but personally I believe it takes skeuomorphic design to another dimension where the charm of photographs comes at a heavy price of unnecessary waiting for animations like the changing of lens or the smaller viewport to click photographs. If I were ready for that investment, I would rather go buy a retro camera than use your app!

Community

The early adopters of Instagram were designers or photographers and all sorts of creatives. Add to that the easy access to Popular photographs which are regularly updated, Instagram has the perfect tools to grow a community. The app had 100,000 users in the first 6 days (a feat that took Foursquare 6 months to complete).
The easy (though a bit confusing) way to import friends via Twitter makes it work like a charm. There is no extra effort that needs to be made to be involved in the community. The Like button comes to the rescue at times when we are too bored to comment on that awesome shot we just saw.

I do not know what lies next for Instagram. I do not know if they have given it a thought, but they seem to have tapped into a big market that is yet unoccupied or at least in its infancy. With carefully built extensions for desktop and other mobile devices, they might very well be on their way to be the next Flickr or Twitter or maybe something completely new and unheard of. After all evolution and progression are inevitable on the web.

PS: As a self initiated project I redesigned the interface of Instagram recently. Have a look at it while you are around.

Design an informative poster for an international event’s local chapter.

The i-Race posters were designed as part of dunnhumby’s internal fund raising event which was to take place at the same time in the UK, US and India. The aim was to have the same template in sync with the company branding and illustration guidelines which can be then be localized for each country. Rather than going the safe and old route of a running silhouette and the city skyline, I tried to make it informative for the user. The company specific colors surrounding the central track give a feeling of being pushed to the edge when the user views them.

Adding stuff to a design not for the sake of design, usability or the need of the users (or even the client) but just to make it exceedingly beautiful. So beautiful that people (read other designers) like it, rebound it on dribbble and tweet it and sing songs of praise about it, when it could be all just superficial while the design itself lacks the soul.

“It’ll be glorious! My goal, isn’t for readability or usability but for CSS Galleryability.” (via @maxvoltar)

*Though the chances of that happening are seriously one in a billion or more like trillion.

What Tim tweeted some months back made me wonder, how often I have been guilty of this. In the end it is not they who we are designing for, also it is not the clients (though we have a different set of obligations towards them). If you are a designer then the one and only thing you need to think of is how usable, accessible and aesthetically pleasing it is for your users. If the aesthetics come at the cost of usability, screw them. If the accessibility comes at the cost of usability (of the super core user group of your product), screw it too.*

At the same time, we as designers must learn to not jump up with our own sets of suggestions even when we do not have the slightest of idea of the project. Time and again this has happened over at Dribbble, yet we have learnt to forget it. Give suggestions, give advice but make sure you add in your own premise of assumptions made based on what you think the project is about.

As purveyors of design, it is our interim duty to ensure that the craft that we practice is not tainted by peer-pressure.

When an app that managed to capture 100,000 users within a week of its launch has a UI that does not shout brilliance, something needs to be done by someone.

Sketching wireframes

The story of how I thought of doing a redesign for Instagram is strange and coincidental. I had fallen in love with the app from day (leave aside the design for a moment). Everything right from using Foursquare API for geo-location to limiting the pixels and square shape of the images, spoke that the product has been well thought of. I had initially planned to create a service for web using their API (whenever it was released). However, the bevelled blue top bar soon became an eye sore. Add to that the use of the Tab bar in a non traditional way by putting a weirdly shaped camera button that breaks the flow aesthetically as well as functionally (which is why we use tabs in UI) and I was soon sketching the ideas of how to improve the existing mobile interface.

The inspiration for the UI was the Polaroid OneStep with Q-Light along with the cork-boards where we pin the Polaroids. The camera button (new shot) has been moved to the top corner which was previously occupied by the Refresh button. The refresh functionality has been added by pulling down the feed as in Twitter, Facebook and Gowalla apps. I have tried to make the interface share the warmth that is associated with Polaroid photos.

Building a community for your web app can be a very demanding task and many times lack of a good community can go on to become the prime cause of failure of your product no matter how well it was designed and crafted. Tapping the ego of your users is something that could save you some sleepless nights if it is integrated at the core of your web application.

Some time back we had the pleasure of listening to Kevin Rose from Digg and Wefollow talk at the FOWA, London and he talked about certain methods he used to increase his user base from 1 to 1,000,000 users on Digg. His talk gave us some real insights and one of them was EGO. He talks of building features that tap the users’ ego and self-esteem and this in return means greater participation from the user within the community.

As Kevin rightly mentioned on Boagworld, that this is more of a “taboo” topic of discussion and often marked as something “we should not do”. However, if we look closely almost all the popular web apps have tapped this “ego” of the user in one way or the other.

What is EGO?

Who does not like being on top of the Leaderboard?

While the traditional reference of Ego can be applied to this situation, I would like to refer to it more as “rewards” in term of the “social” status of the user. Now these rewards could be points, badges, some rank system or anything else that can be thought of that eventually ends up making the user feel “special”. This feeling of being special and “ahead” of other members of the community adds a very unique aspect of community status that users often run after.

Now these rewards or “ego-taps” as I refer to them are not a new concept or idea. They have been and are being utilized in our web apps even today. Let us look at the various means in which they are being implemented in various popular web applications today.

Karma Points in Forums

I am sure we can recall the “Karma” points that many forums often associated with their members based on their participation in the community. Such “action-based” rewards are the first degree of rewards which reward your ego for your actions. These actions and rewards have a direct first order relation wherein you perform an action (which benefits the community and web app in some way) and you get points. Over a period these points are collected and they give your “Karma” or Ranks on the forum. Your ranks could then be unlocking doors for some actions like kicking spammers etc that you can perform.

Retweets (Twitter) /ReBlogs (Tumblr)/ Likes (Facebooks)

The second type would be the Retweets, Reblogs and Likes that we see on popular social networks like Twitter, Tumblr and Facebook. These are not directly related to your actions but indirectly related. Who does not like to see their tweets RT’ed? Who with a human heart does not want to see people clicking whatever they post on Facebook with a Like and then comment on it. These are indirect social rewards that a user gets for generating good content for the community. Good content is what you wanted in first place so that more users can come to your community, right?

Completely Indirect and the Best method I have seen yet

I would give it to Twitter for integrating the Social Status so well in their service that it is now a measuring factor of the utility of a human soul (how ironic!). I have seen people following users blindly by seeing the Follower count alone thinking if so many others are following them, they must be “good”. For the owner of an account it gives them the idea of an audience that is out their and listening to them (while it may be possible that they are all spam followers owing to the nature of the users tweets).

When you integrate Ego so well in your product that it does not seem like an additional or dispensable feature but an intricate part of the service, you can be sure you have a killer product at hand.

Conclusion

These are just some of the many ways in which you can use the human nature for your advantage and at the same time make your users happy. For all the blogs out their how about adding a comment leader-board to your own site and see its effects! Feel free to suggest other ideas that you have come across and other opinions that you have over this topic.

How can India’s leading social gaming network provide a better experience to it’s users?

Ibibo, for those who do not know is a leading social network in India. While their product strategy speaks about itself, the same cannot be said of the user experience of the website. Throughout the process I was taking inputs from people I knew in the company and who were aware of the business objectives and strategy of the company. Hence, the redesign is bound by practical constraints like existing branding, product strategy and priorities of the company. My first step was an attempt to understand the kind of user base it enjoys. It is to be noted that the users of this site would not be tech savvy geeks but the masses who in India still go to cyber cafe’ for access to the web. This was a major focus throughout the design to make the site as simple as possible for a non-tech-savvy-user. However, that also meant that there would be redundancy needed in terms of site navigation and the ways to get things done. Let the user make discoveries depending on his browsing pattern and ensure that most common behaviors end up exploring all the services that the site offers. It is for that reason that you see links to the popular services in various navigational elements including the dashboard (orange) where the user can use the tabs to make an appropriate action like searching (live search) for a game or choosing to write a status in the Blurbs or just using their free SMS service to send messages right from the dashboard.

My first task was to prioritize the plethora of services into a reasonably possible number so that the list does not seem intimidating and also does not put some services completely behind the scenes. I made the list of the services and then chose those that were directly related to the needs of the user. Following is a screenshot of the same in the ideation phase.

This was followed by the search for a layout that would ideally streamline the process of looking out what game to play or updating the status and anything else the user is most likely to do. Following wireframes are devoted to that phase of design. The final wireframe resembles the finished output to some extent. However there are a few changes which were incorporated in the visual design phase to incorporate their business objectives. Some of these are the Become Popular button, notifications of new mails and updates, the popular games showcased in the dashboard which despite increasing it’s size were important for them. The advertisements are an important part of their revenue generation beside micro-payments which occur via the games. It might appear that the news feed is getting less of importance and most of it is below the hypothetical fold (one of the biggest fad of the web) but they want the user to look at the feed to play the games their friends are playing. At any time they have 4-5 popular games which are the most popular ones and the dashboard incorporates them as a slider. Another feature of the design is that the lower half of the screen, which involves the tabbed navigation to the left would not really need whole page refreshes. So when a user clicks on the mail tab, the inbox would open in the lower half with the orange dashboard staying in place. Certain more subtle visual improvements have also been undertaken. I would urge you to visit Ibibo.com and then come back to see the final version below.

Note: Since this project was carried on a personal level, any usage of this design requires prior consent from the designer.

Create a piece of design that symbolizes your identity and inspires others.

I started this typographic self portrait after being inspired by the likes of Cameron Moll and others who were using great typography each day to create stunning art. The focus here was on creating a work of which I was not only proud but seemed different from many other typographic experiments out there. Also since I was investing time, I decided it would be a good idea to create something that can be used as part of my social identity for a while.

The result is for you to judge.

Are Dingbat Fonts the new way to show icons on the web?

Earlier today Drew Wilson (@drewwilson) released the 3rd version of his ever popular Pictos Vector Icon set, only this time the icons were no longer Vectors but Dingbat fonts. Enter the magic of @font-face and you have a great set of web fonts that you can use to display icons anytime anywhere on the web as long as the browsers support @font-face. However, the issues with using such a solution are multi-fold and the discussion on Twitter between some of the prominent designers seems to justify my concerns with the approach. Follow along as I share my concerns and also the possible solution for each issue.

Semantic Web

Problem

“It’s not about just getting the icon in there, it’s about giving it semantic value too.” – Jason Santa Maria

The first major issue is that the very semantic nature of the web is killed once you follow this approach to show your icons. Using a “f” to show an RSS icon right in the middle of a semantically marked page throws things a little off balance. This issue was raised by both Jason (@jasonsantamaria) and Jon Hicks (@hicksdesign). We have reached where we are in web and semantics today after lots of wasted trees and years. Let’s not simply throw everything down the gutter to enjoy the beauty that @font-face brings on table. So is there a solution we can come up with.

Solution

Indeed! One of the most basic solution is presented in one of the examples (Example 2) on the Pictos site itself. One can smartly use the Content property of CSS to produce content before or after an HTML element on the page. Shaun Inman shows the example as under:

<span><i>RSS</i></span> .icon i{display:inline-block;text-indent:-9999px;} .rss:before{content:"f";}

However, keep in mind that the CSS generated content is not read by most screen readers which brings us to the question of accessibility.

Accessibility

Problem

The issue of accessibility is best expressed by Scott from Filament Group in this blog post about Dingbat Webfonts.

A dingbat font basically maps images to the standard character map, meaning when their used alongside content on a web page, sighted users will see an icon in place of certain alpha-numeric characters in the markup. However, for users on screen readers and other assistive devices, the base characters (capital and lowercase letters, numbers, and standard symbols) are still read aloud. For example, if a dingbat font replaces, say, the letter “A” with an arrow icon, a screen reader still reads aloud the actual letter, regardless of its icon appearance.

Solution
I could cite some of the accessibility solutions provided by Scott but I would suggest that you read the post in its entirety along with the comments and then come back. (Link)

File Size

Problem

This is not really a complaint for just Pictos but any such arrangement that causes the user to download an entire font for just a few icons. I mean how often would you come across a situation where you would need even 50% of those icons on one page. So the bandwidth tradeoff is not a very suitable situation to be in. However, like any other scenario the choice has to depend on the usage and the intended audience. Sooner or later you will find the break even point in your requirement. But is there really nothing that you can do before that? Well, of course there is.

Solution

This solution was suggested by Jonathan Snook to the issue of large font files that are requested while using @font-face for very few glyphs. The idea is using a service like FontForge that lets you trim the font file to suit to your needs. I am not sure if this will help but you can also use Font Squirrels @font-face Kit Generator to choose only Uppercase, Lowercase or just the Numerics of the Pictos set.

Windows and Aliasing

Problem

The whole issue takes another dimension when you think about how these well crafted icons would be displayed on a PC. While they are crisp and nice on Mac, the poor support for anti aliasing in Windows would mean that a chunk (depends how big it will be for your site) will not be seeing these icons in their full glory. Now I have not downloaded the font myself so that I could test their appearance in Windows so this is mostly speculation.

Solution

Once again this is mostly speculation but I would love for someone to try the Text-Rendering property with Geometric Precision.

text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

Unicode

Just when you thought that there could be no more issues pending, Jon Tan lets the cat out of the bag pointing us to Unicode Characters. The thing is that many of these icons are already a part of the Unicode Mapping (mostly in Misc Symbols). For example the Anchor represented by “a” in Pictos is already a Unicode Character represented by “⚓(#x2693)” and “⚓(#9875)”, so why not use them instead?

Tip: You can press Cmd+Alt+T or go to Edit > Special Characters in most Cocoa Apps on Mac to show a character palette to access Unicode characters.

Update 1: Opentype has shown a great way to map Dingbat Webfonts into Words so that the accessibility is not hampered. Have a look at it here.

Update 2: Drew published his on thoughts on the issues of Semantic Web with Pictos here.

Update 3: Jon published his own thoughts and a bit more detailed analysis of possibilities with Unicode.

While I salute the ingenious approach of Drew for what he has done, I am not so sure if benefits come at a bigger price. For now at least, @font-face driven icon sets are not my cup of tea. I would love to hear your suggestions and views about the topic.

People are so careful not to make errors all the time. It is like screwing up is a bad thing. The other day I was having this discussion with @tyme where we were discussing the interpretations of Ed Catmull’s interview video where he talks about screwing up and other aspects of the Pixar leadership. Interesting to see both she and I had different interpretations of the same words. It amazed me to see where I found the company’s open arm approach to accept screw-ups, she saw the company’s attempts to avoid screw ups through developed wisdom. Needless to say both of us are correct. In this post let’s talk about my interpretation.

The notion that you’re trying to control the process and prevent error screws things up. We all know the saying it’s better to ask for forgiveness than permission. And everyone knows that, but I think there is a corollary: if everyone is trying to prevent error, it screws things up. It is better to fix problems than to prevent them. And the natural tendency for managers is to try and prevent error and over plan things.

What the hell is wrong?

Our entire social eco-system is so focused on results that we are sometimes misguided and often overlook the journey for the end. I remember a quote from my English teacher who used to say “Never overlook the trees for the woods or the woods for the trees”. It is a balance that I strive for in my life even though I am naturally inclined to look at the bigger picture and not just the results which are vulnerable to time.

Think-Screw-Iterate-Screw-Iterate-Succeed

However, letting people know that it is OK to make mistakes is the way companies should run. It is only when one knows that the mistakes will not cost them the job is when employees are free to explore ideas. Sometimes those ideas lead to great revelations and results, many times just a spoof from the test tube. But it is only at the cost of these spoofs and goof-ups that some of the best discoveries are made.

Also it is not just about making startling discoveries but also about putting yourself on the line and exploring the boundaries. Thinking out of the box has its own cost and that comes up in the form of screw-ups. So when you tell your people to think outside the box, think creatively, or the hottest trend buzz called “design thinking” keep in mind that they are equally likely to screw up. Let them have that freedom to be able to make mistakes. For when you give them that creative license, it is that great ideas start flowing.

Create a unique brand identity that shows fresh approach and how we supplement our clients’ online presence.

Permeate360 is a digital media solutions provider startup. They needed a brand identity and a website to show the freshness of the company and the kind of work they do for their clients.

After many brain storming sessions I ended up creating a brand identity and website design that reflects all the requirements of the clients.

“As designers, artists, and creators of a better, accessible and functional world, we strive for this perfection based on good taste. It is our taste that sets us apart on path to success.”

I started off with the most common trends of today, noise filtered background, 1px borders and a lot more, but ended up removing them one by one, till there was nothing left to remove from the design.

If you are reading this, you probably already know me through Twitter, Facebook or one of my blogs. However, in the unlikely event that you do not, I would recommend you to check the About page and if you like the vibes then feel free to connect with me.

Idea

“Perfection (in design) is achieved not when there is nothing more to add, but rather when there is nothing more to take away.”
-Antoine de Saint-Exupéry

This personal adobe in the interwebs has been long in the making. At first I had this idea of a single page showing all my nodes among social networks in one place. But then, thanks to Tim Van Damme, it became a trend and I was too afraid to follow it in fear of being bashed out (needless to say, I was wrong). That gave way to the idea of a full fledged portfolio. However, with the frequency of posts at Inspiring Pixel going down to once a month due to lack of time, I decided it was time to have a medium that allows me to publish my views on things I am very passionate about (read Web, Design, Apple and Geekery) without forcing me to jeopardise my other commitments. This led to the addition of the Journal aptly titled “Incoherent Thoughts”. The integration of Pangaea, my Tumblr Blog was only a matter of time.

Design

As mentioned, I worked with the design backwards, removing all that I can from my initial iterations untill there was nothing “removable” left which did not have a functional or emotional role to play which could not be further compromised. So while the design may appear as bland or boring to many, underlying it is a simplicity that has grown over me during the design phase. I had made the colorless version and left it in my design folder for a month or so. It was only when I reopened it that I knew at that instant that this was the design I would go ahead with. The reason for the decision to go forward with it was also supplemented by the fact that I like to think of it as characteristic of my design skills. Hopefully with time and experience I can do justice to the colors. The design is based on the 960px grid though some elements have been aligned against the grid as an when needed. I wanted the site to be different from anything that is out there while at the same time being a mirror of my true personality, and I sincerely hope I did a decent job at it.

Typography

Before you jump to see my font stacks, my line heights in the CSS 0r even the very basic aliasing of text on Windows, please read this with patience. I am no expert at typography. Having said that, I know a thing or two and I have applied those to the maximum of my abilities in the design. The native font stack uses Adobe Caslon Pro, Hoefler Text, Garamond, and Baskerville before falling to Times New Roman in case of unavailability. The exquisite typography was something I could not part away with due to its aesthetic value if you may say so. At the same time, I use Georgia as the default body text for posts with no exclusive styling (like this one) to enhance readability. Also with all the magic of @font-face somehow traditional or rather overused fonts like Georgia and Times have a new place all of a sudden.

Why Art Direction?

I am a designer, however not a full time one. I am in my last month of graduate studies as an engineer after which I shall be working with some great folks as an Associate Analyst at Dunnhumby. This means I work on projects and designs more out of my passion for design than the very need for it to support my livelihood. Having said that, while it is good for the blissfulness of soul and sanity of mind, it also means the flow of work is not regular. As any designer would tell you, being out of touch with designing is a bad thing, a very bad one indeed (unless you are having a burnout). So to maintain my promiscuity with design and give a platform to my thoughts, art direction was the way to be. I know people have been catching it like flu with a new art-directed blog coming up every week, but for my case it is the best way to stay in touch with design and expand my horizons as a designer. So forgive me if the post I design is not upto your taste or if it is just not readable in your primitive browser.

Imperfections

While I have released the site, I know there are many folds to be ironed, especially in terms of design. I know the Search in the footer looks hideous, just like I know that the logo on the top has 1 pixel blur as compared to the border in the navbar or that the “T” and “K” in the logo are not perfectly aligned due to mismatching serifs. Speaking of logo, fellow designer Naina Redhu has been kind enough to create a logo for me in return for a web design and I am really excited about this exchange deal. I also know that the site does not validate or that the design breaks on an iPhone (I am yet to find a solution to this). So while I am aware of these imperfections and probably many more which I shall hope to receive from you in the comments, please stick around while I iron these out over time.

Request

I am here to learn as much as I can. So if there is a bug you find, or an example of bad design you see on this site, please feel free to guide me in the right direction. I am just getting started and I am sure most of you out there know a lot more than me and it feels safe to be watched over by such a great community. I would also appreciate if you leave your feedback about the design of the site in the comments and spread the word around. Ah! I almost forgot, do check the 404 Error Page.

Our customers include the Maharajas and the CEOs.

Ultimate Luxury is a magazine focusing on luxury goods from the most elite brands in India and abroad. They wanted a website to showcase the products from partner luxury brands for prospective users of these products. The website is meant to supposed to be the online face of the print magazine and yet have an identity of its own.

I was responsible for creating the layout and deciding the information architecture of the new website. We worked in synergy to create a design that spoke of class and luxury while being user friendly and accessible at the same time.

One of the initial drafts for the project.

A Self-Initiated Project

Inspiring Pixel is a design blog written and edited by yours truly. Within months of its launch the blog has been looked upto as a source of authentic design related content for web designers. When I launched Inspiring Pixel I began with tweaking a free theme template to my requirements to create a functional layout.

However, soon it was realised that we needed a truly unique design in terms of aesthetics and functionality to stay on top and provide a streamlined experience to our loyal readers. Thus, I set upon to redesign what was already considered by many as an example of good design.

You can read all about the design process and the highly positive feedback from fellow designers here.