The other great thing about this set of user stories is that it challenges people to think about a different set of disabilities than they would normally thing about. For example, most people immediately think of screen readers when thinking about accessibility but forget about things like color blindness, epilepsy, hand tremors, cognitive disorders, short term memory, dyslexia and the like.

For example, as a confession here, I’m ADHD and mildly dyslexic. Captcha’s drive me up a WALL!!!! It takes me a long time to work through them especially if they have a series lower case of Os and Es. I have other friends who are much more dyslexic than I am and I have no idea how they sign up for anything on today’s web…

But the really hard one for me is when there’s a lot of text with no paragraph breaks or other things to break up the text. It’s really tough to get through and I have to work through it sometimes 10-15 times to get it. If it’s important, I’ll copy it into a text editor and break up the text and then read it.

Here’s the list of user stories that they have put together to date:

• Mr. Lee, Online shopper with color blindness
• Mr. Jones, Reporter with repetitive stress injury
• Ms. Martinez, Online student who is hard of hearing
• Ms. Laitinen, Accountant with blindness
• Ms. Olsen, Classroom student with attention deficit hyperactivity disorder (ADHD) and dyslexia
• Mr. Yunus, Retiree with low vision, hand tremor, and mild short-term memory loss
• Mr. Sands, Supermarket assistant with Down syndrome
• Ms. Kaseem, Teenager with deaf-blindness

I really like this list and am hoping that it continues to grow and refine over time.

This project is not for you to write XBox games at the moment but rather it works with the Microsoft Kinect SDK BETA 2. There are a lot of awesome projects that are using Kinect for the PC. I talked about the stuff that Von Bismark is doing the other day. I’ll dig into that more in an upcoming post.

I love this because it captures the imagination as to what’s possible if you can quickly and easily create a natural user interface by dragging and dropping code snippets.

Scratch and Kinect from Stephen Howell on Vimeo.

Full instructions on how to set it all up and get started writing games is on Steven’s site at http://scratch.saorog.com/.

For lots of information about the Scratch project:

Educators – Information for educators using Scratch

News – Stories about Scratch in the media

Research – Papers and presentations about Scratch

Donate – Support the Scratch project

Amulet devices are doing just that. They are a BizSpark startup based in Dublin, Ireland. They are a device and software company. The software does voice control of Windows Media Center which can be the hub of your home entertainment.

Their remote is a universal remote that has a very clever microphone that is activated by a gyroscope. When you tip up the remote, it activates and allows you to control your media center by voice. It means that the remote won’t accidently pick up your voice and start changing channels on you right before the winning goal or the bad guy gets the bad guy. It also means that it’s you can use it in a crowded and noisy room as the mic is right next to you.

They are, unfortunately not available for sale in Europe but they are available all over North America.

At the heart of Michael’s post is this table.

	WPF	WPF XBAP	Silverlight	ASP.Net + AJAX
Client	Windows XP SP2 (With .Net 3.0), Vista and obviously Windows 7	Internet Explorer + Windows XP SP2 (with .Net 3.0) & Vista	FireFox, Mac Safari, Internet Explorer	Any Web Browser
Deployment	Downloadable Installer or ClickOnce	Runs in Internet Explorer secure sandbox	One-time install of Silverlight plug-in	Web Page
When to use	Programs that need access to Windows desktop files.	Intranet applications for Windows-oriented companies.	Rich Internet Applications for public-facing web sites	General-purpose public-facing web sites

Here’s my 2 cents on the subject.

WPF

WPF is a fantastic choice for applications that need full access to the desktop for any number of reasons. That could be full 3D support, access to desktop files and the like. You can install these applications through XCopy, a full downloadable Installer or a ClickOnce installer. Where possible, I like to leverage the ClickOnce installer as it gives some amazing benefits around auto-update and keeps my application in a secure sandbox so deployment becomes really easy.

WPF XBAP

Just don’t use XBAPs anymore. This was an attractive option for Intranet applications back before Silverlight 2 and to a lesser degree Silverlight 3. However, now that Silverlight has the power that it does with .NET and OOB options and the like, opt for Silverlight anytime you would have considered XBAPs.

Silverlight

Silverlight is the right choice for any external facing Applications. But that’s the key. I really look at Silverlight not as an HTML replacement but a true application layer. That’s one of the central points in the talk that James Ward and I did at Web 2.0 Expo last year – http://www.slideshare.net/joshholmes/best-and-worst-practices-building-ria-with-adobe-and-microsoft.

