These are designs in their early stages from about a year ago (click for larger versions):

Compared to prototypes that I’m coding today of basically the same areas of the site:

While the overall style looks similar, the key difference is in the information architecture which has evolved as I more clearly defined the core goals of the app. Defining these goals and incorporating them into the design was one of the most important aspects of the project that took me a while to nail down and is probably the main reason why it’s taken over a year!

Once I had the goals, I realized that for the design to work, I had to understand every aspect of every component I included in each layout. This ended up leading to an extensive amount of research and notes that went beyond the visual design. From making sure I understood the audience I was targeting to how the backend of the app would be developed.

Only when I worked all this out did I feel like I was ready to put together a solid design that worked. At this point I used Ryan Singer’s patterns approach for all the components. The rest was details and refining the design and putting together HTML prototypes.

While the overall process has taken longer than I would have liked going into it, I’ve learned a lot and have even changed the way I do client work now. There is still more to be done getting the backend functionality developed, but having come this far I already have an idea of how to take that on as well which I’ll talk about in a future post.

Sketching:

• Mood boarding for getting a good sense of the style
• Concept sketching for early stage visualizing of various pieces
• Process: Design, research, design, build
• Storyboard lifecycles of various processes
• Concept sketching diagrams helps with information architecture (ex: relationship of components leading to navigation decisions)
• Concept sketching abstractly can help with interface prototypes
• Process: See, sort, sketch

Rework:

• Meetings blow up your day and turn your work day into work moments, they should be optional
• Workday in general is being interrupted all the time, it’s the biggest timewaster in an office
• You’re not as creative when you’re working too hard and just trying to get things done
• The more you work, the more work comes up, it becomes a vicious cycle
• The only thing that matters is productivity over the longterm, what you’ve accomplished in a week or a month
• Estimates/promises are really guesses, deadlines are never accurate
• Tip: Just say no, good enough is fine, you can always do less
• Tip: Put together a list of items within a given timeframe (like two weeks) and drop the least important that there is no time for
• Tip: Restate the problem to make sure you’re heading towards the same original goal
• Tip: Give up – realize that what matters is not the work done, but what’s left to do and whether it’s worth doing

Human behavior:

• Influence is all around us, from friends, to ads, to architecture
• Marketing, through persuasion helps overcome the paradox of choice
• It’s good to understand the cognitive biases that affects human decision-making
• Determine the primary objective and target behavior for the user
• Motivator: Authority and trust – leaders people look to, Trust indicators: common details (like contact info), pictures of team, pictures of actual customers
• Motivator: Social proof – looking to others around us to determine what to do, Examples: Reviews on Amazon.com product page, customer testimonials on websites
• Motivator: Loss Aversion – limiting supply can drive demand, Examples: Ebay auctions, Woot.com products
• Motivator: Likability and Gifting – rewarding and reciprocity, Example: Amazon.com free shipping for orders over $25

Website Search:

• Search helps uneccessary browsing by putting seperated results together
• Speed is important
• Design Pattern: Auto-complete plus auto-sugggest
• Design Pattern: Best first in results
• Filtering is important when there are many results
• Design Pattern: Structured results – like a top 10 list
• Design Pattern: Actionable results – Actions available for each result
• Decision making can help by asking a question for certain results
• Visualizations of results for certain things like location-based maps

Wired Magazine going digital:

• The better the design: the easier the reading experience, the deeper the engagement, the more connected the consumer, the stronger the brand relationship
• The goal is to combine the fidelity of print design and flexibility of the web
• Great magazines aren’t possible without robust content
• Design goals: content, content, content, walk-up usability, revolution through evolution

Amazon.com design approach:

• Amazon Treasure: Engage Through Content – Reviews are very important to buying decisions, the helpfulness question helps present positive reviews from the negative reviews
• Amazon Treasure: Don’t Fear New Ideas – Experiment, there are risks to experiments
• Amazon Treasure: Eliminate Tool (response) Time While Delivering Confidence – multiple security levels (no cookie, cookie, login, credit card verification)
• Incremental change is a good approach versus complete redesign
• Amazon Treasure: Never Forget the Business – You have to start with the business model to design a great experience

