Let me be the first one to accept, I am a huge Apple fan! But I wasn’t and the credit for this transformation from an anti-Mac person to a huge fan goes to none other than IPhone.

Yea, I know what you guys must be thinking, other blog post about the IPhone but this post would not go bragging about the “awesome” IPhone features just the “video quality” which it excels at :-). I am thinking about the revolution which it would lead to, particularly in terms of its video delivery capabilities.

If you are one of the now many proud owners of a IPhone and even though you are one of those rare to find “IPhone haters”; you have to agree that its video quality just leaves the competition drooling and thinking about ways they can get their product up to the standards laid forth by this beautiful piece of equipment.

 IPhone playing Transformers H.323 Encoded Video

In his intro of the IPhone, Mr. Steve “Genius” Jobs spoke about a new breakthrough media delivery device,  which it has indeed proven to be; You just have to witness one of those YouTube videos that look so “unappealing” on a web browser  but looks mouth watering on an IPhone with a WIFI connection..…(oh lord! Please give me 3G!).

Anyways moving forward with our discussion,  Let me be the first one to predict, that IPhone would change the mobile market with its capabilities to deliver mind boggling video on demand. YouTube was the first one to tap this market, but with the introduction of “Developer SDK” in late February. IPhone would open up to 3^rd Party Developers to unleash amazing range of products. I can see great things in store for the IPhone but it primarily depends on the launch of 3G IPhone; 3G is a very important factor in delivering “on-demand” media wirelessly to a mobile device. As a customer, I would never want to pay for a low bandwidth video rental service, so advent of a 3G IPhone would take this amazing device to greater heights.  

And I can see with the arrival of 3^rd Party SDK for IPhone, we at “SolutionSet” focusing some of our efforts in delivering great quality video / custom solutions to IPhone users globally. Foundations of this can already be witnessed at http://iphone.solutionset.com

For my first SolutionSet blog posting I would like to briefly introduce the User Experience (UE) team and let you know what you can expect from my future postings.

The SolutionSet UE team is composed of professionals who possess extensive experience in the software and Website development arena, developing interactive solutions for clients such as Stanford Alumni Association, eBay Developer Network, TiVo, and Autodesk.

Our mission is to advocate the users’ experience by:

• Researching and defining the users, their needs, and activities
• Organizing information and functionality to ensure that the target users can find what they are looking for and carry out their primary activities
• Design interactive interfaces that are understood and used effectively, directly improving the brand experience and the bottom line for our clients

Our goal is to ensure the usability and accessibility of all interactive and website applications developed by SolutionSet.  To achieve this goal our current activities on most projects include:

• Researching and prioritizing target audience needs to identify and define product features and functionality
• Collaborating in the creation of Personas, Use Cases, and Task Flows that help teams focus on the user’s needs
• Organizing information and functionality into Site Maps, Wireframes and written specifications that are technically and creatively feasible
• Participating in the development of prototypes to demonstrate interactive concepts and/or facilitate Usability research
• Planning and executing Usability research to test and iterate designs
• Conducting competitor and current site evaluations, focusing on site usability, accessibility, and functionality issues

Our key goals for 2008 are to continue growing the team with top notch talent. And expand our strategic solution offerings to fully capitalize on the skills and experience of our team members.

That was a brief overview of the team, now what to expect from my future postings? My plan is to focus on User Interface design issues encountered personally or by my colleagues on day-to-day projects and then sharing any generic learnings on how we might have overcome or solved these issues. Hopefully you will find these postings valuable, insightful, and of course entertaining.  