ASP.NET + AJAX

ASP.NET + AJAX is the right choice for external facing, or even internal facing, web sites where the primary focus is information dispersal. That said, there are some amazing applications built with JavaScript in the browser.

Overall

The reality is that there are a lot of grey lines. WPF is getting a lot easier to deploy breaking down the traditional decision points between desktop and web applications. Rich Web Applications blur those lines as well and the reality is that they could be used to build a lot of applications that have historically been either written as full desktop applications or as web applications. Then on the web application side, JavaScript and the browser are getting faster, strong and easier to develop all the time so it’s becoming more of a viable application building set of technologies.

<update>It was brought to my attention that it’s often not a web designer but rather an Information Architect or a Developer who is updating the layout on the page. Completely agreed and this is yet another reason that you should look for competent web designers for the layout and design of your page.</update>

What’s bringing it up now is that CX Partners recently blogged about The myth of the page fold: evidence from user testing | cxpartners and it concerned me a little. CX Partners does a lot of user testing and one of the things that they have tested for is whether or not the “Fold” mattered to users and out of 800 users, only 3 were unable to find content because they would have to scroll to find it. They are right, users are used to scrolling and are willing to do so if they know that there’s more content below. We just need to give them visual hints that there is more content that they will have to scroll to see. What they are trying to fight is the urge to put all of the content or at least all of the *important* content Above the Fold and design pages so that users do have to scroll. I’m on board with that fight. Cramming all of the content into cramped margins and smashing things together just so that it can be seen without scrolling is horrible design.

Here’s the part that concerns me as an old school print layout guy. There’s a fundamental miss on what the “Above the Fold” content is supposed to be used for in your layout whether it’s print or web design.

How does print layout treat above the fold?

The above the fold content is not meant to be the meat of the content or really even the most important content. It’s meant to be eye catching. It’s the lure for people to pick up the paper or magazine.

When thinking about the fold in a newspaper, think about the old school newspaper dispenser with the top half of the top page displayed in the little window. There is a deliberate attempt to put a catchy photo and headline in that window so people buy the paper. Is that the best thing in the paper, not even close. That’s the picture that’s going to look good on someone’s coffee table when they toss down the newspaper.

Or better, think about the magazine stand and how there are potentially hundreds of magazines there and you need for yours to stand out enough that people will buy it. Think this through – what can they see in the magazine stand? Typically they can see the top edge of the magazine and part of the picture. I was amazed once when I was talking to a freelance sports photographer who told me that he’d net $40k-$60k for one photo if he could land the cover picture on Sports Illustrated. But it makes a ton of sense. This concept of trying to stand out on just a headline and a photo is not lost on the smart people at Sports Illustrated. The right picture could make far more than $40k worth of a difference on the stand.

How does this apply to web design?

Honestly, it’s the same exact concept. The fold or scroll line is the area of the page that people can see without having to scroll down the page. This area needs to catch people’s attention correctly because they may only be on your page for a few seconds. If you look at the statistics on any site that gets a decent amount of traffic and the average page view length is measured in seconds, not minutes.

When people are browsing through and they get a link from another site or from a search engine, what’s the first thing that they see? Imagine that as if they are glancing past your page among the potentially hundreds of others that they are looking past which is really not that much of a stretch because they are looking to see which pages are more likely to fit their needs than others. They may not be paying for your content but they are investing their time.

The problems come in two sizes. First, there are designs that try to shove as much content as they can into that above the fold area because there’s an assumption that if it’s not there, their users won’t see it. Second, there are other designs that completely shun the idea of scrolling and end up with these horrid wizard style pages where the user has to click through to see the next page and the next page and so on. Either of these are poor choices.

Back to the article for a moment – I really liked CX Partners’s “Design tips to encourage scrolling”. What was missing is the “How to hook them and keep them” bit.

Let’s look at Jeff Blankenburg’s blog for a good reference here.

You know exactly what you are going to get on his page. The disk in the middle, which is what most people see first cycles through all of the social networks that he frequents. The tweets across the top express his last several publically blasted thoughts while the little bird that flies around them draws eyeballs to them. The menu shows you that he’s delivering Code and Slides through this blog in addition to other posts. The RSS tag that hangs down and swings a little definitely captures the attention and draws people to subscribe. Finally, the title of the blog and the first blog post start drawing eyes down the page to see the meat of the content. But what real content is above the fold on Jeff’s blog? Honestly, there’s none. All of the real content is below the fold so the user has to scroll for it. Going back to the CX Partners post, that’s fine. Users know how to and are willing to scroll for content if they find the page interesting. The *only* thing that I dislike about his header is that it’s a fairly large chunk that takes 3-5 seconds to load the first time. This is a killer if the use
r is only on the page for 3 seconds.