Let’s start with web-based apps. For email I’ve been using Gmail for over three years now and is in my opinion the best email app around, web-based or desktop-based. For keeping track of appointments and daily tasks I use Google Calendar. For project management I use Basecamp from 37 Signals. For notes and idea-gathering I use PBWiki. For news I use Google News and Google Reader. And to  interact with friends and colleagues I use Twitter, Facebook and LinkedIn. Netflix can also be added to the list as a tool for managing movies and TV shows I watch.

Mobile smartphone technology I’ve only felt the full impact of this past month using the Motorola Droid with Google’s Android platform. For appointments and reminders I use the Google Calendar app. For daily tasks and notes, I use Google Tasks. For driving directions including navigation I use Google Maps. Occasionally I read news using Google News and Google Reader. For contacts Android syncs my Gmail accounts and Facebook friends. I’ve even replaced my Zune with using the Droid as a portable MP3 player, which makes it better with apps like Last.fm and Slacker.

All of the above covers probably 50% of what I spend my time on daily. What makes everything useful is when both technologies work together. And when they work well together, you get these three impactful features:

Notifications – Like Facebook has in its bottom bar interface, Android has a global pulldown menu which gives you control over how you receive all kinds of notifications: email, text messages, Twitter tweets, Facebook posts, etc. While it can potentially get distracting, it can really become useful for managing your attention.

Centralized Contacts – All the people you interact with that you want to keep track of, in one place, easily searchable and filterable with multiple forms of contact for each person. Not to mention information available about each person that’s easily accessible.

Messaging – Not just text messages, but Twitter tweets, Facebook status updates, etc. Keeping up with what your social circle is doing is a big recent trend in technology and will only continue to grow. Mobile devices seems like the best place for it.

These three concepts change the way we interact with our daily routines and the people in our lives. For me, it’s also changed my perspective on how I handle these interactions, making me more aware of how I direct my efforts on a regular basis.

A website works best when its front-end code is developed in a way that works well across all browsers, is picked up well by search engines, and is usable and engaging to the user. With these factors in mind, developers have implemented technologies that are now commonly known as ‘web standards’ even though there’s no formal guidelines for them. Technologies such as XHTML, CSS, Javascript using DOM, and Flash. After some strong support for these technologies, they are now part of tools like Dreamweaver and WordPress which even further spreads their use. By just focusing on quality results, web professionals have agreed on a consensus themselves.

Web browsers play a part in this as well. With competition between different browsers and the demand for better features, there’s more support for better technologies. A perfect example of this is what Google is doing with its browser, Chrome. Not only have they developed it from the ground up to work well with current ‘web standards’ technologies being used, but are pushing things even further. Despite the W3C finishing its ‘official standards’ specs for HTML 5, Chrome is already supporting it and encouraging developers to start developing in it. In fact, most browsers are supporting HTML 5, with only Internet Explorer being the only major browser not supporting it yet.

Which brings me to rounded corners. You’d expect that after all these years of internet browsers, being able to program a rounded corner should be doable by now in modern browsers since it’s become a pretty standard design element on websites (some would argue too much so). Yet Internet Explorer does not support this, their reasoning being because it’s not ’standardized’. That seems like an easy answer for not putting in the additional effort for new capabilities. But I wonder how long they’ll hold to that while their competition gains more users who don’t think about the ‘importance of standards’, but who simply want a better web browsing experience.

Since the beginning of humanity, storytelling and our ability to learn is what has set us apart from other species. It almost seems that our interest in stories is in our genes and is what makes our brain work the way it does. I really don’t know if that’s the case, but for the sake of this article it sounds pretty good. I will attempt to briefly go through history as I see it and tie in storytelling with the advancement in technology for telling stories in new ways. It will however be based on my limited knowledge of history with perhaps very little actual, historical information. So let’s see..

