Our clients and development partners, Janeiro Digital, have just launched their new site. The site is built entirely on WordPress giving them amazing control over the content across all areas of the site. I really like the simplicity of the design and layout (thanks Kristy!). What makes this project interesting for both us and the client is that because of the flexibility of WordPress, and the associated plug-ins, we could create a full-enabled CMS driven site with a totally custom design in just a few short weeks.

There are a few golden rules to creating a successful social network around your business, product or movement. Using a collection of best practice ideas and success stories, including the Obama Presidential and Zappo’s campaign strategies, I have created a list of activities and ideas that will drive the creation and ongoing growth of your social network. Here are the key elements.

1. If you are trying to reach a consumer audience then building big databases of customers is essential. Big doesn’t always mean better and it’s easy to get distracted by the numbers. Quality of the group is essential too.
2. Know everything about your audience. Ask them to share their ideas, feelings, doubts, suggestions and comments on the things that you do. Sites like QuickSprout, Signal vs Noise and Mint.com are great at starting conversations that leave a trail of new ideas and insights for the blog or network owners.
3. Connect online and offline events as if they belonged to the same network. Having only an online presence is not enough. You need to link the virtual networks with the real networks and bring those worlds together in any way you can.
4. Build channels to capture data everywhere. Twitter is a great example of a ‘listening tool’ that helps you gather information on your audiences activities. Facebook and FriendFeed are other good ways to listen in on your audience and even start new discussions.
5. Within every network, virtual and real, are activists, evangelists and mavens. Identify them, communicate with them if possible and figure out how to inspire and excite them.
6. Connect the members together in as many ways as possible. In smaller networks create opportunities for the members to communicate and meet face-to-face. In larger networks give them ways to organize themselves and find like-minded members. Organize events or small parties that help customers meet each other and strengthen bonds with your brand or movement.
7. It’s important to remember that there are already lots of membership groups. Find them and give them the tools to connect. Empower them in the places and spaces where they are already connected and spending time. In many cases you won’t need to create your own networks or groups.
8. Give them something to do by organizing activities and purpose for the groups. Don’t leave things to chance or they might become orientated around ideas and activities that don’t align with your positioning.

This is a great selection of graphics from the Information id Beautiful blog. It shows that Twitter posts are mostly crap but that like anything there is some value buried in there. The question is how do you access those good posts and avoid the insane ego trip garbage?

BMW have done it again. This time it’s with a car that changes it’s shape based on the driver’s whims. The car, which is built on a Z8 frame and covered in cloth, morphs in shape. This is clearly where car design is headed. Customizing your driving experience need not be limited to seat and steering adjustments. Great work.

From Wired Magazine: It’s stretched over an aluminum frame controlled by electric and hydraulic actuators that allow the owner to change the body shape. Want a big spoiler on the back? Wider fenders?  No problem. "The drastic reinterpretation of familiar functionality and structure means that drivers have a completely new experience when they handle their car," BMW says.

When put into list format, the differences between Application Development VS Rapid Prototyping are very stark:

Traditional Application Design:

•    Engineers and business development teams work on a bloated technical spec often 50-100 pages long that has very little value or meaning because it can’t be visually interpreted and doesn’t reflect the core experience of the product.
•    Programmers create an enormous database with little flexibility
•    Developers take months to put together choppy wireframes that will later drive the design/skinning process. As all designers know, programmers leading the design process is a dangerous idea.
•    Developers hand off template skinning duties to UI designers who have less flexibility than if they were starting from scratch and iterating on templates with the client.
•    Eventually the application launches and the design process feels like a quick & dirty effort to put "lipstick on the pig"

Rapid Prototyping Process:

•    A designer interprets the clients’ ideas for the product goals and user experience, shaving out features that don’t make a real impact and focusing on the core value
•    The designer begins working immediately on Photoshop/Illustrator comps of high level pages such as Home, Registration, Account Dashboard and a set of style rules for Forms, Data Tables and Wizards
•    One approval is reached, the designer begins coding out high level pages and linking them together in XHTML/CSS.
•    All template pages are fleshed out in XHTML and can be easily modified, removed, added to or iterated upon.
•    Different states can be developed to show errors, blank states, populated states, etc.
•    Designers hand off templates to the client who then gets developers to respond visually and experientially.
  
Though the design process and programming process is reversed, sometimes it can still take a while to develop the application given the HTML templates, but several key benefits of doing the design first include:

•    Ability to get programmers to understand exactly what they’re providing.
•    Ability to show investors or early stage clients exactly how the app will look and work to raise money while in development.
•    Ability to provide user testing to get feedback and make any major necessary changes to prototype.

Recently, we began a series of redesign discussions with SPEC Process Engineering in Burlington, MA. We’re thrilled to be working with them and have already learned quite a bit about an industry we otherwise knew nothing about. They essentially design & build large scale manufacturing plants, research laboratories and chemical engineering plants.

The most interesting aspect so far from our meetings with them is the realization that their industry has always operated in a tightly traditional way and that their process is dramatically different, causing some potential clients to raise eyebrows.

Instead of bidding separately for Architectural, Engineering and Building contracts, SPEC’s proprietary methodology allows them to handle the entire contract with their in-house employees from start to finish. This method allows them to be far leaner and more rapid than their competition. However, when we discussed this in greater detail, it became clear that the industry is so deeply entrenched in the way things have always been done that this aspect of their approach was at times a warning sign to potential clients.
However, when you weigh the costs and benefits, SPEC’s approach enables them to finish a project in 8 months that could easily take a series of various contracting firms 24-28 months. While an architect at SPEC is designing, they can order the parts they anticipate (and some of these parts can take 16 weeks minimum to arrive at a jobsite).

This made us think about how web applications and sites have historically been created. In our industry, the traditional method involved a long and complex technical spec that was often very difficult to interpret by the designers and programmers involved. For the last several years, we have seen many web application designers starting with the design first – a method that we like to call Rapid Prototyping. This not only makes the process easier to understand, but allows you to A: get feedback from potential users, B: raise capital by demonstrating an application to investors in its XHTML/CSS state, C: make changes much more easily and quickly than if the application had already been programmed and D: give the programmers a finite roadmap to work from.

Here’s to breaking with tradition and increasing efficiencies – in any industry!

To me, building web prototypes must be a lot like designing cars.

Step1: First you sketch out the basic layouts and place the essential functional elements in their ideal locations. We photograph these basic layouts which we sketch on a large whiteboard. The photos are shared with the design team and the client to ensure we have the basics right.

Step 2: If you like what you see you start to render the design in ways that brings additional value to the layout and enhances the features. We’re all familiar with car concept drawings like those of Chip Foose on the TLC television show "Overhaulin".

Step 3: Once the drawings or Photoshop designs are looking like the images you had in your mind all along the next step is to build a prototype. Car designers use clay to do this. Web designers code their designs into HTML/CSS. Customers, partners, investors and user experts can then get a sense of how this product will live in real space. By coding the design you allow target users to take the website or web application for a test drive.

From HTML/CSS to full prototype

Having created your template pages you can begin to build out the complete prototype. As for templates we start with the home page, a few primary pages and the registration or signup process (if there is one). If it’s a web application you are designing you’ll also want to design the critical functional areas e.g. dashboard, profile setup/edit and uploading files. Each project will be slightly different but you’ll notice patterns in all of them.

Building the web prototype

Try not to get too carried away with the details. If you are working with a copywriter then just add simple text fields, which can be updated later. I’m personally not a big fan of using lorem ipsum to fill in blank spaces. It tends to give the impression that you have to fill up all the empty spaces. Rather use actual text and have your copywriter update it either in parallel or after you are done with your designs.

The ideal place to be before your next review is to have the home page, registration pages, dashboard and your primary functional areas designed and linked together. Never show a client separate pages that have no relationship with each other if you can help it. By linking pages you can easily see what might need to be added or subtracted to enhance the user experience. In a recent case we were presented with an 8-page registration process. Using a prototype we were quickly able to reduce the steps to 2 pages.

Testing the user experience

Using this basic but more coherent prototype you can now begin with your first real test of the design. Keep the user testing simple by restricting it to 6 – 8 testers. All testers should be properly screened so that you are getting real potential customers/users to look through the site. Larger sample sizes are not necessarily better than testing a small selection of users. Once you reach 8 people you don’t significantly increase your confidence level (for the statistically minded).

Questions should be objective-orientated. By that we mean that, in general, questions should be considered from the point of view of achieving an objective. Give your users small goals, like “show me how you would buy the _____ item” or “please register for the _______ service”.

Testing is a whole other subject so I won’t go into it here. That’ll have to wait for another blog posting.

Building the actual site

