At the time, I had worked with many websites along with a few content management systems, enough to where I had some ideas of how I would build my own if I had the opportunity. In my pursuit of the ultimate content management system for clients, I came across an interesting one called Injader. It was a project developed by primarily one guy, Ben Barden who used it for some of his own websites. What got my attention was how lightweight it was, at least compared to the behemoth WordPress was turning into.

After setting it up and testing it out for a pet project I was working on, I decided to contact Ben about helping out with further development of the system by taking on the interface design end. Five months of working on it on the side along with our day jobs, we decided to call it quits. We both had other projects we were pursuing (it was around the time I started Indie Aisle) and this one didn’t seem to work out for us. One thing I realized is that what started out to be a simple tool quickly turned into something rather complex and may have been too ambitious in the end.

I thought I’d share a few screens and describe what the design concepts behind them were (as I remember them). Maybe it’ll provide inspiration for the content management system you may work on someday! The CSS/HTML was completely built so you can click on the screenshots to explore the mockups as they were when I sent them over to Ben.

Sitemap – This is how pages were organized, the unique approach was that it did three things in one: built the navigation structure for the site, gave an overview of the entire structure of the site, and defined Content Types for the kind of information on the site, either info pages, blog posts, forums, or portfolio galleries. It also shows widgets attached to each page which I’ll explain in the next screen.

Widgets – The idea with Widgets was based on three types: Layout which required special CSS/HTML formatting, Data which incorporated database data, and Web which was essentially embed code from other sites. Each would be inserted into a page with template code snippets, in any part of the site.

Tools – Similar to WordPress’s plugins, but mainly focused on behind-the-scenes management which is why it was separate from the content side along with the Themes editor, Settings and user Access options.

Access – A complete user system with custom roles options.

So as always, a failure is also a good learning experience. I got a chance to experiment with some new interface techniques and improve my CSS skills. And the overall experience gave me a different perspective on how I built websites with a content management system.

• Good web browser – responsive and doesn’t crash like it does on my Droid; both iPhone and Android look to have done a good job with the latest versions
• Fast internet – 4G sounded like the way to go at this point, but after seeing what problems my brother has had with the 4G phone he got a few months ago, it doesn’t seem to me like the network’s ready
• Good music player – the Android music player I’ve been using leaves much to be desired and the new one does look better, but still limited; having iTunes to sync music from my computer seems like a better approach, especially now that it’s via wifi
• Space for music – I originally wanted to be able to fit all the music I had on my computer, but I’ve realized that I don’t listen to all of it and find myself having to skip through songs a lot on my phone, so as long as I can easily sync, I’m okay with picking and choosing music I’ll actually listen to
• Syncing for Gmail – this includes Calendar and Contacts; Gmail makes it more seamless on Android for obvious reasons, but I can get the same capabilities on the iPhone too
• Reasonable screen size – I’m tired of so many phones that are supposed to be portable coming out with bigger and bigger screens; my brother has one that’s 4.3 inches and it just looks ridiculous; having an iPod Touch for almost a year now, I like its screen size and am glad the iPhone 4S decided to stick to the same size
• Great camera – the one on my Droid has been disappointing and I wanted something that would be good enough to replace my digital camera; as I’ve been keeping my eye on reviews that compare phone cameras, all the ones I’ve read come to the conclusion that for overall photo and video quality, there is no better option than the iPhone

You can probably tell by my responses that I’m leaning towards the iPhone. And it is in fact what I went with. It wasn’t an easy decision since I’ve had a pretty decent Android device for the last two years and the latest Android update looks promising. But besides the features above, there are two main reasons why I ultimately decided to go with the iPhone:

Android’s philosophy doesn’t seem to work

The philosophy of  ’openness’ and ‘choice’ was the first thing I bought into when getting the Droid. After two years, while it still sounds like a nice idea, it doesn’t seem to actually work when put into action and instead seems to have caused an unintended consequence, fragmentation: devices are not getting the updates needed, showing a lack of support for customers but also slowing down improvements for the platform as developers turn away because they don’t want to deal with making their apps compatible for so many different versions. I’m not saying the open concept doesn’t work, it’s just that at it’s not showing any real benefits over the alternatives.