• Verbally – In the early days of telling stories around the campfire after a day of hunting and gathering, today we do pretty much the same thing at the local bar after work.
• Written – As language developed, people started writing and delivering letters and writing books by hand to distribute stories to other people.
• Theater – Storytelling eventually turns into an artform and a new approach of live performance is developed which reaches larger audiences.
• Printing Press – A breakthrough in communication as the ability to efficiently and cost-effectively distribute copies of stories allows everyone to get news and ideas from a newspaper or magazine. It also leads to another print communication artform, graphic design.
• Radio – Transmitting news instantly and expanding live performances and the art of storytelling. And let’s not forget what it’s done for the creation and distribution of music.
• Movies – Live performances being filmed and shown to a wider audience at the same time taking the artform even further as technology in this area alone greatly advances. Part of which is animation which also turns into its own artform.
• TV – Being able to watch something in the comfort of one’s home, with more choice than ever before of what to watch. Also created a new medium of interactive storytelling, video games.
• Internet – Every day we see new ways of how the Internet is changing communication and storytelling. From easy communication through Email, to everyone being able to publish their ideas with a Blog. It’s like the printing press with limitless possibilities.

In fact, the Internet encompasses all previous forms of media before it as it makes it all more accessible than ever. From reading news and books, listening to radio broadcasts, watching movies and TV shows, finding local live theater performances and concerts, and on and on.

The sky’s the limit.. that phrase makes more sense in this context as all media formats are going digital and being made available in what’s being called ‘the cloud’. Storytelling and its distribution has reached a maximum and as it has advanced mankind in the past will no doubt continue and at a faster rate than ever before. I think that sounds pretty good too.

An idea I’ve been thinking about for a while now is self-evolving web design. The self-evolving website would be a combination between having dynamic database-driven content and something similar to smartphone technology where the presentation of content changes based on specific user interaction. It’s difficult to really describe at this point, so I figured I would just go through a few examples I had in mind:

• Dynamic website layout - Designing a website’s interface in a way it could evolve with user interaction kept in mind. The design would start out as more neutral and based on click-throughs of different portions of the design, portions with more traffic will begin to become more prominent in the design.
• Keyword-specific content - Visitors that came to the website through search engine results would get different content featured to them from the keywords they search for. The keywords will be referred to as the user browses through the website, showing relevant content like related blog posts in the site’s blog section.
• Visitor interaction tracking – Based on how a particular visitor browses a site, the series of pages that are visited are kept track of and content is generated dynamically from that data. The site will essentially try to guess what the visitor is looking for by showing them related content the deeper the user goes into the site.

Again these ideas are in the conceptual stage. There are obviously a lot of different aspects that need to be taken into consideration to make them work. I really think that websites are starting to head in this direction already though. This is due mainly to the blog format being used in more advanced ways as more people have become familiarized with it. The idea of ‘content is king’ is being taken to the next level when it comes to how websites are designed.

I originally heard about the GTD method a couple of years ago and spent almost a year and a half to finish reading the book. The reason it took so long was because I kept stopping to try and implement what I read in the book. It probably would’ve been a better idea to just read it and then refer back to it, but I eventually did finish it, at which point I already had my system working for me.

The system could be as basic as working with simple lists of things that need to get done daily, weekly, monthly or “someday.” It could also be done using just pencil and paper. In my case, I started with an online Wiki tool called PBWiki. I later switched to using PBWiki just for my ideas and “someday” projects and moved on to Ta-da Lists for my daily, weekly and monthly tasks. I recently replaced Ta-da Lists with voo2do which is based on the GTD technique and is designed specifically for working in that way.

Like I mentioned, an aspect of the book that was important to me was how it talked a lot about paying attention to your own thinking process. This ultimately leads not only to being able to organize your thoughts, but to also being able to follow through with them and analyze their results for better further planning. At least this is the way it worked for me. I found that as I was getting my thoughts out of my head and into my system, I was able to accomplish things in a logical way that lead to better focus of my upcoming goals.

And as I focused more on my thinking, I was able to better handle information consumption. Until reading the book, I didn’t realize how much of an issue it was for me working online all day with information on everything available at my fingertips. I was always good at finding the information I needed, but now I’m also able to control it in a way that works for me.

My primary music player is a Zune, both as a portable device and on my computer. The software allows for a service of paying a monthly subscription fee to download any amount of music to listen to (through the Zune software and player, ofcourse). What if instead of buying albums as I do currently, I just subscribed to the Zune service and downloaded any albums I wanted at anytime. It would be much simpler and in the end cheaper. I figure on average I get about 2-3 albums a month. If each album is about $15, it would be cheaper for me to just subscribe to the Zune service at $15 a month to get those albums.