Once your designs are approved you will be able to start building out the remaining pages. Because you have created a template in HTML/CSS this is a relatively simple design process. The hardest part of this step is making sure you are maintaining a solid user experience and not just adding pages for the sake of filling in the blanks.

I’ve had a few calls recently from bloggers and writers with requests to clearly define web prototype design. Broadly speaking, all product prototypes are living versions of the idea you have in your head. These tangible prototypes need not be perfect but should provide enough detail to be able to adequately test the idea.

Web prototyping or rapid web prototyping, as it’s sometimes called, is the process by which a web-based model of the end product is constructed for the purpose of outlining how a website or web application will look and behave. In the world of web prototypes the process of developing a prototype might be more important than the end product.

The web prototype, whether it’s on a whiteboard, paper and online is a test site that will include some content, all primary navigation and possibly images and key functional elements.

What a web prototype is not

In our experience we don’t think of a web application prototype as just a mini-site. If it’s a moneymaking application then it’s essential that the prototype be close enough to the end product that your business and revenue model assumptions can be tested. A few scraps of paper and some wireframes do not constitute a prototype. These things are however essential to the planning and development process.

How to plan your prototype

Even if you’re not particularly good at drawing the best place to start is with pen and paper. Sketch out the basic elements starting with the user experience in mind. Use basic usability questions to direct your thinking. What will the user see first? How will they know what we do? Where should we direct their attention? How will they register? There is a lot of debate about using personas or use cases to define the initial designs. Although in some complex applications we develop use cases we generally find there is only one primary persona for each successful design. If you have too many personas or use case you either need additional applications or you need to get some focus.

At this early stage less is more – only focus on the essentials. Do not be tempted to fill in all the gaps and fill up the space on the home or landing pages you are sketching. That level of detail will come later. Drawing out the site pages helps everyone involved to visualize what you are doing. Getting everyone on the same page, literally, is critical to understanding where the design will succeed and where it needs more help. In 90% of our designs the first sketches happen on the white board and are then transferred in more detail to paper or wireframes online.

Who should be involved in the prototype?

If you’re doing this for yourself then you may only need to include your business partner/s and a competent web designer. If you’re a design firm the clients core team and your core design team will be involved. Ideally you want the prototyping team to be as small as possible. Inviting more people doesn’t invite better input.

Once you have your prototype sketched out get feedback and sign-off so you don’t end up going in circles. This can be difficult if the client needs additional team members involved to get approvals. Try educating your clients that this process is not to secure approval on the aesthetics or functional elements but rather on the layout and navigation of the future site or app.

From sketch to actual web design

Although it can be useful to start testing your sketched designs with real users at this point we don’t recommend it. In the 200+ projects we have done using prototyping we have found it’s faster to get a more coherent design together before starting the testing. User testing is not expensive if you adopt the methodologies set out by Steve Krug so it shouldn’t matter either way.

To achieve the speed of execution our clients expect we move directly from sketches to Photoshop mock-ups. The client reviews these mock-ups and any changes required are made immediately. Because we publish the designs to the web via Basecamp, we find progress is only limited by the speed at which we can get feedback. In some case we’ll move from sketches to HTML/CSS immediately so we can make updates even faster. This can only be achieved if you have signoff on a template or you are working on an existing design template that doesn’t need to be updated.

I’m sure everyone reading this blog would agree that the user interface is one of the most important parts of any application. Without doubt the UI affects the customer experience more than any other element because it determines how easily you can get what you want from the website. As over a decade of living with the web has taught us, a web application with a poorly designed user interface has little value.

We’ve always preached that when creating a new web app starting with the user interface makes more sense than beginning with the data model. On one hand as traditional MVC (Model-View-Controller) frameworks have evolved there is more emphasis on the role of the UI (or View) elements. Unfortunately there is an entire generation of data experts and architects that don’t like this idea. We still here of businesses that decline to do any web prototyping before building their applications. I’m a little disappointed that there is still resistance to a UI or prototyping first approach. The advantages are enormous, especially for startups and new internal projects.

As we have noted before in previous posts about the advantages of web prototyping, prototyping can improve the quality of requirements and specifications provided to developers. User testing the prototype gets the potential bugs out the way so much sooner. The web prototype being tested by the user prevents many misunderstandings and miscommunications that might occur between the designers and developer. Changes to the data and application layers cost exponentially more to implement as they are detected later in development, the early determination of what the user really wants always results in faster and less expensive web apps. Because web prototyping requires user involvement and allows them to see and interact with a prototype allowing them to provide better and more complete feedback and specifications.