SolutionSet’s hometown of Palo Alto was fortunate enough to become the epicenter of world cycling for a day by hosting the Prologue stage of the Tour of California. So who else better to make this town a little louder on a sunny Sunday afternoon with over 5000 spectators in attendance? That’s right SolutionSet. We handed out nearly 1500 green Cowbells emblazoned with the SolutionSet logo and URL…and people went crazy. Knowing the events impact and scale, I was thinking what would be a good way to get SolutionSet’s name literally in the hands of a bunch of people. “Cowbell’s” I thought. Cowbells are a traditional item at most European sporting events like downhill skiing and cycling. Since I am an avid cyclist and huge fan of cycling in general, it just seemed like a great thing to do. And we all know I LOVE to make noise. So with the partners permission the order was placed. Thanks to the help of Ted, Paula, my family and Palo Alto Bicycles, we quickly got those noise makers into the hands of onlookers…you could actually hear the event get louder as the bells and their new owners spread out across the race course. There is rumor that as the raced progressed and all the bells had been given away…offers of cash for more bells to be produced was offered. Sorry folks, collectors editions.

The bells even became the structure for the Palo Alto Daily News article on the event. Our effort to spread the good name of SolutionSet, make some folks smile and be loud all at the same time I think we did good. Mission Accomplished and see you there next year.

According to wikipedia an idea is…a concept or abstraction formed in the mind. Philosophers view the simple definition of the word itself in a million different ways. Ideas can be many things…from simple diversions ranging to legal property. But the one thing ideas aren’t is “free”. All ideas have value. Sure some less than others. Compare the idea behind those baby pacifiers with the hillbilly teeth in the front to say, the idea behind the cure for polio or the pasteurization process. Or are they? The value of any idea is directly based on it’s relevance to those who need it. We like to think that what we do as designers, visual communicators and creatives is that we strive to act upon the force known as the idea. In fact that is the most valuable part of what we do…coming up with ideas.

Original ideas are I would dare to say the most valuable part of any creative or strategic exercise. With the wealth of layout programs, filters and pre-built templates out there…the execution is inherently less valuable. Why? Because execution, not to ever be confused with craft, is now a commodity. Because one idea does not fit every problem. That is why truly original thinking and the ideas that result are the most valuable things that anyone can ever create. It is why we work so hard everyday to deliver the things our clients not only want but what we know they need. That is why we get hired.

There is a reason you don’t see a lot of outsourcing for things like curing cancer or any sort of great creative work. Why? Because really big ideas and the solutions that result, don’t fit into template structures and require organic and unorthodox approaches that are not easily replicated in assembly line fashion. Its nice to know in our constant quest to speed every damn thing in this world up, that the idea will come when the idea comes. Again another reason why ideas are highly valuable. In many ways ideas, strategic, thinking and sheer creativity, are not unlike diamonds. Both are reasonably unlimited resources (I know DeBeers would like us to believe diamonds are otherwise…). Both are highly valuable when in the right hands, and ironically there are varying degrees to their perfection. But regardless…there is an awareness of the value they represent.

When was the last time you got a diamond for free? I would say unless you’re on the fortunate end of some inheritance the answer is never. So the same should hold true for ideas. We value our ideas. Our clients value our ideas. Clients would never arrive on our doorstep and they would definitely never return if they didn’t see this value. The ideas that we arrive at or strive for, directly add value to our clients business and goals, in many ways, further compounding the pure value of what I have been talking about. Additionally we benefit from our ideas too, since they provide opportunities to explore new possibilities, that lend to our experience as strategic thinkers, and help power our internal libraries of material that help generate even more valuable new ideas. Simply put. We work very hard on our ideas, they deserve to be honored and delivered with respect. So it goes without saying that our ideas are never ever to be given away for free.

Why Methodology?

In my years of developing websites, I have seen many methodologies, processes, etc. In this article (and depending on interest - future articles) I’ll describe what I’ve found to work well and share some of the tools and deliverables that accompany a good web development process.

The first question is why should you have a process in the first place? The answer is to keep everyone informed of the progress of the project, what is expected, and to be able to see what’s coming next and track progress. The client (in our case an external client - at a company often an department or group of people) can gain visibility into how web sites are built - many have limited or no experience with getting to a good web site. Once the project has begun, the client should understand what is expected of them and where the points of no return are. A well articulated methodology and strong project management that ties back to that methodology are key to keeping a client up to speed. Internally, a methodology serves to ensure that the proper thinking is done up front so that time is not wasted on building the wrong things. It also ensures that the team knows what their deliverables are and where in the project they are.