The biggest problem a lot of people struggle with and is the idea of owning their music. It’s why albums still have top sales and why individual downloads are more successful than the subscription model. But what about instead of getting music, we just listened to music, where instead of owning the music we liked, we just had a list of it and played it from different places, be it online or off a hard drive or other music device. If we thought in that way, our library of music could potentially be limitless and there would be less effort getting to it.

Now what about other forms of media? Cable TV shows are part of your cable subscription. Plus there are packages like HBO and other film channels. For movies, there are services like Netflix. Videogames have a service called GameFly that’s similar to Netflix. Even books have something called BookSwim. They each have their pluses and minuses. I enjoy all these forms of media but there are times where I can go for months without doing one or the other. Being subscribed to them seems like a waste. But I guess the real problem is finding the time to enjoy them all.

Note: I ended up subscribing to Netflix during the writing of this post.

Google showed us that the way advertising works best on the web is by making ads that are very specific to the content of the page they’re placed. Microsoft is following Google’s model but they’re also taking a different approach. Throughout the years they’ve made their way into the television market, most notably with the Xbox and Media Center PCs.

Currently, the way web ads are displayed compared to television is quite different. On the web, your screen is divided with regions for content and others for ads, giving you the option to just ignore the ads completely. On TV, ads split up content during certain time periods, completely taking away what your interested in and giving you no option but to watch the ads. With software like Microsoft’s Media Center, TV ads could also appear around the content, like at the bottom in the form of a ‘bug’ with the ability to interact with it and choose to pause what your watching and view the ad as rich content.

It looks like Microsoft wants to lead the way for next generation television technology where they can also implement their advertising model. Google doesn’t seem to be a competitor on the television side, but their investment in YouTube is leading to some speculation about their future plans. They could also get into the next generation of television through a different route. A potential competitor to the Media Center is Apple’s settop box which works with their already popular iTunes. All Google would need to do is partner with Apple to provide YouTube content and their advertising system and they would be in direct competition with Microsoft.

So there may be a race towards the future of television using the success of advertising on the web. It’ll be interesting to see things progress and which model would work better. Either Microsoft’s standard technique of taking control of a market by throwing money at it or Google’s unique way of easing into other markets.

Rich content based advertising may take longer to catch on, possibly making Microsoft’s effort appear to be ahead of its time (in a similar way as their Web TV venture). Google has always had a pretty clear vision and has a good track record so far. I think for both companies and the next generation of television, targeted advertising is what’s going to change the market.

“No one is podcasting.”

— Old Media (Newspapers)

“Everyone is podcasting.”

— New Media (Web, generally tech geeks)

Well, both sides are right. The confusion seems to be with the perception of what podcasting is. Podcasting is audio or video content recieved through a subscription, or feed, and then synced, or downloaded, to an iPod.

Now, if you’re like me, you don’t have an iPod, you have some other kind of MP3 or portable video player and you don’t use iTunes or a Mac to get your podcasts. This is possible and is still considered podcasting. Also, if you’re like me, you don’t always sync your audio or video content to your portable player. You listen to it or watch it on your computer or your home entertainment system using something like Windows Media Center. And to most people this is also considered podcasting.

When I first heard about podcasting, I completely ignored it, thinking that it was just a fad for iPod freaks. I didn’t catch on until I found out about a particular podcast that I was interested in and decided to check out the website for it to see if it would convince to get an iPod just to ‘podcast’. When I tried getting these ‘podcasts’, I realized that they were just a series of downloadable MP3 files.

It seems like Old Media just isn’t aware of all the ways people are ‘podcasting’ besides and don’t fully grasp its further potential. The New Media online community understands that podcasting is really a new way to enjoy original content. And like blogging has changed the way we receive news, ‘content-casting’ will be the way of the future for receiving audio and video content.

And as more people begin to join in on the fun, the more content will be available until Old Media (and Hollywood) realize what’s going on and find a way to be a part of it instead of seeing it as a threat.