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.

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.

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.

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.