Throughout this article, I will refer back to the concept of building a building.  People often come to me and say “I want a website - how much will that cost”.   That equates to “I want a building, how much will that cost”.. Obviously, there are tens of thousands of questions to answer in that analogy.  Some obvious ones:

• On what land? Do you own it or do we need to buy / lease it? — What platform? Does it exists?  Should we buy for client or host with ISP?
• What kind of buildign will it be (house/office/store/gym/community center)?  — Corporate site/Intranet/Ecommerce Site/Gaming Site/Community Site)
• How many people will it need to accomodate (a skyscraper or a garden hut)? — A small targeted community of 500 or the next Myspace
• What kind and how many of rooms will you need (bedrooms/cubicles/auditoriums)? — What kinds of functions will your site need to perform and how many functions will you have on the site
• What kind of aesthetic should the building be (spanish style/modern/craftsman)? — Web 2.0 style, sleek and corporate, fun and entertaining.
• How polished would you like the finishings to be (Home Depot special or Dornbracht?) — Do you want custom photography, AJAX interactions, and 27 rounds of creative review or are you happy with any “professional / on brand” design as long as it works functionally.
• Will you be needing to expand in the future and where (having more kids, or when you have the money, you’d love to have that back porch and pool)?  — What new information / functions / users will you want to add to the site in future releases and how should the site be built to accomodate those items.

Had enough of the silly analogies cause I can keep going.  Thought so.

Methodology Overview

Define

The first phase of a project should be oriented around understanding WHAT the project is about. What are the:

• Audience requirements
• Brand and creative requirements
• The browser & front end requirements
• The systems and integration requirements
• The technical and functional requirements
• Performance and scalability requirements

Typically, this information is found through interviews / audits of the current systems, sites, materials, brand guidelines, etc.  In the phyical world, this would be defining what type of bulding to build, approximately the number and types of room, specifying the need for phone systems, plumbing tie ins, etc.  The deliverable is the Requirements Document which contains the following items:

• Final project schedule
• High level site map (preliminary)
• Wireframes of key pages (enought to show what the core functions are)
• High level systems and hosting diagram (preliminary)
• Creative brief (including mood boards, picture studies, personas, comparison sites, etc.)
• Requirements documnet (combining all the deliverables into a cohesive document)

Design

Now that we know what we’r going to build, it’s time to design HOW the site will be built.  This is equivalent to a blueprint in building a house - exaclty how are those rooms laid out, what colors to paint, who will be the subcontractors, etc.  By the time the design phase is complete, there should be no question as to what is being build (down to the finishing details) and how it will all be put together.  The items in a typical design document are:

• Site maps and wireframes of key pages
• Visual design and style guide for key pages and all elements in site
• Systems architecture (what machines, how many, what os / web server, etc.)
• 3rd party software specifications (which applications are installed, how are they customized / integrated)
• DB Schema and explanation (full ERD with explanation of what tables and fields are used for what)
• Functional specifications (desciptions of all the funcitons on the page, coding notes, reference to DB tables and wireframes)
• Coding specifications (describing front end / back end stanadars and naming conventions, directory conventions, image naming conventions, etc.)
• Final development and deployment plans

Develop

Knowing what needs to be built and how, the development phase can begin.  During this phase, the site or applicaiton will be built out.  Like in the real world, documents are good, but daily review by the architect of the progress is crucial.  The tasks need to be executed in the right sequence with an overall vision for the end product.  During this phase, trying to always picture the end product and focussing on the key building blocks is the best policy.  This is typically done by daily scrum meetings where each of the developers has tasks reviewed.  It’s the job of the project manager and account manager to monitor progress, make adjustments, and keep the project on schedule.  Typical tasks during development include creation of:

• Detailed design for all elements on the site (Creative)
  • Header, navigation, H1 – H5 elements, form elements, treatment of images, treatment of search / results tables, step 1-x wizards, etc.