Another great example is any Amazon product page. They have the picture of the product, average user rating and price right at the top. The product detail, related products, the actual reviews and all of the rest of the content is below the scroll line. Obviously, it’s successful for them.

Wrapping up…

Above the Fold is widely miss-understood. You need to realize that this critical section of the page is not about shoving as much content as you can the user. It’s about effectively giving the “Elevator” pitch on your site and getting that longer look that will likely involve scrolling down to see the real content.

Guard the above the fold content and keep it to the essential bits that will tell the user what your site is about rather than trying to give them everything in one big drink from the fire hose. Whenever anyone talks to you about moving a certain section of content above the fold, turn the question on them by asking them how that keeps people on the site over all.

Right now, they’ve got a number of design wizards that you can leverage but they’ve built a great plug-in model so that you can write your own for your favorite jQuery UI plug-in.

Check out their video on how to leverage Glimmer and how it all came to be.

I’m really geeked and am looking forward to using this in my next web dev projects…

There are three that I think that you have to have – Unify, Colorful Expression and BlendSense: XAML Intellisense for Expression Blend.

Getting a Blend Add-in to run

Because it’s not a supported add-in model, there’s not a built in add-in manager that does the heavy lifting like the Visual Studio Add-In manager.

What you have to do is open up Expression Blend (or Design) passing in your add-in as a command line option. This starts up blend with that add-in enabled. The good news is that you don’t have to do any type of COM registration or anything to get it to work. The bad news is that it’s a hassle for those of us who don’t live on the command line like some people.

Another other option, is to alter your Blend Shortcut to include the –addin parameter. This accomplishes the same task as the command line, it just does so without all the hassle of opening a command line.

There are multiple problems with both of these solutions.

First, it is only able to handle one add-in at a time. Second, that only loads the add-in when you specifically click on that shortcut but doesn’t work from a lot of other places, like launching from Visual Studio.

The great news about the first issue is that it can be solved by another add-in.

Unify Add-in

Unify is an add-in manager. It’s going to do all of the heavy lifting of loading and launch a number of different plug-ins such as the Xaml Intellisense for Blend and Colorful.

When Unify installs it automatically gives you a prompt that starts the Unify add-in. However, that still only solves the first problem of getting the add-in loaded when we deliberately set out to do so.

Launching Blend with Unity from Anywhere

The second problem, as mentioned above, is a little harrier. It’s that the shortcut is not the only way to run Blend. What you have to do is fix all of the different ways that you can run Blend. That includes selecting a project file from Windows Explorer and clicking Edit in Blend in Visual Studio.

This, unfortunately requires some registry hacks and the like but you can get there from here. The first registry hack to fix is the opening a solution from Windows Explorer. To accomplish this, the following code copied into a reg file works on a 64X machine. You’ll have to remove the (86) on a 32X machine.

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Expression.Blend.ProjectFile\Shell\Open\Command]
@=”\”c:\\Program Files (x86)\\Microsoft Expression\\Blend 2\\Blend.exe\” \”%1\” /addin:Unify.dll”

The second registry hack to fix is the launching from Expression Blend by right-clicking on a XAML file in Visual Studio and selecting “Edit in Expression Blend”. To do this requires understanding how the right click in Visual Studio works. The list of available commands comes from the registry. When selected, it passes in two parameter. The first is the path to the actual solution and the second is a /file:filename.extension parameter. It looks as follows:

“C:\Program Files (x86)\Microsoft Expression\Blend 2\blend.exe” “C:\Projects\QuickNavigation\QuickNavigation.csproj” /file:”Page.xaml”

What we have to do is redirect this in the registry to a bat file that will pass in our /addin parameter. Personally, I created a BlendWithUnify.bat file in the /Blend directory as follows:

start “Blend” “C:\Program Files (x86)\Microsoft Expression\Blend 2\blend.exe” /addin:Unify.dll %1 %2

Technically, we could have used the .bat file with the first mechanism as well. We need to fix the registry key as follows:

[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Expression\Blend\VS]
“BlendLaunchPath”=”\”c:\\Program Files (x86)\\Microsoft Expression\\Blend 2\\BlendWithUnify.bat\”"

Now we are cooking with gas and are ready to investigate a few more add-ins.

Colorful Expression Add-In

Colorful Expression was directed to me by Jared Bienz after the Expression Design tutorial that I talked about recently. It’s a sweet add-in to Expression Blend (or Design) that gives you access to a ton of different color swatches that are out there on the web. Specifically, it taps into Kulor on the Adobe site. These are mostly swatches put together by pro-designers. These are also rated so you can pick the higher rated groups to be sure. In any case, they are definitely better than the ones that my color-blind self can choose.

Jonas Follesø saw that Kulor has a open restful API and couldn’t resist playing with it. Combine that with the (unfortunately unsupported – see below on how to get it to actually run in Blend…) add-in model for Blend and magic happens.

What it does is that it shows up as a tab in Expression Blend (or Design) and alls you to browse color pallets from Kulor for use in your application. There are a couple of slick ways that you can do that.

First, if you are running Design, you can hit the down arrow looking thing under a swatch and save it as an Expression Design Color Swatch. The next two work in either Blend or Design.

First, you can click the # button or select the swatch and hit Ctrl-C to copy the swatch to the clip board. If you paste that on a Page or UserControl, you get the swatch, but more importantly, you get the colors created as static resource brushes. You can also just go into the XAML in either the UI surface or the app.xaml and paste them that way.

Second, you can use the color picker from the normal color picker to select an individual color. This is pretty cool as well as it allows you to be very selective about your colors.

You can also run it as a standalone application if you want to pick a color swatch for use in something other than Blend or Design. I can see using to figure out color pallets for my CSS style sheets. I’m also going to contact Jonas and see if he has thought about building it for Expression Web. But that’s just me wishing and hoping until I hear back from him.

Check out Colorful Expression and give it a whirl. I’m interested to see how you use it.

BlendSense: XAML Intellisense for Expression Blend Add-in

Just yesterday I was on a call with a guy who was frustrated by the fact that there’s no Intellisense in Blend for XAML. Well, ask and you shall receive. There’s a skunk works project called BlendSense that was put up at http://code.msdn.microsoft.com/BlendSense but it was only for the Beta versions of Expression Blend 2.5. They haven’t updated it for the release which was actually called Expression Blend 2 SP1. So, the good folks at http://www.rhizohm.net recompiled the code for us and posted it at BlendSense: XAML Intellisense for Expression Blend.

There are a couple of limitations on it’s functionality. right now, it’s using the WPF namespace types and the like for it’s Intellisense. That means that it’s not ideal for Silverlight as the Intellisense might be lie to you – but that would just take me back to my MFC days… The second limitation is that it doesn’t handle custom namespaces and the like so you’re out of luck if you are using a custom control or third party components.

Technically, it’s using an XSD file that is built for Intellisense so you could edit it to fit your needs.

Conclusion

These three add-ins are fantastic and I’m thrilled that they are here. Both of them have already, in the day that I’ve been using them, saved me time and energy in some things that I’m working on. It’s a little bit of a frustrating process to get Unify running for every scenario but it’s worth it and hopefully I’ve done the leg work on figuring it out for for you.

I’m at an internal conference at Microsoft this week and one of the sessions that I attended was called Practical Design tips and tricks for Developers. It was a set of hands on labs that were created out of the Expression team. It was really slick and I learned a whole lot of new techniques and am feeling a whole lot more confident in my Expression Blend abilities. The really slick part is that you get to work through those same labs if you are interested because they have been posted on Arturo’s blog.

This 13 part video series will walk you through creating a workable color palate with a range of colors which all work together, creating brush resource out of those, creating shapes all the way from simple straight and curved lines to glass button effects with the simplest possible steps and really sets you up with the basics of what you need to know. It was really cool to be able to walk through those labs.

The labs are as follows:

1 – Principles of Design Series:  Learning about Balance using Expression Design

2 – Principles of Design Series:  Learning about Rhythm using Expression Design

3 – Principles of Design Series:  Learning about Emphasis using Expression Design

4 – Principles of Design Series:  Learning about Symmetry and Asymmetry using Expression Design

5 – Principles of Design Series: Learning about Unity using Expression Design

6 – Principles of Design Series:  Learning about Points, Lines, and Form using Expression Design

7 – Choosing Colors to Complement Your User Interface with Expression Design