Better apps are on the platform that has incentives to create better apps

Android being open source doesn’t make a difference when developing apps since it’s ultimately just another platform to develop on. However, when you look at compare iPhone apps with Android, it’s clear that developers prefer to develop on the iPhone. Besides the fragmentation issue with Android, innovation seems to spur further innovation and the iPhone continues to keep that momentum going for its developers.

On a related note, I designed my own app for Android that kept track of pages I wanted to look at a later time. I outsourced a developer to program it and the experience didn’t go so well. Besides the fact that it took two months to get its basic functionality working correctly, it only lasted for another two months before something changed in the way it tied into Google Bookmarks and is now completely broken.

I have hope for the Android platform, but I’m willing to wait and see where things are two years from now when I look for my next phone. The phone and mobile device market is a very interesting point, who knows how things will be two years from now.

To view the notes for some of the slides which include links to examples, click ‘Open in a new window’ button and go to ‘Actions’ at the bottom and then ‘Show speaker notes’.

Layout and structure

I first started coding the HTML and CSS of the design. I used the opportunity to do some experimenting with the latest HTML5 and CSS3 techniques. The biggest part that came out of this was developing the layout to work across mobile devices using CSS3 Media Queries. I cover the results of the approach in a presentation I gave at Desert Code Camp.

Figuring out what language to develop with

As I was continued to code the front end HTML and CSS for the site, I also spent some time trying to figure what backend programming language I should go with. Should I stick with PHP since I had been using it for so many years and was most familiar with the way it worked? Or should I try a different, potentially more beneficial approach by using Ruby on Rails.

What I liked the most about Ruby on Rails was its framework concept. But I realized PHP had its own Model View Controller (MVC) frameworks as well. I decided to try using CodeIgniter to get a good feel for how the programming methodology worked. I went as far as setting up a couple dynamic pages that pulled in different sample data from a database. This gave me a better understanding of the dev process and even influenced the design since it was the first time I went through actual user scenarios.

After doing further research comparing Ruby on Rails to PHP and CodeIgniter and even to Python and Django, I ended up deciding to go with Ruby on Rails. While all had their pluses and minuses, Rails seemed to have the best collection of components which I figured would make the initial version quicker and more cost-effective to program.

Finding a good developer

By the time I got to this point, I happened to come across just the right article for my situation, “How to hire a programmer to make your ideas happen” by Derek Sivers, the founder of CDBaby. It helped me break down the development process and find a developer using online freelancing sites Elance and oDesk.

From using Elance in the past on client projects, the biggest lesson I learned from the experience is that communication is key. It’s important to find someone who clearly understands what’s required of the project and is able to discuss their approach to getting it done.

While I was already developing the front end code for some screens for the app, I realized how there were certain aspects I still hadn’t fully worked out. There were also all these features I had in mind to include but hadn’t really prioritized them based on what was important to get out initially, in a ‘version 1.0′. So just the exercise of thinking about every part of the interaction process and describing the functionality to someone who had to make sense of how to develop it was helpful in figuring out exactly how the final app would work.

Releasing a version 1.0

The developer I worked with on Elance for the first milestone did a great job and I ended up hiring him to develop the full initial release. By this point I already had the project broken down and most of the frontend code for all the screens, so I setup a Basecamp project and we were on our way. About two months later, a final product was coming together.

Before release, I had managed to gather some interest in the project and was able to do a short beta testing period. It helped with bug fixes and gave me a good look at areas that were unclear to users.

Indie Aisle finally went live in November and exciting as it was, the work was far from over. Having it out there meant getting some real feedback and seeing how people were using it. So based on that feedback, there was a lot of needed revising to do. Not only in code and functionality, but also in design and business strategy. There was so much time spent on how things should work from a technical standpoint during development, that the business side, the purpose of the site and its customers, seemed to get lost.

And that’s where I am with things today. We recently released a final piece of the puzzle to the overall concept, at least at this stage. Which means there’s another aspect I need to focus attention on: Marketing. I’ll cover that in the next installment.

