The first person I started freelancing for is Joshua Schachter. Joshua is well known as the founder of del.icio.us, the bookmarking website which made “social filtering”, “tagging” (at the same time as Flickr) and “Web 2.0” common buzzwords.

I stumbled upon his tweet one day that he was looking for remote Python developers for his pet projects, I said “Hey, I’m interested” and next thing I know he is throwing ideas (and he has lots of ideas) and I’m furiously thinking about the fastest way to implement it. Over time, what interested me the most was not the idea itself but rather the evolution of the idea while iterating over prototypes and how Joshua creates this evolution. It has been fascinating to be a “fly on the wall” in this process.

The first project was ClueDB, a “tips and tricks” website, or a “lifehacker, by the people” as I like to call it. Built using MongoDB, Flask, my flask-boilerplate project, HTML5 Boilerplate, jQuery, jQueryUI, Twitter/OAuth integration, and Fabric. Standard stuff.

Joshua started with a simple answers / tricks site and slowly hacked on features. For example, he said “let there be tags” but there was a twist. The tagging would not be done by the submitter of the clue him/herself but by other people visiting the site. “It would be less spammy this way” he said. Boy, was that an eye-opener to me on how a simple social “tweak” could make a big change to the content and hence the trustworthiness of a site.

The second aha moment for me was when he said “let there be votes” :

This was a very interesting scheme of voting where we ask for the direct action by the user and not a simple plus/minus counter which doesn’t say anything about the usefulness of a clue (as opposed to popularity).

Things were going along, and then Joshua said “let there be user profiles” and things were going along again.. and then Joshua said “let there be a page listing all the clues that the user has voted ‘Plan to try it’” and we created such a page. The beauty of this was that now there was a single page that a user can use as a bookmark, homepage or share it with friends – voila, viral and useful at the same time.

Similar aha moments was creating a link called “random clue you haven’t voted” which would encourage the user to both explore more content as well as encourage to vote at the same time, and so on.

The latest project is StackParts.com – a simple catalog of parts for a web stack so that developers can weigh in their options and discover new ones for their next webapp. Built using Tornado, Python, Fabric and YAML files as the NoSQL database .

This project was again interesting for the use of tags to organize the projects and the relationships between them, which you can see in action when you visit any project page on stackparts.com.

There was a good discussion on HN about StackParts and was featured on O’Reilly Radar, and if Wayne Seguin likes it, there must be some value in it.

(As an aside, the site is also a testament to my total lack of design skills.)

And all the while, Joshua is busy with his own startup!

In summary, it’s been a fascinating experience where Joshua is doing the product management and I’m doing the coding.

My two favorite lessons from this experience are:

“You can’t reason about products – great products are emotional.”

and:

Getting people to use the staircase than the escalator

Getting people to throw into the garbage bin

Getting people to iron their clothes

“Ironing clothes can be a boring task and getting the creases removed from your clothes perfectly is next to impossible. Now all you need to do is place your shirt on a customized iron board with sensors. You need to define the task. What is to be ironed? Shirt, trouser etc. The board defines your play area with lights depending on your selection. Creases are highlighted. Place the mini road roller iron on the shirt, sit back and let the fun begin. With a remote control you need to guide the road roller around the highlighted creases. If you move out of your play area, you lose points. If you get all the creases sorted in quick time you gain points.”

Getting children to clean their rooms

So what?

I hope to keep this inspiration in mind whenever I’m building products for others to use.

P.S. Go vote for the best entries before January 15, 2010!

Today is the second birthday of our ION USB Charger and we are happy to announce that it is now available in a new and improved packaging!

We needed some improvements to our packaging because:

1. Our previous packaging did not have the product visible.
2. The packaging needs to have a hook so it can be hung – that is how all accessories are placed in a retail store these days.
3. We had room for improvement on the look of the box.

The new packages arrived in a box:

And we soon formed an assembly line. I removed the ions from the previous packaging:

Vikram filtered out the new packages, including rejecting any damaged ones:

Varun folded the boxes and put the new ions in them:

It doesn’t sound glamorous, isn’t prestigious to talk about, but it sure was a lot fun and exciting. That’s what startups are about!

Here are the newly-packaged ions stacked back in the box:

Just to put things in perspective, here is our packaging and its size compared to the competition:

And here is our previous and new packaging:

Here is the sleek “product photography” version:

You can grab an ION with the new improved packaging at www.ion.co.in

Note: Cross-posted from our company blog

Why?

Switching between windows is Alt+Tab. Simple.

Switching between tabs is irritating because it is a contrasting situation:

