It takes a lot of software to smoothly run a web agency. When Station Four started in 2007 we primarily leveraged cheap or free versions of a number of the 37 Signal apps such as Basecamp, Highrise, and Backpack. Over the years we’ve adapted as we’ve grown, all the while knowing that a number of the systems we were using were merely stop-gap measures.
Currently we still rely heavily on Basecamp though we’ve long outgrown it. Since 2008 we’ve been on a pretty regular cycle of a) getting frustrated with the limitations of Basecamp, b) evaluating alternatives, c) hating the alternatives, d) deciding to build out our own software to manage our process, e) realizing this isn’t going to happen overnight, and then f) resigning ourselves to keep using Basecamp ‘temporarily’.
In the last 9 months we’ve grown from two to five people, seen our workload increase exponentially, and also seen an increase in project complexity – the days of using Basecamp as our primary PM tool are nearing an end as a matter of necessity.
In this post I examine the project management software ecosystem and discuss what Station Four currently uses. I plan on following this post up with a description of the new system as we begin to put it in place.
Below is the way I conceptualize how the various pieces work together:
Each bit of functionality doesn’t necessarily require its own standalone piece of software – most project management web apps purport, to varying degrees, to offer much of the functionality referenced above.
Overview of Functionality
Contact Management
Centralized place to store contact information. Usually this is part of your traditional CRM software, however team members that have nothing to do with sales still need to access this information so I keep this separate from sales and marketing. 37 Signal’s Highrise is more akin to a contact management app than a proper CRM.
Currently Using: Good question. We’ve used Highrise and vTiger (a SugarCRM variant) neither with much success. Beyond a contact manager Highrise’s features are basic and not worth the $50/month to fully take advantage of them. vTiger is a free open-source and boasts a decent feature set based off SugarCRM. However, even with some customization and tweaking, the interface is cluttered, feeling slow and unresponsive and just isn’t fun to work with. If something’s not easy to use, it’s difficult to maintain. In reality our contacts are scattered between Highrise, vTiger, email, and scraps of paper blowing around the office. This is something that needs to be remedied.
Sales Management
System to track leads, prospects, and new business. Can send follow up reminders and run sales reports. Core functionality of most CRM’s like Sugar CRM, ACT, and Sales Force. Dependent upon Contact Management functionality.
Currently Using: vTiger. Highrise is too basic for our purposes. vTiger has the functionality we want – tracking leads from contact to contract – but is a pain to use. Most CRMs have too much functionality – marketing campaign tracking, email marketing, inventory control, invoicing, etc – and have cluttered interfaces as a result.
Client Portal
Allows clients to monitor project status and upload files and serves as a hub for project-level communication. Some project management apps do this well. Basecamp is great for this; ActiveCollab is not as great though it tries. Some of the more serious PM tools don’t really include 'client portal' functionality.
Currently Using: Basecamp. This is one thing that Basecamp does pretty damn well. Clients tend to figure it out on their own. The biggest area for improvement is how files are handled. The file area tends to become a mess on big projects with lots of files. Ideally we’d like the file system to tie in with our file server, technically possible via FTP but I’m not holding my breath. Other small annoyances: files attached via email in replies to messages are ignored, some meaningless email attachments show up in the file section, and writeboards can be a pain to use.
Project Management
Area to view organizational-level information on projects, budgets, milestones, and resource availability. Most project management web applications do this. See Basecamp, AceProject, ActiveCollab.
Currently Using: Basecamp. At a basic level, I need to see what needs to get done by when and match that with the availability and schedules of my employees. Basecamp is decent for viewing milestones and dates but is awful for managing resource allocation. I might know that a design composition is due in a few days but I don’t know how much time has been allocated to it or used by the employee who is responsible for it. My solution? A lot of “Hey, don’t forget do this by Thursday”. This is not the most efficient approach and things can slip through the cracks.
Team Management and Collaboration
Allows for a team member to see assigned tasks, estimated budget, and upcoming due dates and milestones. Also enables team members to communicate questions and status to the rest of the team, and interact with time tracking in a centralized location. Allows managers to assign and prioritize tasks and monitor what everyone is working on.
Currently Using: Basecamp + yelling. Up until recently the entire team was working in the same room, which made verbal status updates a lot easier. As we’re growing I’m finding myself constantly wandering out of my office to make sure everyone is on track. Basecamp and gCal are good for seeing upcoming deadlines but for now, task management is very manual and verbally communicated.
Bug Tracking
Largely for use in QA. Allows for specific problems to be listed, assigned, tracked. Should be integrated with team member’s other tasks.
Currently using: osTicket or Excel. In terms of proper bug tracking, we aren’t using anything other than the occasional spreadsheet put together in QA. In some cases we’ll use our support ticket system, osTicket, but it’s not very efficient for dealing with a lot of minor issues/errors (i.e. bugs).
Support Ticket Management (not pictured)
Similar to Bug Tracking however Support Tickets come in from existing clients, usually for maintenance. Might result in one or more entries in the bug tracking system.
Currently using: osTicket. Conveniently set so clients can email support@stationfour.com and create a ticket, beyond that it’s a pain in the ass. The UI is weak and tickets assigned here are outside of our contact management and project management systems.
Time Tracking
Users review and input time cards. Admins can run reports across numerous dimensions. Time is entered/stored in a manner that allows for easy billing and invoicing.
Currently using: DbNetTime. Obviously put together by a developer. Lots of features, pain in the ass to use. Users enter in time on a cost center/project/task basis and can enter notes for each entry, which is great if a client ever questions an invoice. We use this for pure time tracking; the software doesn’t hold estimates or show task percentage completed.
Accounting/Invoicing
Straightforward (probably because I don’t maintain this), place where all money coming in and going out gets recorded and reports can be run on profit, expenses, etc. Invoicing functionality doesn’t have to be integrated with the accounting aspects, of course, but it is in our case. Invoices can be generated from hourly work or from reaching milestones in projects.
Currently Using: Quickbooks. Since I don’t manage sending out invoices I don’t have a lot to say here other than Quickbooks obviously doesn’t integrate with any of our other systems (contact management, time tracking). I don’t see any reason to move away from Quickbooks for accounting though I’m open to moving invoice functionality to an integrated time tracking application like HarvestApp, but I’d have to be convinced that there was an advantage in doing so.
Moving Forward
With this inventory completed I am working on defining the criteria by which to judge a new system and then will begin to evaluate them. I plan on having a new system selected by the week. Open to any advice or experience people have with these tools.
By Chris Lahey
Tuesday, March 16, 2010
|
We are so happy to announce that we have come out on top of the 2010 Phizzpop design challenge! Check out the PRWeb release.
There was some great competition and it was an amazing honor to be in the spotlight with Bradley & Montgomery and Metia. They both produced some strong work and really gave us a run for our money.
This entire experience was an epic opportunity for us and we are proud to put Jacksonville on the map.
We would like to extend a special thank you to all of you who have supported us, our families, friends, and most of all to our clients, who's projects got put on hold because of this competition. We would never be here had you not given us the chance to prove ourselves.
So, thank you and stay tuned for more great things from Station Four!
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.