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.

I’m generally OK with the features on my current phone, it has the basics of what I need: Calendar, Notes and Contacts which are all syncable to my PC. The deciding factor for switching is having access to the internet (the Q technically has it but it works so badly that it’s not even worth using). There’s a lot of potential for doing more with mobile Internet access and sofware like Android that uses it well. And as a web designer it feels like I’m missing out on something by not having it.

It’s no surprise, that like a lot of people, I’ve been becoming more and more of a Google fan this past year… switching all my email to Gmail, using Picasa for photos and using Chrome as my primary browser. And along the same lines, Android’s open platform for apps seems to have the right idea. It’s a format that worked for both Windows and Apple since they came out for desktop computers and it’s the direction phones have been steadily heading in anyway. Pretty soon we may even be able to interchange phone carriers. So this could be the last two-year contract I’ll need to commit to!

It’s no surprise Obama’s campaign was based on a single word, it was something people were already feeling anyway (and not just because they wanted Bush’s term to end). It’s even a part of pop culture. With films like Batman and other remakes and ‘reenvisioned’ blockbusters, its become a standard theme in today’s storytelling. I just recently saw the movie Lady in the Water which describes this feeling quite well (in a unique M. Night Shyamalan sort of way).

Which finally brings me to the goal of this post which by now has become almost pointless after putting in your mind all the stuff that’s going on in the world… but there are some changes on this site as well. The About page has been updated with a new message, the layout of the site has been realigned a bit (including cleaner code), and the Portfolio has been reorganized. And if you have a chance as you’re keeping up with your own life’s many changes, I’d appreciate your feedback on them in the comments below.

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.

My latest attempt was with Picasa 3 and I think I may have found a good fit. It’s one of the better tools out there for organizing photos, but it’s best feature is it’s Web Albums functionality where you’re able to upload to an online account either handpicked photos, whole folders, or flagged photos and to send the website link to friends and family.

The funny thing is that it’s done in such a simple way by today’s standards… the photos are uploaded to a web server and viewed online as a photo gallery. Windows Vista promised a way to do this directly from desktop folders, but it’s still not possible now almost three years later (even though it’s now a feature of the next version of Windows). All it took to do this was a storage medium and software that tied an online account into a desktop app. And Google with Picasa made it work together in a simple, seamless process.

And by doing this, Google was able to accomplish something else Microsoft’s been trying to do with Windows Media Center for years: get the photos on your TV. Because you can upload your photos online, if you have a Tivo, you can sign in to your Google account through it and view your online photos as a slideshow.

The next step may be to somehow share the online photo gallery with social networks like Facebook so you don’t have to manually upload photos to your other online accounts that have photo gallery features.

Three years

The main reason the change was necessary in my opinion is the amount of content that is now available on the system. What started out as a few downloadable games and videos has exploded into an extensive marketplace of game content, films (including access to Netflix titles) and television programs. The new interface does a good job of organizing all of it in a way that makes it all easily accessible. It does this in three main ways:

• Primary navigation – Instead of the left and right ‘blades’ of the previous interface being used for browsing 4-5 main categories, they’ve been converted to a list in the top left corner that scrolls up and down. This allows for a dynamic view of categories that change as the user goes into a into a top-level category.
• 3D titles view – As categories are browsed, game/video titles are displayed below with cover art similar the iTunes coverflow except with a 3D perspective. It not only makes it a more immersive experience putting the user in the ‘Xbox world’, but takes advantage of the widescreen format. A few titles closer to the foreground are fully viewable while letting the user know that there are more in the distance to scroll to.
• Information panels – When selecting a title or piece of content, a few things happen. The primary navigation disappears, the background color or texture changes and three information panels appear that are layed out like titles view except bigger as each one has specific actions to choose from. Breaking actions into individual panels creates smart grouping of options that turns a potentially long overwhelming list into almost a step by step process, focusing attention on certain categories of actions, each category perhaps only being needed at different times.

The new interface also allows for integration of new features that have also been rolled out into the upgrade including the (Mii too) 3D avatars that are a part of the environment, with the environment itself customizable with ‘themes’.

The well-named New Xbox Experience is a great example of interactive experience design making it a great improvement to the old interface with plenty of room for what’s become the core aspect of the Xbox 360, online digital media.