8 – Experimenting with User Interface Colors with Expression Design

9 – Creating Mosaic and Tiled Patterns using Expression Design
10 – Learning to Create Icons using Expression Design
11 – Creating a Sample Icon using Expression Design
12 – Designing a Glassy Button using Expression Design
13 – Applying Effects to Bitmap Images using Expression Design

For links to the videos and digital assets that you need to accomplish the the labs, check out Arturo’s post on it at ux.artu.tv » Blog Archive » New Video Series: UI Design for Developers Series, by Total Training.

Jared Spool is one of my heroes. I go hear him speak every time that I get a chance to and have often retold a number of his stories with various clients. One of the first times that I heard him speak was at the Software Development Conference in 2000.

Jared is a usability expert. That does not mean graphic designer. That means that his expertise is understanding the user and building an experience that is relevant and meaningful in the user’s context.

So what is a “User’s Context”? It’s all of the things that make up your user and how they work. What’s their education level (high school, college, doctorate)? How loud is the work environment (are they on a call center floor? are they in an office by themselves?)? How many and how big are the individual tasks that the user has to perform (is it clicking one button or filling in a 1000 question survey)? Are they wearing gloves while working (such as a mechanic)? Are they familiar with the application (such as an internal application) or are they new to the application (such as a publicly facing web site)? What’s the average tenure of an employee? All of these things and more make up the context for the user and dramatically change the needs of the user for a given application.

He talks about the process that his firm goes through where they start with “Users in the Mist”, all props to Dian Fossey. This involves sometimes 2 or more weeks of just observing the users at work in their natural environment. This gives him a good understanding of the users and how they work so that the software that he’s helping create will slide right into the way that they need to work without them having to spend time fighting to the tools. Sometimes, the result is actually not more software. I know that’s shocking but it’s true. One of these stories ended up solving the worker’s issue with plywood and Christmas tree lights. That’s cool.

I have a tremendous amount of respect for those that have graphic artist abilities because I’ve got none. However, you should not confuse that with usability. This point is very clearly demonstrated in his latest article on his blog – UIEtips: The $300 Million Button » UIE Brain Sparks. In this article, he talks about a fairly straight forward ecommerce site that was loosing millions a year and they couldn’t figure out why. They brought in Jared’s team who after a few weeks of usability testing with real users changed the working on the button for a $300 million dollar jump in profits the following year. The button was pretty enough, functional enough and so on but the user’s didn’t understand the ramifications of clicking the button. That’s an issue that they found through extensive usability testing.

Before you spend a lot of time and money building a beautiful skin to your application, make sure that you understand your users and that you’ve built the application in such a way that it works for them rather than them working for the application.

What is the Phizzpop Design Challenge?

Let me back up here and explain what the Phizzpop Design Challenge is. Phizzpop, the new Microsoft center for design excellence, sponsored a design challenge focused on the designer/developer workflow while solving an experience design problem. They invited a number of different design firms to compete in regional competitions, 36 teams total took them up on the challenge. The winners of the regional challenges go to South by Southwest to have a showdown to determine the national winner. The challenge itself was send at least 2 but no more than 3 of your “A” team to design and build a solution for a problem in 2.5 days. At the end of that they publicly show their solution in front of a large crowd and importantly a panel of judges. To help them out, there was a 2 day training class in Expression Design, Expression Blend, WPF, Silverlight and so on. Additionally, they provided me and a number of other resources from a technical end. The goal was to make sure that the technologies were not a blocking issue to success for the teams. I was completely amazed at the mad design skills that each of the teams brought to the table. Those of you who know me know that I couldn’t design a handkerchief so my opinion is not the one that matters. However, Chris Bernard and everyone who saw the finished products were really impressed with the quality and completeness of the designs across the board.  

What was the design problem?

Each of the regional events had their own design problem. I really liked the one in Austin as I really enjoy independent films and social media. There’s an independent film distributor called Microcinema out of Houston that does local viewings/film festivals called Independent Exposure around the nation at coffee shops and the like. They want to reach out beyond their local viewings which are expensive to set up, market and run using all the technologies that are available. There were three personas that were involved including a college film student, an artsy non-technical wanna-be bohemian who’s married to a doctor and a social media junkie/job recruiter. The designs had to satisfy all three of the personas to be complete.

The teams were judged equally on:

- Satisfaction of Constituent Needs: How well does the needs of the constituencies as defined by the profile? Is the experience appropriate for the audience? How elegant is the experience?
- Satisfaction of the Market: How well does the solution address the market needs? Will the solution work across all of the identified constituencies?
- Uniqueness of the solution: Is the solution unique, differentiated and defensible?
- Technical Excellence: Was the team able to build a working solution (however limited), or is it purely a scripted prototype?
- Aesthetics: How visually appealing is the solution?

There were also bonus points available for integrating with the Live services and overall creativity.

Who were the teams?

In the order that they presented their challenges:

 
Telligent – The guys that produced Community Server and they’ve recently started up a real design practice. They obviously have great experience in web applications, social media but I hadn’t seen a ton of their design work outside of their templates for Community Server. I have always liked their templates that are on top of Community Server – in fact, I’m really hoping that they will leverage that same experience to design some templates for Sharepoint too.

Frog – The largest and most established firm in the competition and clearly the favorites. These guys being involved proved interesting because many of the other firms were composed of graduates of Frog and it really raised the level of competition. 

Projekt202 – Young and hungry firm. I had the least amount of interaction with these guys but they were fantastic.

Poplabs – These guys are are media experts that really brought a different perspective to the table. It was unfortunate that they were plagued by hardware problems. It didn’t help that this was the first of these type of challenges that they had been in. They had some great ideas.

Thirteen23 – The firm that was at MIX and build the application called mixME in 8 hours with many of the same team members. Check it out, it’s a fantastic showcase. I knew that they were going to bring their “A” game and had high hopes for them.

Neudesic – I heard about this firm literally last week when I found out that Sam Gentile had joined them to help them run their connected systems practice. But I didn’t know that they had a design practice, in fact a lot of people didn’t know that as they started their design wing 6 months ago.

How did I help?

Phil Wheat and I were onsite during the entire build process for the teams as technical resources to make sure that the technology was not the blocking issue. We had a number of interesting questions that were tossed out over the 2.5 days that ranged from relatively basic (Very few of these) to “holy cow, what am I a ninja?” hard technical questions. The best ones were the ones where they were butting up against the technical limitations of the technologies involved. My favorite question was one where they were trying to dynamically set the ZIndex of a control. We scratched our head over this one for a while. I called in favors from a number of guys ranging from Scott Barnes to Jeff Blankenburg who looked at the code remotely and scratched their heads over it as well. It looked right and it wasn’t throwing an exception but it wasn’t doing the right thing.

            this.SetValue<double>(Canvas.ZIndexProperty, ZIndex);

The issue, as one of the contestants from another team figured out and revealed in an true spirit of sportsmanship, the issue was that it needed to be setting an int rather than a double.

            this.SetValue<int>(Canvas.ZIndexProperty, ZIndex);

I thought that this was wild and broken that it doesn’t throw an exception when you pass in the wrong type like that.

There were other questions like how to do a particular type of animation. When doing logic, XAML and the like – I knew how to help with most of those. I had an issue, however, when they started getting fancy with the animations, like trying to use Ease Splines. In that case, I had to call in the expert help of the editor for Phizzpop, Don Burnett. At one point, I had Don on speaker phone and watching what we were doing with LiveMeeting and giving us direction. That was cool and I learned an amazing amount. Don helped a ton throughout the couple of days.

How’d the build go?

All 6 teams brought fantastic ideas to the table. There were obvious ideas that all of the teams centered around with integration into current social media like Twitter, Flickr and FaceBook. I was really impressed by some of the originality shown by some of these ideas like Neudesic allowing Facebook members to share movies with their other friends. Several of the firms had the idea to bring in time-lined comments from Twitter.

The different firms displayed different ways of working. I actually didn’t even see Frog or Projekt202 until the night of the challenge as they just worked out their home office. They were allowed to ask their other team members for ideas on the design but not for help with the implementation. I saw Thirteen23 on the first day as we had a number of assets that they were allowed to use, like videos and images from Microcinema that they needed to copy. This was really the only downside of the whole experience. I would have loved to have seen the process that these fantastic design firms used. I did get to watch several of the firms.