1. The keyboard shortcut is not a standard, every application does it in its own way. It could be Ctrl+PgUp/PgDn or it could be Ctrl+Tab.
2. Ctrl+PgUp/PgDn requires both hands since Ctrl and PgUp/PgDn are on the opposite ends of the keyboard.
3. Ctrl+Tab is awkward to use (depending on your keyboard).
4. Many applications don’t loop back to the first/last tab (I’m looking at you, gnome-terminal) which means I have to learn a new paradigm such as Ctrl+1, Ctrl+2 which totally breaks the flow.

Amazing how a keyboard shortcut can ruin the usefulness of the feature.

It has been a revelatory book for me, a developer who considers himself to be the last person to know about “design.” The book mainly focuses on the lessons learned from their experiences in working with clients to design and create products and services.

Design

They define design as an activity, as opposed to a look and feel that is added later on. The activity incorporates:

• Empathy – Design must serve a human purpose, and so design requires an understanding of how people will interact with whatever you’re designing.
• Problem Solving – Design really shines when it’s used to address complex problems where the outcome is clear, many stakeholders are involved, and the boundaries are fuzzy.
• Ideation and prototyping – Design produces things, whether they’re abstract (schematics, blueprints, wireframes, conceptual models) or concrete (prototypes, physical models). Design is a creative activity and thus requires actually creating something.
• Finding alternatives – Design is less about the analysis of existing options than the creation of new options. Sometimes that means looking at existing options in new ways, and at other times that means creating from scratch. An effective design process typically offers many solutions to a problem.

They repeatedly explain that the experience is what matters to the end-user and that’s the real product rather than how it is delivered.

Experience

The qualities of a person’s experience and how it affects whether they think of a product or service as a “good” or “bad” experience depends on these qualities:

• Motivations – why they are engaged with your offering, and what they hope to get out of it.
• Expectations – the preconceptions they bring to how something works
• Perceptions – the ways in which your offering affects their senses (see, hear, touch, smell, taste)
• Abilities – how they are able to cognitively and physically interact with your offering
• Flow – how they engage with your offering over time
• Culture – the framework of codes (manners, language, rituals), behavioral norms, and systems of belief wiwthin which the person operates.

Empathy

They take great pains and length to explain Empathy, and how it is important and central to getting key insights which lead to pathbreaking products.

Empathy is an understanding of a person or group’s subjective experience by sharing that experience vicariously. Empathy is something like a balanced curiosity that can lead to a deeper understanding of another person. After all, customers lives are messy and complex, not always rational or task-oriented or follow perfect paths that product-makers expect.

They talk about what’s missing in our understanding are

• The emotional aspect
• The cultural aspect
• The user’s context

One of the best insights I read was their description of organizations evolving their product strategy from a:

Focus on Technology → Focus on Features → Focus on Experience

This is the exactly the kind of transition that we can relate to.

Parallelly, a company’s view of people also shifts from:

“What users?” → Their tasks, goals and preferences → Their behaviors and motivations.

Experience, not Products

They stress to not design products, but to design the system as part of the larger experience, whether the experience is end-to-end your system, or part of a larger ecosystem i.e. understand the context.

• Organizations find it tough to coordinate, it has to become a competency, doing cheaper/faster is not a long-term strategy in today’s world.
• Design the product in the context of systems and strategy.
• “Design gives form to ideas so that their value can be communicated, evaluated and improved.”
• Storyboards can be better to do first than Prototyping.
• Strategy and Prototyping should go hand in hand.
• “Wow!” factor ⇒ Loyalty of customers

This chapter is where I had most of my moments of epiphany.

My Takeaways

• Customer’s experience + context/system > product/technology
• Empathy > Throwing ideas
• Design artifacts important
• Design as an organizational competency → Multiple solutions, Focus, Constraints
• The “Wow!” Factor
• Give up control to the user

Bottom line: Agile technical implementation + Design competency + Empathy ⇒ Critical for a successful company

The downside was that it is a short book and I wish it was more concrete in its explanations and descriptions.

Overall, I highly recommend the book for anyone who is involved in the creation of products and services in their companies, especially entrepreneurs.

On a related note, Rands in Repose has some great points on his expectations of a product:

1. Make it look and feel like magic.
2. Work flawlessly in the first 10 minutes. If you can’t survive 10 minutes of critical analysis, I’m gone.
3. Provide additional, unexpected awesomeness.

Look at the design of a lot of consumer products—they’re really complicated surfaces. We tried make something much more holistic and simple. When you first start off trying to solve a problem, the first solutions you come up with are very complex, and most people stop there. But if you keep going, and live with the problem and peel more layers of the onion off, you can often times arrive at some very elegant and simple solutions. Most people just don’t put in the time or energy to get there. We believe that customers are smart, and want objects which are well thought through.

– Steve Jobs on the design lesson of the iPod in Newsweek, 2006-10-14