• Master HTML templates for all pages (Front End Development)
• Final HTML/CSS code for all pages on the site (Front End Development)
• Integration of HTML/CSS into back end infrastructure so the end product looks the same as the HTML templates (Front End Development)
• Final JS/Flash/AJAX for any interactivity on the site (Front End Development)
• Alpha version of all functionality using the generic HTML wire frames (Technology)
• Beta version of all functionality specified (Technology)
• Functional QA on development servers (QA)
• Working code to import / export information from the system (Technology)

Deployment

One the QA is completed on the development servers, it’s time to get the site live.  This involves not only moving the code, but wrapping up all the loose ends on a project and training the person who’s going to continue to maintain the site.  This is the time to sweep out the corners, get all the instructions together, verify all dimensions, etc.  Depending on where the site will be hosted (in house vs externally)and who will maintain it, the deployment phase is different on different projects.  Sometimes the site is simple and the environment is identical to development and this is a fast process.  Sometimes the final deployment is as difficult as the development as the environment may be very complex, tie ins to other systems need to be established, and completely new team members (from IT) need to be trained on all the componenets.  The typical deployment tasks are:

• Finalized annotated PSD files for future development (Creative)
• All source code (Front End / Technology)
• A full license for City of SF (DTIS) to use the code for business use as defined in the MSA (Technology)
• Working code on final development environment (Technology)
• Final integration testing and data import assistance (Technology / Consulting / QA)
• Final QA checklist for the site and bug tracking system (Consulting)

By following this (or another well thought out) methodology, your projects have a higher chance of succeeding and the end product will be more useful.  Try to understand why this is and explain it to all team members (on your team and in client organizations).  Each project will be different and this methodology should serve as a guide.  But don’t think that a website (or building) can be built without knowing what you’re building first, how your’re building it next, and without good supervision during the development and deployment process.

Over at ryanbrill.com, I’ve previously written about the multiple class bug in IE6. Today, we’re going to look at another similar IE6 bug: the ID-Class bug.

It seems that IE6 chokes when you have an element with an ID and several different class states. A common example is when you add a page class to your #content div. Take this example:

Home page:

<div id="content" class="home">
	<p>Home page</p>
</div>

About page:

<div id="content" class="about">
	<p>About page</p>
</div>

CSS:

#content.home {
	background: blue;
}
#content.about {
	background: red;
}

Given that code, IE will only ever add the styles to the #content.home div. #content.about or any subsequent styles following the #id.class paradigm will not get applied. Note that the order of the classes in the CSS is key here. If you move the #content.about rule above the #content.home rule, then the #content.home rule will no longer work.

So, how to fix this?

There are two options. The easiest one is to simply remove #content from the selectors, leaving you with:

.home {
	background: blue;
}
.about {
	background: red;
}

This may not necessarily be the best solution, as now you have generic classes that could be applied elsewhere (for instance, <a href="index.html" class="home">).

That brings us to another key part of this bug. This is only relevant if the #id.class is the last item in the selector. So, another option is to move the class higher up in the source, perhaps to a #container div:

#container.home #content {
	background: blue;
}
#container.about #content {
	background: red;
}

That will work fine, as the #id.class is no longer last in the selector. This is the solution I recommend, as you won’t have to worry about a generic class being added to un-intended elements.

If you had a million dollars in your media budget, what is the best spend for your dollar?

1. Buying 3 months of online media on tier 1 sites that push visitors to a landing page

2. Spending $400k on a brand friendly content and community site with some social media widgets that is supported by a $600k media spend to drive people

Depending on what resource and who you ask, it’s been said that it takes about 17 times for a person to see your brand in a advertising before they remember, respond and buy. If that is the case, I’m going to argue that it is unlikely that option 1 will achieve those 17 views.

