Station Four, Inc. has been selected as one of three finalists for the Microsoft PhizzPop Design Challenge, a national competition that pits design-agency Davids and Goaliths against one another. Some of the best agencies from around the country submitted proposals for redesigning the web presence for the Boys and Girls Club of America. The team that worked on the entry for Station Four, Christopher Olberding, Christopher Lahey, and MacRae Grossman, will present their proposal in front of a live audience and a panel of esteemed judges at the Mix’10 Conference at the Mandalay Bay Resort and Casino in Las Vegas on March 15th, 2010.
Christopher Olberding, Station Four’s Creative Director, said “Being selected as a finalist is an honor and an amazing opportunity. It gives us the chance to showcase some of the great work that’s coming out of Station Four in terms of both web design and overall strategic planning capabilities for meshing software development and social media marketing.“
This year’s PhizzPop Design Challenge asked agencies to create the best web design solution for the Boys & Girls Club of America including strategic planning, web design compositions, and innovative uses of Microsoft technologies including the Microsoft Web Framework and Silverlight.
The Championship Round will be held at the Mix’10 conference in Las Vegas, Nevada on Monday, March 15th and will end with one of the three finalist taking home $50,000 and a trip to New York City for the 14th Annual Webby Awards Gala on June 14th, 2010.
The judges for the Championship Round of the PhizzPop Design Challenge are Chris Colborn, Chief Experience Officer, EVP; Lori McLemore, Director, Marketing & Web Strategy, Boys and Girls Club of America; David Pescovitz, Co-Editor, BoingBoing; Nicolas Roope, Co-Founder, Poke; Bill Buxton, Principal Researcher, Microsoft Research; and Jaime Endreny, Executive Director, Center for Architecture Foundation.
By Chris Olberding
Tuesday, September 15, 2009
|
Station Four is growing. We're currently looking to bring in two people over the next couple weeks - a graphic designer and a web design/production intern. Our primary goal is to expand our capacity (so many projects, so little time). Second, we're looking for someone who wont just allow us to process more work, but can add something to the company. The job descriptions are intentionally vague - you bring the raw talent, we'll teach the rest.
Please contact through via email (info@stationfour.com). Only applicants who provide a portfolio will be considered (digital/pdf is okay).
Designer (Print & Web)
Primary responsibilities:
- Develop web design compositions in Photoshop from provided wireframes/layouts.
- Work with clients on print design and branding/logo projects.
- Work on internal documents, print materials, and presentations.
Requirements:
- A great eye for design, must have at least one web design under their belt that demonstrates talent
- Experience in managing print projects
- Ability to work in a team and to communicate clearly
- Discuss design in a professional and analytic manner
It would be nice:
- Background with illustration
- Comfortable in a PC environment
- Basic knowledge of HTML/CSS and web standards
- Interested in learning more about web and user-experience design
Web Design Intern
Primary responsibilities:
- Create design prototypes, including graphic design, site navigation, and layout of content for client websites and internal projects
- Ensure that the layout of the content is accessible and logical; recommend improvements if necessary.
- Create visual concepts that match the content and the image wanted by the clients
- Build websites using HTML/CSS according to web standards in the ASP.NET development framework.
- Perform maintenance and updates to existing websites when requested by clients.
- Perform research and preparation of blog posts on various topics.
- Work on internal documents, print materials, presentations.
Requirements:
- Experience in web design producing table-less, XHTML, standards-compliant cross browser, and gracefully-degrading code
- Advanced knowledge of XHTML, CSS, and of digital imaging and illustration with Adobe Photoshop and Illustrator, formal training is an asset.
- Comfortable in a PC environment
- Very good spoken and written English
- Ability to work in a team and to communicate in a clear way
- Experience with print design a plus.
Intern will learn about:
- Managing web design projects and client expectations
- HTML/CSS best practices
- Working in ASP.NET as a designer
Experience or familiarity with ASP.NET is not a requirement.
By Chris Olberding
Thursday, October 30, 2008
|
Recently I was asked by a university student studying web design if they could interview me as part of a class project. I agreed, however I was too busy for a phone interview so I ended up responding in length to a set of questions in writing. I believe a much of what I wrote would be applicable to all design students interested in web design so I'm posting my interview here.
More...
By Chris Olberding
Wednesday, December 12, 2007
|
Over the years I’ve come to adopt many practices while working with xhtml/css and I thought it might be of use to others to document some of them and of use to me to open things up for dicussion. Some of these deserve their own post (one day!), some may be blindingly obvious to the initiated while others may make you scratch your head if you dont work with a certain framework (see “CSS and ASP.net”). Please, add any of your practices to the list. Cheers.
CSS Frameworks vs. CSS Resets
While there is a huge debate as to the value of CSS frameworks such as Blueprint and Yaml there does seem to be a good deal of agreement that CSS resets such as Yahoo’s or Eric Meyer’s Reset Reloaded () are of value.
Switching to a framework myself for a few projects did cause some growing pains but likely saved some time in styling forms and some basic typography, and it provided a print style sheet that was adequate. Regardless, over time I’ve ended up significantly modifying all of them to suit my needs.
I wouldn’t recommend frameworks for new developers as it may gloss over some issues that you should know your way around, or even experienced developers as you’re probably better off writing your own set of base rules to modify on a per project basis. However, I do believe there is a group somewhere between the two that would find great utility and I applaud the idea behind frameworks despite doubting the likely ultimate outcome. However my workflow does not require a grid module within the browser (use them during design) so that functionality seen in most frameworks may be of use to others depending on how they work.
Some of the principle discussions come from Gary Barber, Johnathan Christopher and Jeff Croft
Organization vs. Speed
The proper architecture of CSS is a much discussed subject that I do not believe has been as properly and passionately debated as I believe maybe it should. The neat-freak in us desires parcelized stylesheets, imported into a master stylesheet directly linked from the html file. Whereas the speed-freak knows that site performance is negatively effected by each http requested by a page. At the same time CSS optimizers abound to cut our 5k stylesheets into 3k stylesheets by removing whitespace and comments.
What is lacking is a tool to easily and automatically process ‘development CSS’ to ‘production CSS’. I don’t savor the idea of working on one single, uncommented CSS but I also don’t want to have to merge 10 stylesheets into one and then run that through a CSS optimizer when I just need to make a minor change. It would be interesting to develop an application to ‘compile’ your CSS server side.
CSS and ASP.Net
Though a more complete treatment is forthcoming I will make a few notes now.
I moved to the asp.net platform about a year ago because I got a job at a web development firm that used the framework exclusively. I don’t have a background in web development, I can muddle through with some limited SQL and C# skills but I’m not about to put together a multi-tiered e-commerce site myself anytime soon. However from a designer/coder standpoint, the flexibility and reduction in redundant code in using a combinations of master pages (uber-templates), themes, and user-controls (uber-server-side-includes) is awesome. As noted, this is a large subject unto itself and will be addressed at a later date but I am open to comment from others on the platform.
Body Tag
Many developers have advocated the use of adding classes to the body tag to allow for easy targeting of different subpages and subsections. This looks great and I wish I had thought of this before I started working in asp.net however given the ability to accomplish the same thing and more without mucking up our client-side code using the body tag to differentiate sections of a site is somewhat obviated for my purposed but pretty smart if you’re not using a development platform such as asp.net.
Microformats
They're a good idea in theory, and if you’re bored and want to ‘do more’ for a site go ahead and use them but if we’re talking about paid work, I’d adopt a wait and see approach to see if microformats evolve beyond the geek-club of web designers.
Abstracting Constructs
This topic is something that I’ve not seen really explored in the wild, nor is it something I've completely fleshed out. However I’ve gotten frustrated with creating CSS constructs such as a certain type of navigation menu or expanding box from scratch over and over again. I’d like to take the concept of functions or methods from traditional programming and abstract out some concepts so that you could “call a CSS function” by just adding a few lines of code specific to the menu such as button width/height, background URL, hover URL, etc which would overwrite the relavent styles and customize the abstracted contruct.
ID vs. Class
Very quick: IDs are unique sections or areas (i.e. <div id="”globalNavigation”">
) whereas classes can be assigned to many things and things can have many classes . In the previous example the div would have three completely separate classes assigned.
Firefox and the Vertical Scrollbar
A quick tip I have found useful is forcing Mozilla to always have veritcle scroll bars present even if the page doesn’t scroll. This is the default behavior in Internet Explorer. The reason for this is that if one page is pretty short and a vertical scroll bar doesn’t appear, when a user clicks on a link to a longer page the scroll bar will ‘pop-up’ and shift your site over to make room for it. This effect can make people who don’t understand what happened think you site is broken (I know I know, trust me on this).
Force the scrollbar to always be visible by adding "html { overflow: -moz-scrollbars-vertical !important; }" to your CSS, be warned that it wont validate.
Farewell
That’s all for now, let me know some of your ideas on writing CSS.
By Chris Olberding
Wednesday, December 12, 2007
|
Over the years I’ve come to adopt many practices while working with xhtml/css and I thought it might be of use to others to document some of them and of use to me to open things up for dicussion. Some of these deserve their own post (one day!), some may be blindingly obvious to the initiated while others may make you scratch your head if you dont work with a certain framework (see “CSS and ASP.net”). Please, add any of your practices to the list. Cheers.
CSS Frameworks vs. CSS Resets
While there is a huge debate as to the value of CSS frameworks such as Blueprint and Yaml there does seem to be a good deal of agreement that CSS resets such as Yahoo’s or Eric Meyer’s Reset Reloaded () are of value.
Switching to a framework myself for a few projects did cause some growing pains but likely saved some time in styling forms and some basic typography, and it provided a print style sheet that was adequate. Regardless, over time I’ve ended up significantly modifying all of them to suit my needs.
I wouldn’t recommend frameworks for new developers as it may gloss over some issues that you should know your way around, or even experienced developers as you’re probably better off writing your own set of base rules to modify on a per project basis. However, I do believe there is a group somewhere between the two that would find great utility and I applaud the idea behind frameworks despite doubting the likely ultimate outcome. However my workflow does not require a grid module within the browser (use them during design) so that functionality seen in most frameworks may be of use to others depending on how they work.
Some of the principle discussions come from Gary Barber, Johnathan Christopher and Jeff Croft
Organization vs. Speed
The proper architecture of CSS is a much discussed subject that I do not believe has been as properly and passionately debated as I believe maybe it should. The neat-freak in us desires parcelized stylesheets, imported into a master stylesheet directly linked from the html file. Whereas the speed-freak knows that site performance is negatively effected by each http requested by a page. At the same time CSS optimizers abound to cut our 5k stylesheets into 3k stylesheets by removing whitespace and comments.
What is lacking is a tool to easily and automatically process ‘development CSS’ to ‘production CSS’. I don’t savor the idea of working on one single, uncommented CSS but I also don’t want to have to merge 10 stylesheets into one and then run that through a CSS optimizer when I just need to make a minor change. It would be interesting to develop an application to ‘compile’ your CSS server side.
CSS and ASP.Net
Though a more complete treatment is forthcoming I will make a few notes now.
I moved to the asp.net platform about a year ago because I got a job at a web development firm that used the framework exclusively. I don’t have a background in web development, I can muddle through with some limited SQL and C# skills but I’m not about to put together a multi-tiered e-commerce site myself anytime soon. However from a designer/coder standpoint, the flexibility and reduction in redundant code in using a combinations of master pages (uber-templates), themes, and user-controls (uber-server-side-includes) is awesome. As noted, this is a large subject unto itself and will be addressed at a later date but I am open to comment from others on the platform.
Body Tag
Many developers have advocated the use of adding classes to the body tag to allow for easy targeting of different subpages and subsections. This looks great and I wish I had thought of this before I started working in asp.net however given the ability to accomplish the same thing and more without mucking up our client-side code using the body tag to differentiate sections of a site is somewhat obviated for my purposed but pretty smart if you’re not using a development platform such as asp.net.
Microformats
They're a good idea in theory, and if you’re bored and want to ‘do more’ for a site go ahead and use them but if we’re talking about paid work, I’d adopt a wait and see approach to see if microformats evolve beyond the geek-club of web designers.
Abstracting Constructs
This topic is something that I’ve not seen really explored in the wild, nor is it something I've completely fleshed out. However I’ve gotten frustrated with creating CSS constructs such as a certain type of navigation menu or expanding box from scratch over and over again. I’d like to take the concept of functions or methods from traditional programming and abstract out some concepts so that you could “call a CSS function” by just adding a few lines of code specific to the menu such as button width/height, background URL, hover URL, etc which would overwrite the relavent styles and customize the abstracted contruct.
ID vs. Class
Very quick: IDs are unique sections or areas (i.e. <div id="”globalNavigation”">
) whereas classes can be assigned to many things and things can have many classes . In the previous example the div would have three completely separate classes assigned.
Firefox and the Vertical Scrollbar
A quick tip I have found useful is forcing Mozilla to always have veritcle scroll bars present even if the page doesn’t scroll. This is the default behavior in Internet Explorer. The reason for this is that if one page is pretty short and a vertical scroll bar doesn’t appear, when a user clicks on a link to a longer page the scroll bar will ‘pop-up’ and shift your site over to make room for it. This effect can make people who don’t understand what happened think you site is broken (I know I know, trust me on this).
Force the scrollbar to always be visible by adding "html { overflow: -moz-scrollbars-vertical !important; }" to your CSS, be warned that it wont validate.
Farewell
That’s all for now, let me know some of your ideas on writing CSS.
By Chris Olberding
Wednesday, December 05, 2007
|
As is often the case, the task of creating or redesigning a website is broken into logical tasks and distributed among a team comprised of people coming from very different backgrounds and possessing very different skillsets. In this article we examine some of the issues and considerations that can help and hinder collaboration between the designer and the developer.
In this article we are examining what designers can do to make life easier for both themselves and the people they hand their mockups over to?
The Web Designer to CSS Coder Handoff
Communication
As will be apparent throughout this article, communication is at the root of most problems and also of most solutions.
Grid / Alignment
I recommend designers work with grids and designing layouts to pixel perfection and making sure that column widths are consistent and thought out before pushed into production; it is unrealistic for the coded to go back and recalculate widths and heights and make the needed alterations to the design after the fact. There are methods for addressing browser incompatibilities and competent coders should be able to ensure your design displays consistently between browsers. There are a lot of good resources for using the grid in web design.
Organization
Make sure to organize your Photoshop layers. It’s best to do as you go but not everyone can get into this habit (author included). The bottom line is if anyone might need to open your .psd for any reason in the present or future the saved file should be organized. This practice is crucial if you’re handing off your .psd to someone else to slice but is a good practice for maintaining source files you can include on source disks for the client at the project’s competition.
Fonts
Make sure to communicate on the appropriate use of non-standard fonts. Depending on your emphasis on accessibility, search engine optimization, and familiarity with image replacement techniques you will have different approaches to when it’s acceptable to use a non-standard font. Regardless, your organizations philosophy on the subject should be in the open.
Gradients
Some types of gradients designers seems to use can be problematic and result in the need for overly complicated solutions in the code. One example is when you have a graduate going say left to right overlaying or masking another graduate going up and down. Though you can use png transparency or in some circumstances large images to accomplish the effect, the effort is usually not worth it and often results in extra, non-semantic code.
Expertise and Project Cost
Just because it’s possible to pretty much accomplish anything you can think of using CSS doesn’t mean that you or your coder can. Understand the level of expertise of your coder and also understand that highly intricate and complex CSS can be time consuming, keep an eye on your schedule and budget when designing.
Design for Web
The last point is the most important; know your medium! Web is not print and it is crucial to understand the medium and what makes it unique. Keep in mind the following points that many designers struggle with:
- Just because your 900x800 canvas in Photoshop has definite borders doesn’t mean you don’t have to think about what lays beyond them. Think through what would happen if you were to expand your canvas to 1100x1000, and always design the footer of the site.
- The home page isn’t the web site. A web design doesn’t consist of an amazing home page graphic. If the sub-page layouts haven’t been designed prior to working on the design make sure to take them into account in your designs.
- The design should serve the message. Make sure you understand what information and content will be on the site before boxing people down the line into a corner.
By Chris Olberding
Wednesday, December 05, 2007
|
As is often the case, the task of creating or redesigning a website is broken into logical tasks and distributed among a team comprised of people coming from very different backgrounds and possessing very different skillsets. In this article we examine some of the issues and considerations that can help and hinder collaboration between the designer and the developer.
In this article we are examining what designers can do to make life easier for both themselves and the people they hand their mockups over to?
The Web Designer to CSS Coder Handoff
Communication
As will be apparent throughout this article, communication is at the root of most problems and also of most solutions.
Grid / Alignment
I recommend designers work with grids and designing layouts to pixel perfection and making sure that column widths are consistent and thought out before pushed into production; it is unrealistic for the coded to go back and recalculate widths and heights and make the needed alterations to the design after the fact. There are methods for addressing browser incompatibilities and competent coders should be able to ensure your design displays consistently between browsers. There are a lot of good resources for using the grid in web design.
Organization
Make sure to organize your Photoshop layers. It’s best to do as you go but not everyone can get into this habit (author included). The bottom line is if anyone might need to open your .psd for any reason in the present or future the saved file should be organized. This practice is crucial if you’re handing off your .psd to someone else to slice but is a good practice for maintaining source files you can include on source disks for the client at the project’s competition.
Fonts
Make sure to communicate on the appropriate use of non-standard fonts. Depending on your emphasis on accessibility, search engine optimization, and familiarity with image replacement techniques you will have different approaches to when it’s acceptable to use a non-standard font. Regardless, your organizations philosophy on the subject should be in the open.
Gradients
Some types of gradients designers seems to use can be problematic and result in the need for overly complicated solutions in the code. One example is when you have a graduate going say left to right overlaying or masking another graduate going up and down. Though you can use png transparency or in some circumstances large images to accomplish the effect, the effort is usually not worth it and often results in extra, non-semantic code.
Expertise and Project Cost
Just because it’s possible to pretty much accomplish anything you can think of using CSS doesn’t mean that you or your coder can. Understand the level of expertise of your coder and also understand that highly intricate and complex CSS can be time consuming, keep an eye on your schedule and budget when designing.
Design for Web
The last point is the most important; know your medium! Web is not print and it is crucial to understand the medium and what makes it unique. Keep in mind the following points that many designers struggle with:
- Just because your 900x800 canvas in Photoshop has definite borders doesn’t mean you don’t have to think about what lays beyond them. Think through what would happen if you were to expand your canvas to 1100x1000, and always design the footer of the site.
- The home page isn’t the web site. A web design doesn’t consist of an amazing home page graphic. If the sub-page layouts haven’t been designed prior to working on the design make sure to take them into account in your designs.
- The design should serve the message. Make sure you understand what information and content will be on the site before boxing people down the line into a corner.
By Chris Olberding
Tuesday, November 27, 2007
|
1.0 Introduction
In my model I outline three forms of client interaction in the client/ designer-developer relationship each with implications on the pricing and contract structure employed. This model was developed from the realization that adhering to a single method of handling clients, structuring contracts, and managing scope would not be appropriate unless the size and type of clients and projects being handled were relatively homogenous. This is not usually the case at mid to small sized web development shops where you are often working on projects with budgets below $5,000 along side projects ten times as large. The model is based specifically on web development but could be abstracted out further to other types of design and software development projects
2.0 Principles of Client Interaction
Managing multiple modes of client interaction concurrently, as opposed to funneling all clients through the same structure, adds a layer of complexity to the department’s process and creates certain knowledge requirements to key members of the staff.
2.1 Transparency
The different modes should not be known and understood solely by developer. They should be discussed and presented to the potential client and the client should have some say as to which mode is most appropriate for their project.
2.2 Defined Responsibility
Different modes of interaction result in different patterns of accountability and responsibility in respect to deliverables and deadlines. This needs to be understood by both staff and client and clearly discussed, defined, and documented prior to instituting the recommendations of this document.
2.3 Adhered Responsibility
Not only is it crucial that responsibility be defined but the responsibilities outlined prior to project start must be strictly adhered to and enforced by the developer. Because of this it is crucial that the client understands their responsibilities and the timeline and pecuniary implications of not meeting those responsibilities prior to contract signing. Additionally the developer should work through and document likely problem scenarios and how to best handle them before implementation of this document.
2.4 Production Staff Education
Different modes of client interaction have significant implications for how a member of the production staff will approach a project. If we are following the lead of a client on an hourly basis going beyond the scope of the assignment to investigate and suggest improvements to aspects of the project may not be appropriate whereas in other mode it might. Therefore the production staff must fully understand and appreciate the differences between the modes and have full awareness of the status of the project at hand.
2.5 Sales Staff Education
Since it is the sale staff who should initially discuss our process and ultimately is responsible for writing, delivering, and managing the contract it is essential that they fully understand and can fluently discuss the implications of the different modes of interaction.
3.0 Three Modes of Client Interaction
Below I introduce the three modes, Designer, Client, and User-Centric. The names of the modes highlight the primary driving force behind the project.
3.1 Designer-Centric
In a designer-centric mode the designer and design-company are the primary drivers and decision makers in the development process. The client has limited, punctuated, and defined points of access where they can offer limited direction and feedback. The scope of changes that the client can make is strictly defined and any changes that fall outside of that scope are billed on an hourly basis.
3.2 Client-Centric
In a client-centric mode the client is primary to the process and the designer acts passively implementing the vision and ideas of the client. When the client asks for opinions and direction the designer may give some input but it is ultimately for the client to make decisions. In this mode the need to monitor scope is obviated by the deliver of estimates and not quotes.
3.3 User-Centric
User centric design is focused completely on the end user of the project whether that be a consumer looking to make an online purchase, an internal employee using a web application in the course of their work, or someone looking for a the phone number for a local company. This process involves significant research, many more processes and steps, possibly user testing, and typically the highest cost of the three modes.
4.0 Implications
There are a number of implications in how handling a project adhering to each of the three modes.
4.1 Designer Centric
The designer-centric mode is most suited for small projects; local companies who need a small site, limited web presence where most traffic will be generated through offline materials. The company is not strongly branded and the principals do not have strong feelings about the design of the site and are very cost conscious.
4.1.1 Contract Implications
Ideal for small local businesses with small budgets. The contract should be a firm quote and it should be contractually specified as to when and how the client may influence the project.
4.1.2 Process Implications
Because the resulting project is likely to have a simple structure and low budget, complex sitemapping and wireframing should be bypassed and a design comp should be the first step. The number of pages should be contractually specified and defined prior to project start. A simple content inventory should have firm deadlines and consequences to the client if these deadlines are not met. This would be idea for having a series of xhtml/css templates to provide the backbone for the design so that time is not wasted in browser compatibility testing or in fixing breaks.
4.2 Client Centric
The client centric mode is ideal for, ironically, clients who know exactly what they want and clients that have no idea what they want. The purpose of this mode is to allow the client to get exactly what they want without the ability to make the company take a loss due to their indecision. Clients that know exactly what they want and are adamant about their ‘vision’ can become problematic if they have difficulty communicating that vision or if the designer has difficulty implementing it. Clients that do not what they want often come up with good ideas during the process but are incapable of visualizing things prior to the beginning of development, this mode is designed to be able to accommodate that while not forcing the company to push out a poor quality product or put off features to ‘version 2’. The cost of a project in this mode is largely dependant on the client.
4.2.1 Contract Implications
The primary ‘innovation’ in the client centric approach is that contracts provide estimates and not quotes to the client and the entire project is billed on an hourly basis. Deadlines should be avoided. The client should have unfettered access to the project and unlimited opportunity for feedback. However it is in this mode that communication regarding hours used and how the process will operate are most important as to not damage the relationship with the client.
4.2.2 Process Implications
The process in this mode is completely open ended. We can introduce approaches and milestones used in other modes but it is ultimately the client’s decision. For example we can explain the purpose of a wireframe but the client might not think that it would be very helpful and have us just move to the comp. The goal here is to make sure the client is reassured that you are working hard and effectively on the project and not wasting their time and money.
4.3 User Centric
This mode is most appropriate for large clients that ‘get it’ or are open to allowing us to educate them about the value that we and this approach can provide. In a number of small business cases the benefit of a user-centric approach will not outweigh the development costs and this should be considered in employing this approach. We do not want to develop an amazing site that is appropriate and focused on the users if the target market and site traffic is so low that the site will not generate enough revenue to justify the difference in cost between this mode and a designer or client centric mode.
4.3.1 Contract Implications
Contracts will tend to be large, have many processes, points of interaction and contact with the client. With large projects it made make sense to have a small consultation contract just to set up the project. Because of the increased cost, longer deadlines, and more intense analysis it is absolutely critical that the client is educated about the value of this approach. If they are not, we will seem slow and expensive and by the time we provide value to the client (typically months after launch) the relationship may have already soured.
4.3.2 Process Implications
Due to the complexity and length of the contract there needs to be an owner of a project in this mode that understands and oversees all marketing, strategic, and usability analysis since all design, functionality, and coding decisions are based upon these higher level analyses.
5.0 Conclusions
Many web development firms use aspects of each of the three modes discussed. However many firms run into problems because these modes are not clearly differentiated and defined, their contracts to not reflect the mode or process, and they fail to inform their clients of the implications of their process, many of which do not know ‘the right way’ web development is supposed to proceed. This often results in the clients being confused and unhappy about the progress of their project and, as a consequence, the web development company is forced to take a loss on too many projects in order to maintain a healthy relationship with the client. Moving forward, the next step would be to have an open discussion with relevant staff and then set about a) producing educational materials for clients and for use by sales staff, b) hiring sales staff with the capabilities to understand and promote this process and c) developing documents needed for implantation such as contracts.
By Chris Olberding
Tuesday, November 27, 2007
|
1.0 Introduction
In my model I outline three forms of client interaction in the client/ designer-developer relationship each with implications on the pricing and contract structure employed. This model was developed from the realization that adhering to a single method of handling clients, structuring contracts, and managing scope would not be appropriate unless the size and type of clients and projects being handled were relatively homogenous. This is not usually the case at mid to small sized web development shops where you are often working on projects with budgets below $5,000 along side projects ten times as large. The model is based specifically on web development but could be abstracted out further to other types of design and software development projects
2.0 Principles of Client Interaction
Managing multiple modes of client interaction concurrently, as opposed to funneling all clients through the same structure, adds a layer of complexity to the department’s process and creates certain knowledge requirements to key members of the staff.
2.1 Transparency
The different modes should not be known and understood solely by developer. They should be discussed and presented to the potential client and the client should have some say as to which mode is most appropriate for their project.
2.2 Defined Responsibility
Different modes of interaction result in different patterns of accountability and responsibility in respect to deliverables and deadlines. This needs to be understood by both staff and client and clearly discussed, defined, and documented prior to instituting the recommendations of this document.
2.3 Adhered Responsibility
Not only is it crucial that responsibility be defined but the responsibilities outlined prior to project start must be strictly adhered to and enforced by the developer. Because of this it is crucial that the client understands their responsibilities and the timeline and pecuniary implications of not meeting those responsibilities prior to contract signing. Additionally the developer should work through and document likely problem scenarios and how to best handle them before implementation of this document.
2.4 Production Staff Education
Different modes of client interaction have significant implications for how a member of the production staff will approach a project. If we are following the lead of a client on an hourly basis going beyond the scope of the assignment to investigate and suggest improvements to aspects of the project may not be appropriate whereas in other mode it might. Therefore the production staff must fully understand and appreciate the differences between the modes and have full awareness of the status of the project at hand.
2.5 Sales Staff Education
Since it is the sale staff who should initially discuss our process and ultimately is responsible for writing, delivering, and managing the contract it is essential that they fully understand and can fluently discuss the implications of the different modes of interaction.
3.0 Three Modes of Client Interaction
Below I introduce the three modes, Designer, Client, and User-Centric. The names of the modes highlight the primary driving force behind the project.
3.1 Designer-Centric
In a designer-centric mode the designer and design-company are the primary drivers and decision makers in the development process. The client has limited, punctuated, and defined points of access where they can offer limited direction and feedback. The scope of changes that the client can make is strictly defined and any changes that fall outside of that scope are billed on an hourly basis.
3.2 Client-Centric
In a client-centric mode the client is primary to the process and the designer acts passively implementing the vision and ideas of the client. When the client asks for opinions and direction the designer may give some input but it is ultimately for the client to make decisions. In this mode the need to monitor scope is obviated by the deliver of estimates and not quotes.
3.3 User-Centric
User centric design is focused completely on the end user of the project whether that be a consumer looking to make an online purchase, an internal employee using a web application in the course of their work, or someone looking for a the phone number for a local company. This process involves significant research, many more processes and steps, possibly user testing, and typically the highest cost of the three modes.
4.0 Implications
There are a number of implications in how handling a project adhering to each of the three modes.
4.1 Designer Centric
The designer-centric mode is most suited for small projects; local companies who need a small site, limited web presence where most traffic will be generated through offline materials. The company is not strongly branded and the principals do not have strong feelings about the design of the site and are very cost conscious.
4.1.1 Contract Implications
Ideal for small local businesses with small budgets. The contract should be a firm quote and it should be contractually specified as to when and how the client may influence the project.
4.1.2 Process Implications
Because the resulting project is likely to have a simple structure and low budget, complex sitemapping and wireframing should be bypassed and a design comp should be the first step. The number of pages should be contractually specified and defined prior to project start. A simple content inventory should have firm deadlines and consequences to the client if these deadlines are not met. This would be idea for having a series of xhtml/css templates to provide the backbone for the design so that time is not wasted in browser compatibility testing or in fixing breaks.
4.2 Client Centric
The client centric mode is ideal for, ironically, clients who know exactly what they want and clients that have no idea what they want. The purpose of this mode is to allow the client to get exactly what they want without the ability to make the company take a loss due to their indecision. Clients that know exactly what they want and are adamant about their ‘vision’ can become problematic if they have difficulty communicating that vision or if the designer has difficulty implementing it. Clients that do not what they want often come up with good ideas during the process but are incapable of visualizing things prior to the beginning of development, this mode is designed to be able to accommodate that while not forcing the company to push out a poor quality product or put off features to ‘version 2’. The cost of a project in this mode is largely dependant on the client.
4.2.1 Contract Implications
The primary ‘innovation’ in the client centric approach is that contracts provide estimates and not quotes to the client and the entire project is billed on an hourly basis. Deadlines should be avoided. The client should have unfettered access to the project and unlimited opportunity for feedback. However it is in this mode that communication regarding hours used and how the process will operate are most important as to not damage the relationship with the client.
4.2.2 Process Implications
The process in this mode is completely open ended. We can introduce approaches and milestones used in other modes but it is ultimately the client’s decision. For example we can explain the purpose of a wireframe but the client might not think that it would be very helpful and have us just move to the comp. The goal here is to make sure the client is reassured that you are working hard and effectively on the project and not wasting their time and money.
4.3 User Centric
This mode is most appropriate for large clients that ‘get it’ or are open to allowing us to educate them about the value that we and this approach can provide. In a number of small business cases the benefit of a user-centric approach will not outweigh the development costs and this should be considered in employing this approach. We do not want to develop an amazing site that is appropriate and focused on the users if the target market and site traffic is so low that the site will not generate enough revenue to justify the difference in cost between this mode and a designer or client centric mode.
4.3.1 Contract Implications
Contracts will tend to be large, have many processes, points of interaction and contact with the client. With large projects it made make sense to have a small consultation contract just to set up the project. Because of the increased cost, longer deadlines, and more intense analysis it is absolutely critical that the client is educated about the value of this approach. If they are not, we will seem slow and expensive and by the time we provide value to the client (typically months after launch) the relationship may have already soured.
4.3.2 Process Implications
Due to the complexity and length of the contract there needs to be an owner of a project in this mode that understands and oversees all marketing, strategic, and usability analysis since all design, functionality, and coding decisions are based upon these higher level analyses.
5.0 Conclusions
Many web development firms use aspects of each of the three modes discussed. However many firms run into problems because these modes are not clearly differentiated and defined, their contracts to not reflect the mode or process, and they fail to inform their clients of the implications of their process, many of which do not know ‘the right way’ web development is supposed to proceed. This often results in the clients being confused and unhappy about the progress of their project and, as a consequence, the web development company is forced to take a loss on too many projects in order to maintain a healthy relationship with the client. Moving forward, the next step would be to have an open discussion with relevant staff and then set about a) producing educational materials for clients and for use by sales staff, b) hiring sales staff with the capabilities to understand and promote this process and c) developing documents needed for implantation such as contracts.