Neudesic actually worked out of the room that I was hanging out at to be available the entire time. They had three team members, two devs and a pure designer. It was great to watch how cohesive they worked together. For the 2.5 day build, they set up a team site and source control. They almost did TDD, Continuous Integration and everything but they quickly realized that they were not going to be maintaining this code beyond Friday because whatever they build would be considered a prototype and would be tossed if they ever went forward with it. They sat down and started hammering out a design and as soon as they identified components that they were sure that they were going to need, one of their team started building those. The others kept on until they knew the services that they needed and the other dev started on those. The designer started creating assets and they started sticking those assets on the components and then stared wiring those components up to services. It was fabulous to watch. They had, hands down, the most completely implemented and least vaporware solution that was presented. However, it was a design contest and their design was good but it wasn’t the best. I, personally, have a tremendous amount of respect for the Neudesic team and feel comfortable recommending them as the UI team for anyone. The questions that they asked were definitely cutting edge and showed they were pushing the technologies (Silverlight 2.0, WCF and so on) to the limit. The only one that they were really stumped on was a cross domain issue where they were calling services on a different domain which is not allowed in the current release. It’s coming, but not hear yet.

I also got to see Telligent a few times when they came in to ask questions and get a change of scenery from their hotel room that they were working out of. The questions that they were asking were where they were pushing the limits of Silverlight and they just needed clarification on where the boundaries were.

I spend most of my time with Poplabs. As I said, they had a lot of hardware issues. They had two machines, a mac and a dell, just die on them. They had issues with installation of the software needed onto a third box. And so on and so forth. They finally really got to the implementation on Friday morning. At 4:00, they realized that what they had was really not going to get the job done. Toya D., their designer/dev, took her box off to the venue and sat down to start over from scratch. In 3 hours, she threw together a fantastic working demo that was at least as much of a working demo as some of the other teams. Her team mates sat down and started working on a slideshow for the judges to show the rest of their idea that wasn’t going to be completed. It turned out that all of the teams, besides Neudesic, had this type of an presentation – some implementation and a lot of presentation. I was really impressed with her skills from a design and implementation perspective – especially given that she really cranked out the final product in about 3 hours.

How was the Party?

For the presentation portion of the contest, Chris threw a heck of a party at J Black’s. First of all, the food and drink was fantastic. There were 3 HD projectors showing off the fantastic designs that every came up with. There was a DJ with a pretty cool rig. It was an Ion IDJ iPOD DJ Mixer. He had two iPod’s hooked up with all of his music and did the whole party from there.

The official program started with presentation from Steven P. Anderson about what designers are and what they do. He really did a fantastic job of setting the stage and helping the audience, not all of whom were familiar with the practice of design, understand the underpinnings behind the competition.

Then Chris introduced the judges:

Erica O’Grady – Social media consultant, designer/developer in her own right, creativity coach and all round fun gal to hang out with.
Norm Cox – Design legend. Started with Xerox and has run his own firm since 1982.
Todd Wilkins – Design Researcher with Adaptive Path. He was a last minute serendipity. One of the judges had recused themselves as they personally knew the members on one of the teams and out of the blue Chris found out that Todd had just, and by just I mean on the same day as the competition, moved to Austin from San Francisco.

Then Chris introduced the design problem and we got started showing the final products in the order above. There were a few gut check type technical problems, like one of the teams not having a Firewire cable with them and their entire solution on their external drive that they couldn’t access without one. Fortunately, we found a USB 2.0 and a Firewire cable for them to try. Other than minor issues like that, all of the presentations went well.

What was the result?

The three judges all came out and said flattering things about all of the teams. In fact they said that none of the judges completely agreed on the top 3 and that every firm was in at least one of the judges top 3. That’s an impressive fact and really goes to show that all of the teams did a great job.

However, only one team can win. In something of an upset, Thirteen23 came out on top over the top of the some of the larger firms. They brought together design, function and implementation not only with the expected technologies but in their spare time they threw up a live service and invited all of the contestants to hit it with their iPhones to watch a movie as well. It was really impressive. They are supposed to work with Chris this week to get their implementation posted to the Phizzpop gallery and I’m sure that they will show it off in their labs as soon as they get done celebrating their awesome victory.

Who’s going to the finals?

AQKA, San Francisco Winner
Create the Group, New York Winner
Clarity Consulting, Chicago Winner
Cynergy Systems, Los Angeles Winner
Outright Interactive, Boston Winner
Thirteen23, Austin Winner

Wanna keep up?

First, check out Chris Bernard‘s blog as he’s posting a  lot of the follow-up information there.

Second, go out to Phizzpop and register a profile to get notifications for the upcoming challenge and other great events that are popping up around the nation.

Last, if you possibly can you should register and attend SXSW to watch the big showdown in person.