While researching on this subject, I found a paper by three people affiliated with the University of Manchester, UK. The paper makes three interesting hypotheses that are eventually proved in their paper:

1. User preference will be determined by interactions between decision criteria and subject background, specifically design-training and aesthetics, culture and identity.
2. User intentions will be determined by interactions between decision criteria and the task context; specifically, serious use will favor usability and content, less serious use will favor aesthetics.
3. User judgment will be determined by interactions among decision criteria; specifically, positive aesthetics will over-rule poor usability.

They randomly asked students to consider three departments for either a one-month summer internship or a five-year PhD. Based on this, they were asked to judge the department websites. The three departments were under the same university, Stanford – the Design department, the HCI website and the D-School website.

What was interesting to note was that most of them rated the D-school best when asked to consider the one-month summer internship. But when the task was shifted to the five-year PhD, they all rated the HCI website better! All other constraints remained unchanged – the same university, the same websites, the same variation in backgrounds of people, etc.

From my understanding of the results, people prefer less-aesthetic websites for serious/regular usage . Perhaps this explains why advanced users prefer Gmail vs Yahoo! Mail – one focuses on simplicity and elegance while the other focuses on usability and attractiveness.

On the other hand, the study “suggests that users’ overall impression of a website could be a determinant of user satisfaction and system acceptability, even overcoming poor usability experience and poor content”

Perhaps this explains why we are okay with a not-so-great UI on the IRCTC.co.in website but still use it because it has great value since it solves a “critical” issue of buying train tickets. Yet, we wouldn’t have tolerated this kind of UI for other purposes. For example, such a UI could have never worked for a survey website or a form-builder. That’s exactly why Wufoo.com has to have such a great UI.

This reminds me of an amazing talk by Geoffrey Moore in an internal Adobe conference. He explained the different types of innovation : product leadership, customer intimacy and operational excellence, which in turn have four types each. The trick for a good company is to have aligned vectors of innovation where they have to excel, and non-aligned vectors of innovation where they have to be “good enough”.

So, in terms of websites, ideally, a website should have to either excel at content and service and be good enough at the aesthetics, or should excel at aesthetics and be good enough at content and service. It does NOT need to excel at both (but of course, it’s good if you can).

I always have my ol’ iPod Nano with me while I’m cycling. As usual, if I want to listen to a song again, I click the left button to repeat, if I don’t like a song, I click the right button to skip to the next song. But while cycling, I have to do this without looking at it. It is possible because I can feel the click-wheel and it has a good feedback so that I know when the press has worked.

Compare this with the touch-screen rage – can a person use the iPod Touch/iPhone without looking? From my limited usage of a friend’s iphone, I do not think it is possible.

It makes me wonder which is really the “Touch” – the one I can use without looking (using only sense of touch), or the one that has a touch-screen UI (requires both sense of touch and sense of sight)?

By RIAs, I am referring to the Flex/Silverlight model (Ajax has a hybrid model in my view, so I’m not discussing that here since I don’t want to muddle up the question).

Coming back to topic, I see that the traditional web development frameworks are inside-out and RIA development as outside-in:

Question: How is this resolved practically?

For example, how do people using Django or Ruby on Rails actually write, say, Flex frontends for their websites?

Do they ditch their templates/rhtml? Do they design the RIA first and then the web service, or the other way around? … etc.

I couldn’t figure out the answer and since there are people out there doing it, I’m hoping the “hoosgot” i.e. lazy web gods will answer.

I personally prefer to write with pen and paper. However, I end up eventually transferring it to the computer for all the goodness of digital material (rewritable, linkable, searchable, backup-able, etc.) With this pen, you can have the best of both worlds… and it looks awesome!

I so wish I could get this right now.

Or one of these high tech napkins designed by Avery Holleman:

Just scribble on these foldable plastic napkins and it’ll automatically be synced with the computer. Imagine kids drawing together separately but the picture being simultaneously updated in each of their napkins. Oh, and they don’t need batteries.

I was impressed with the “Window to the World” designed by Mac Funamizu:

Imagine being able to point at anything – whether it is a building, a book or a person, and immediately getting back information on what it is or store details about it. Perfect when you’re lost in a new city or you’re simply reading a book and want to understand new words or historical names without being forced to flip through a dictionary or visit Wikipedia on a traditional computer and browser.

When I’m at this, I’m lusting over the Nokia Morph. If you haven’t seen it already, you must check out their concept video (showcasing the amount of thought they’ve put into this already):

It’s truly amazing what the human mind can imagine. And what we can do with technology.

Update: And amazingly close to what I was wishing for is Pranav Mistry’s Quickies project at the MIT Media Lab (via Nirav).

When I’m working on a problem, I never think about beauty, I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong. – R. Buckminster Fuller