It’s been over a month since I got the Chrome notebook and I wanted to share my thoughts on it so far. Before I even get into it, I think I should mention that just the idea of a web-browser-only computer I was already sold on since the Chrome OS was announced and I’ve already begun preparing my own laptop for working primarily on the web since then. So when the Cr-48 came, in a way, I was completely ready for it! Now, on to the review.

Setup

The initial setup was painless, taking about 5 minutes. I open the laptop lid, the Google Chrome logo shows up and about 10 seconds later is a screen to sign in with my Google account and start the short setup process. As I started using it, about 15-20 minutes later in, I notic my preferences and bookmarks are synced from my desktop install of Chrome. So now I’m good to go, no further setup needed.

Web-app mindset

The next step I took was thinking about how I could replace some of my Windows-based apps with web equivalents. This is what I came up with:

• Music –  My last.fm account came in handy for listening to my library of music online
• Documents – I finally decided to give Google Docs a shot and am really liking it so far even though I still need to get used to the idea of keeping ALL my documents online
• FTP and code editor – Even though I still primarily use Dreamweaver on my Windows desktop, I did try out Kodingen in the Chrome Web Store which looks very promising although currently is somewhat buggy
• Photo editing – in case I need do something quickly, Pixlr looks like it can do the job which I also found in the Chrome Web Store, I haven’t come across an opportunity to use it though
• Additional tools - For dev testing websites I think Adobe Browser Lab is a good alternative to using the actual browsers themselves

Of course, for specialty apps that I use,  like Photoshop, Illustrator, Flash, and After Effects, there are no alternatives to replace with. But even if there were, I wouldn’t want to use them on a 12-inch screen anyway. And video games also, but there are only a couple I’m currently playing on my PC, most of the time I’m playing them on the XBox.

Field testing

After I had it setup the way I wanted, it became my main computer for pretty much everything I did. While using it, a few things came to mind:

• It works well as alternative to a home desktop machine where the desktop is the source machine and a Chrome laptop is secondary along with other mobile devices that serve their own specific purposes. It seems to becoming the trend already with primarily-reading devices like the iPad and Kindle.
• Wireless is available pretty much everywhere now. All the places I went to, when I thought about using the laptop, I managed to find a wifi spot. The only issue I had is that it would sometimes disconnect where there appeared to be weaker hotspots.
• Tabs work well fullscreen since it is a small screen, but when I eventually connected to my large monitor at home, I got the urge to have multiple windows pulled out which is what the desktop version of Chrome is great for.
• I understand this is just a test unit, but the the two biggest issues I ran into were: the poor processing power which started get frustrating at times while trying to just watch a video; the instant on sometimes required reconnecting to the network which took a little bit of time.

Final Thoughts

I could see why Google’s taking its time and testing out the product before bringing it to market. Coming out with something by the end of this year would allow them not only to fine tune and fix issues, but the additional technologies it needs to work well can catch up to Google’s big picture idea. One would be Verizon’s 4G network which could be built in as the alternative to wifi. The other are more and better web apps that will be developed and eventually featured in the Chrome Web Store along with Google better-preparing their own web apps with more features to package with the final product.

What will probably be the ultimate selling points above other laptops would be speed and simplification. The instant-on works very well and Chrome is the fastest web-browser available, tie that in with good internet and it’s a winner. And simplifying the laptop makes a lot of sense: eliminating the annoying parts that come with a desktop OS, focusing on a clean, unobtrusive interface, and even cleaning up the keyboard layout. Cost may also be a factor as it seems like it could be considerably lower than other laptops since there’s no licensing fee for the OS and could potentially require less processing power.

So instead I’ve decided to change it to the arrow cursor globally:

body { cursor:default; }

And then define it only for certain areas that it may be in fact be helpful to use it:

code { cursor:text; }

This is the standard practice for your desktop apps, why not do the same on the web? Another approach I haven’t quite figured out how to do yet would be to make the arrow the default and then delay the text cursor change for all text as a global event. If someone has an idea how this can be done, contact me and I’ll post it here.

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.