With option 2, by sending those visitors to a brand friendly content and community site you are opening the opportunity extend the brand relationship with the visitor as they may come back and join the community. Each time they return they experience another brand impression (getting to the 17) and your brand cache increases as the experience with the site is a stronger touch point as opposed to a banner. You may drive fewer people to the site with the smaller buy but the quality of advertising may be significantly higher. However, the community site should play into all future campaigns as a way to extend the relationship.

Obviously, some marketers and media folks aren’t yet aware or convinced of this benefit. But, it’s quite compelling when you start viewing how this community sites increase the ROI of the media spends.

That’s the power of community marketing. You are apt to keep some of your media eyeballs coming back where a typical landing page wouldn’t stand a chance of repeat visits.

There’s a new analytical tool out there for the web offered through Clicktale. I feel it’s a good idea to know what’s new out there and I wanted to let you know that I’m trying it out.

A fellow Project Manager sent me an email about adding recordings of how users visit a website, offered through a service, Clicktale. I ran the request by our Managing Partner who said, “go for it”.

It’s always fun to see what’s new and interesting out there as far as services go for the web. Initially, everyone seems pretty excited, but after awhile it’s good to check and see if we’re still interested in the results enough to review the data.

It’s possible that we may want to suggest the service to a client who we feel would benefit and the best way to review something is to try it out yourself.

I’ve added the code to our website, which entails adding a bit of clicktale provided javascript to the header and footer of the web pages. Once that’s done, clicktale immediately starts recording visits to the site and actually records how a visitor navigates through your website and around your pages.

Here’s a screenshot of the results for our website: www.solutionset.com

From here you can expand the results and view the recording of that visitor. It’s pretty fun, and I’ll see what I can learn from it.

Having clients all over the Bay Area and the United States means frequent meetings with contacts near and far. Whenever possible, we at SolutionSet like to see our clients in person, even if that means an occasional field trip. But sometimes the demands of a fast moving project schedule, combined with freeway gridlock, make meeting face to face a time and calendar challenge. In those cases, we resort to the new-fashioned conference call.

Telecommuting with Clients: The Good:

+ Environmentally-friendly. Picking up the phone rather than driving of flying saves CO2 from entering the atmosphere.
+ Cost-efficient. Even with the cost of professional conferencing services, dedicated lines, and long distance fees, phone conferencing is more economical than traveling.
+ Age- and mood-flattering. Conference calls help shield participants from knowing much about each others’ ages, appearances, and dispositions. This often proves to be a great equalizer, where people learn to evaluate each other based on performance and predictability rather than other factors. It’s great, too, for staff to show they’ve got the right stuff without feeling judged for appearing young, old, what-have-you.

Telecommuting with Clients: The Bad:

+ Point of reference. For projects that never meet in person, it’s hard to have a concept of the person you’re working with if you never get to see him or her.
+ Happy helper phenomenon. Being a voice on the end of the phone line also means the client doesn’t always realize that you’re a real person. There’s a danger of being seen as a ghostly sprite.
+ “Which page are we on?” Then there’s just the practical issue of not being able to always keep everyone on track and focusing on the same thing. Thankfully, online conference components with screen-sharing and whiteboards help eliminate most of that, but you never know what people are doing while they’re on mute. There’s a real danger of participants multi-tasking and in effect, not staying on task at all.

Suggestions to Make the Most of Telecommuting:

+ Try to meet in person for the initial kickoff. Knowing the faces of all the major players will serve everyone well for the duration of the project.
+ When you can’t meet in person, send materials in advance whenever possible so participants have more time to absorb the material. It helps make the most of the call/conference.
+ If you use IM or other online tools with your clients, use a tasteful headshot of yourself for your avatar and encourage your team members and clients to do the same. It helps everyone remember who’s who and gives a human element to the online experience.
+ Schedule a party or celebratory event at the conclusion of the project. Getting together at the end of the project helps give distant teams an opportunity to congratulate and appreciate each other’s hard work in a way that just can’t be expressed fully online or on a call.

Working online is a big blessing that improved technology gives consultants, but doing it well is a challenge. A great combination of on- and off-line interactions will help make sure your client relationships stay personable, even when you’re not always meeting in person.