Design a Portfolio Website Part Two:

Project Management

Basecamp is a piece of project management software created by 37 Signals, it allows me to login to manage any of my projects from anywhere in the world with an Internet connected PC. It also allows my clients to login and check on their project progress, send a message, collaborate on a document (writeboard), upload files, make a to-do list or add a project milestone.

Design Process

When I get a new web project I add my new client, and add their project to Basecamp. This now means both parties can access one central hub of information. I usually write a quick introduction message to the client and email them informing them of their login details by email or phone, Obviously this type of system will not suit every client but my more tech savvy clients have taken to this system well.

To-do Lists

My design process consists of some linear phases; analysis, plan, build and test and I actually create a to-do list for each phase. A typical project will have four to-do lists and could look something like this:

Analysis

• Identify Business Goals
• Marketing Strategy
• Identify Unique Selling Point
• Gather Website Content
• Identify Users / Demographic

Plan

• Sitemap
• Siteframe
• Calls to Action
• Mood Board
• Graphical Mock Up
• Keyword Research

Build

• Database Setup
• CMS Installation
• Create CSS Layout
• Set up Navigation Structure
• Add Main Content
• Add Analytics

Test

• Valid XHTML
• Valid CSS
• Content Spelling
• Email Forms
• Web Browser Display
• Web Safe Images

I usually order my to-do lists and their items so that I can tick each completed task off and move onto the next project phase. This is where Basecamp really shines, it does one job really well, the to-do lists are fantastic.

At the end of each days work I send a message to the client through Basecamp informing them of project progress and informing them that they can check out the to-do lists if they wish to see how things are moving.

To-do list templates

Many web projects have a very similar method of work and this allows Basecamps to-do list templates to shine, you can create a template to be used for every project.

For instance, I have my basic analysis, plan, build and test to-do lists with some common tasks below them set up as a template, this way every project I start I have a basic designed structure to work from.

Assigning Tasks

I will often add tasks to to-do list that my clients must undertake, I can assign the client a task on the to-do list and assign a milestone, Basecamp will email the client to remind them I need this done to progress.

Writeboards

I usually create a Writeboard and record my findings for each task, for example in the analysis phase:

Analysis

• Identify Business Goals
• Marketing Strategy
• Identify Unique Selling Point
• Gather Website Content
• Identify Users / Demographic

I will add a writeboard called Business Goals, and record my findings, do remember this is shared with the client so from the very get-go if I am heading in the wrong direction or have mis understood a business goal the client can collaborate and make the correction.

Upload Documents

Basecamp allows all project parties to upload documents, I use this to my advantage in the planning stages of a web project:

Plan

• Sitemap
• Siteframe
• Calls to Action
• Mood Board
• Graphical Mock Up
• Keyword Research

I upload a siteframe and sitemap and send a message to the client to have a look over them, I’ll often ring the client up and explain my choices and run through the plans I have made, when creating a graphical mock up this is especially useful.

Basecamp Summary

Using Basecamp has really eased the task of running multiple projects at once and has also proved to be very easy to use for my clients. Having one central place for all messages, files , to-do lists and milestones that both parties can view anytime is a real bonus and one I recommend you should at least try.

I know theres a monthly charge and we all hate those, but for me it has changed my design process for the better and for my clients it brings real insight into what I am doing for their money and my progress with their projects.

Check out the Basecamp video tours

Phase 1: Strategy

I Listen carefully to you and ask questions to determine your specification, for example: what your business goals are and how the website fits in with your overall Marketing Strategy.

Who your users are and what they need to get done, what should users type into Google to find you, I clarify this with keyword research.

I identify brand principles, company style of communication, brand colors, logo, language etc.

Phase 2: Plan

From my fact finding in I create a few graphs and charts to record this data; sitemap to show web page layout, siteframe to show usability/calls to action, mood board and graphical mock up that represents your branding.

I ensure users goals are identified and their calls to actions planned out in the siteframe.

Using information architecture I map out your content for ease of navigation and usability and plan what technologies will be used in the project.

Phase 3: Build

A database is setup to store your data, a CMS so you can manage the website, programming languages and graphics create your custom theme, this is bolted into the CMS,.

Navigation structure is set up and content added with the correct keyword density.

Web forms and calls to action are added, analytics for your web stats and finishing touches like a favicon and email boxes. The validity of the programming languages, content code, special features and email forms all need to be tested for better performance , stability and robustness.

I test that your website displays correctly across a myriad of web browsers and that images are web safe.

Phase 4: Promote

In depth keyword research and Search Engine Optimization can finely tune your website performance for its keywords.

I usually let the analytics software collate data for a few months and from these finds we can tweak the websites usability to improve conversions.

Email campaigns and social marketing can help bring in return visitors and keep them involved and updated.

Missing Steps?

This is an overview but from this you can get a feeling of my work flow, the order in which I undertake my tasks and the main documents, techniques and graphs I use to plan and implement the design.

I know lots of designers whom just use an organic process, but personally I find I can create a greater quality build with my check points in place.

Do you see any missing steps I could add or techniques that would improve my process?

Symbolism:

Is their a symbol that represents the companies core trade? like a house for an estate agents or a flower for a florists.

Abstraction:

An abstract shape could represent the companies core trade for instance an estate agent could use a block shape to signal stability or a florist could use a circular shape that represents a friendlier signal.

Color:

Colors can be used to signal emotional responses for instance the color red is associated with fertility, birth, danger, strengh, love passion. The color green is asociated with nature, health, cheerfulness, environment, money. Lighter shades of colors can be used to draw the eeye away and brighter colors to draw the eye in.

Minimalism:

Less is most certainly more when designing a logo, the most successful logos are simple, and most importantly, easy to remember. Think of Nike, McDonalds, Coca-Cola.

Typograpghy:

The fonts used for any lettering should also represent the brand for instance serif fonts signal a more traditional feel whilst san serif fonts have a modern feel. A unique font can also make you stand out from the crowd, for instance the coca cola font or IBM.

Texture:

Add some dynamism by adding a texture for instance a wood grain for a health product or a scratched and rough stone effect for a builder.

Dimension

Adding another dimension to your logo can give it an edge and bring it out of the web page, a 3d edge adds an angle and is often used to infuse a modern connatation.

As a web designer the projects that I undertake are service based and therefore commonly priced per hour or for a set project fee.

Hourly rate payment

If I am undertaking the service on a hourly rate I estimate the amount of time each required task will take and add up the total number of hours, then multiply this by your hourly rate and ha presto, you have the full project price and timespan.

Set fee payment

If I am undertaking the service as a set project fee I estimate the amount of time each task will take and again work out the total project pricing and timespan.

Both these methods of project management give me 2 crucial measurements to base the payments on, a total project fee, and an end date.

50% deposit

Whichever payment type you use your outcome is an accepted proposal with the client for an amount and timespan. I always like 50% of the agreed fee upfront to guarantee my time and this helps build a level of trust with the client, your meeting half way with them and if they will not pay at this point you can simply state “sorry, were not a good fit”. The large deposit will ensure that you get rid of time wasters and criminal types.

50% on project end date

I describe the “project end date” as the date I have said the projects tasks will all be completed by. On the end date the 50% balance is to be paid. The main emphasis for this stage is that the website is a finished product with all tasks undertaken but still sits on my test server. Upon this final payment I go live with the website.

Client cancellations

If the client wants to cancel the project at any stage you can simply add up the time that the completed tasks have taken you and multiply this by your hourly rate and either refund the amount or charge the extra.

Go forth, Be bold

I used to be scared of charging half upfront as I believed it would scare off potential clients, it may have scared off a few, but the rest paid on time and in full, since I installed this system I have had no problems getting paid. If you are going to use this system it is very important to spell out each payment step to the client upfront before proceeding with the project.

Creating mock-ups usually involves opening up a blank Photoshop of Illustrator document and laying out 2 or 3 different themes as to how the website will look, the mock-ups are often greatly detailed and take up a lot of time to produce. Each Mock-up usually contains a fairly accurate layout structure, a color theme, some even have an initial logo concept.

Mock-up Problems

If each Mock-up takes 2 or 3 days to complete that’s a lot of time wasted that could be spent in other areas, I also think the designer is sub consciously laying out the design in the fashion that best suits the theme they are creating and not a layout designed for the websites users.

I also believe the more choices you give clients the harder it is for them to choose and you will end up with a mish mash of design elements from each mock-up – don’t get me wrong the client should have some design control but they are paying you to be an expert in design.

What you are really doing in these initial 3 mock ups is proving your design skills by showing off a fashion show to the client – surely that’s the job of your portfolio.

My Mock-up Approach

I waste no time making three different mock ups, I don’t create a load of different styles and I do not make my initial mock-ups detailed at all. I use a three step process to collate specific data and create just one mock-up that represents my proposed design ideas:

1. Color and Feeling Chart

Instead of wasting my time creating a fashion show I use color theory and any existing companies branding to pick great contrasting colors to make the backbone of the companies brand. I show the client this in the form of a swatch with a description and the color chart that explains my color choices.

It also outlines what emotional reactions the colors provoke to the user and what characteristics the colors are associated with and why they are right for the company. I usually use Adobe Illustrator for this and export it as PDF to print off or email. I also discuss this with the client and get the client to sign this off.

2. Sitemap

I create a site map of the website from the data initially gathered from the client and represent this as a black and white chart that outlines the navigational structure and also how each page inter connects -I usually use Microsoft’s Visio for this and then export it as a PDF to print off or email. This is also signed off by the client.

3. Website Reviews

I will hand pick from the clients leading competitors websites and ask the client what he likes about different parts of their websites, do you like the curves here? does this sidebar look better on the left or the right? I will also throw in a few websites that I know will answer some questions for instance do you like a minimalistic website like Designbit or a curvy website like some other website?. Do you like straight angles or curly lines? Do you like the type on this website? etc

I collect this information and this will help determine the clients taste and how they want there website to be themed. After all they are the people paying the bills. I also take what I feel their chosen demographic likes also – but usually find user identification happens a little further along the design path. I outline my findings in a document and get the client to sign off on this too.

Its Mock-up Time

Now I will open up Illustrator and create one mock-up from the data gathered from the three steps above and this is a quick mock-up that showcases the colors we have picked the navigational structure and the theme that the client likes as well as the layout and typography.

I explain that until we delve deeper into the data gathering process we cannot possibly define the exact functionality and therefore most page elements position and importance cannot be calculated properly yet. I will show off how some elements will look but the mock-up concentrates on representing the findings so far plus a little bit of my design flare.

The great thing about working with mock-ups in this way is that the client is talked through the whole process and also makes the design choices themselves – they are kept in the loop throughout the whole process and will feel like they have contributed to the design of the mock-up. When you show them the complete mock-up they are happy with it because they are well aware why you used those colors, why you used that theme and why the navigation structure is presented in that way.

This process of creating one mock up is really trying to get the message across that if you take more time accessing the clients needs with well planned data gathering / analysis you will get the mock up that’s a good fit for the company first time. I also find I can complete this whole process in a day or two, and then you have already got some great supporting information to take into the next development phase , the planning.

Your Thoughts?

Please share your thoughts on design mock-ups and what process of mocking up do you use?, am I the only designer in the world who creates one mock-up?

KISS (I meant the acronym)

KISS (Keep It Simple Stupid) a lovely term obviously coined by some Yorkshire farmer talking about mud or beef or cheese – but annoying as this phrase is it works well. If your not that confident about your design skills or illustrator / photo-shopping then keeping things simple is the best way forward; simple typography; keep the amount of fonts down to increase neatness.

You don’t have to reinvent the wheel on every project; most companies just want a website that will get their message across and achieve their main goals if they want you to reinvent the wheel they will pay well for the extra work. So layouts can be simple easy to use and dependable, top main navigation a sidebar for lower navigation and obvious content areas.

One of the most common comments I receive when I show potential clients some of my works is that its “really simple to use” and “obvious”. You don’t always have to use flashy graphics with gradients, shiny effects and buttons for links and most the time this is unnecessary as fundamentally the Internet is full of hyper linked web pages linked together by blue underlined links – this is web education 101 and what your mum, brother and grandad will know about how the Internet works.

Learn a CMS

If you want to make any company happy nowadays you will have to supply them with a means of controlling content without having to rely on a expensive web designer to change the coding every time they want to update the website.

A Content Management System will allow the client to log in add/edit/delete and manage the whole website from any PC with a Internet connection. This is a big step up from static HTML and probably looks very scary but this will really differentiates you as a designer to your potential client. I use WordPress, Shopify and Joomla and have found them invaluable tools.

Get a reseller account

Web hosting can be quite expensive for companies and often the idea of having to pay for hosting as well as your design services to smaller clients will put them off – if you can include web hosting for a year with your design / re-design then it may sway the deal. You can also reliably host your own company website and any extra projects you delve into.

Make industry contacts

Often you be asked questions by client that you do not know the answer to, the client doesn’t know how many different subcategories of web design they’re are and probably doesn’t know the difference between web design (design and front end) and web development (programming / back-end).

If you have a programmer / SEO/ designer / CMS expert / industry contact then you can say yes to their questions safe in the knowledge that you have the contacts to get the project completed and gain the clients trust with positive answers.

You are not lying to get the project, you are being hired to solve their web design needs and everybody in every industry outsources. I have lost count of the amount of times I have picked a industry contacts brain about their specialist subject and it has had a positive effect on my project. I have a handful of developers / designers that I can rely on and I know their rates of pay and how busy they are at all times.

Be competitive

I often challenge my peers to bets about marketing (how many diggs you’ll get), design competitions (logo design etc) and often lose dreadfully but its a great way to learn from one another and gauge how each other works and if you can work together on future projects.

Drop the dead donkey

If you try a side project that’s soaking up your valuable time and funds that isn’t working don’t be scared to drop it – I have just done this with a project I have invested in and now another great idea is getting that attention.

Drop the dead donkey

If the client is really indecisive, rude, overly demanding, wont pay a deposit, then don’t be scared to drop them – they will be more hassle than the projects worth. They are really nice companies and individuals out there looking for other nice professional people to perform services for them.

I cant believe the fantastic clients I often work with, really nice genuine people who are fair and respectful – I didn’t go freelance to work with anybody else.

Most companies are very scared of their competitors finding out about their prices, and for this reason they hide theirs even though they probably have competitive prices and a great service. This is a shame as I imagine a lot of customers arrive at their sites look around the services or products for a while and then search for the prices. Instead of a simple price list they may arrive at a quote form or worse a few linked forms with steps basically gathering as much data they can on you to help their marketing.

Quick read web

The first thing you learn in web design school (not literally) when it comes to content is to create small chunks of information for readers. The nature of the web is for its users to quick read, that is they browse for what they want and because there are so many competing websites offering similiar services or products they quick read and then move on. If your prices are hidden and your competitors prices are clearly identified who do you think the user will trust more.

Web design firms

I know web design pricing for projects is very difficult and that because we never know the exact tasks, deliverables and objectives until we have had quite a few meetings and iterations of the design process we cannot completely price fairly and need to estimate our pricing.

But we could still hint at what the prices are, maybe just hint at a few average price points for example SME, Brochure site and E-commerce site. These are just sample prices for a typical scenario. Based on these scenarios the prospective customer can tell whether you are within their budget which will waste little of their time and yours.

For each scenario you could add up the tasks involved versus the time span and calculate the sum, then show this as a price range. Then you can add factors such as for every extra page add fifty pounds etc. This would be more beneficial to a prospective client than no pricing at all.

Usability issue

Is it ludicrous to claim that not showing your prices is a usability issue? Well yes probably, but my perspective is that we should think about our users and what they are looking for and if they are looking for prices for a service then we should should supply. One point I want to make though is that if you do add prices to your services then make sure they are accurate and up-to-date, also ensure they clearly identify additional charges.

Conclusion

Designbit is my blog and place of expression and development, for myself and my small readership, I never intended this site to win clients. That is why I am currently in the middle of creating a web design studio and this is what spearheaded this article, I was comparing companies prices from a prospective clients point of view and the results where quite interesting. I quickly dismissed web design companies that didn’t show prices or at least didn’t hint at their price range.

So I guess I was spying on other companies, comparing prices and deciding what I liked and disliked about their services and yes I was looking at their prices from a competitive perspective as well. So I may have contradicted myself, because one of the reasons some companies dont show their prices is so people like me cannot undertake that kind of research / marketing and give them competition.

But I do think a large percentage of prospective customers will agree with me that a clear pricing structure aids their shopping. So I have decided that on my web design studio I will indeed show prices as I described above, or I will at least have some detailed scenarios.

Remember the good times

A fellow designer I am currently working on a project with had the daunting task of making all the different parts of the website talk to one another and be outputted in a neat little bundle, he was baffled at first on how to make it work but knowing he had overcome hardships before he was confident it could be done.

He emailed me stating “I am a fucking legend !!!!!!!”. I know how he feels, because I think all designers feel that energy and buzz when we crack that bit of code, get that markup to validate or finish a mockup for a client. It really is a buzz to enjoy your work and hell if we can get paid for doing this, life is pretty spectacular!

Sleep on it

It honestly is that simple, just go to bed and try and forget about it. Have a good sleep and believe it or not nine times out of ten the solution will awake with you. I have done this loads of times, I have also not done this loads of times and sat there till the early hours of the morning sipping coffee and eating to keep myself awake hoping that my worn out mind and tired body can muster a solution.

Look for inspiration

I guess this is the proactive way of dealing with the web design slump and probably one of the best ways to find a new idea or to at least see things from a different perspective. I am not talking about website galleries, they have their uses but I always find that the inspiration from the site you are admiring is too strong and will inevitably emcompass your design.

I prefer looking away from the web, maybe a magazine or book related to the subject, photography and art galleries will have you brimming with ideas but I personally find a non-visual inspiration the most effective. Sit down with your eyes closed and listen to a good album.

I have done this many a time and found that the music somehow has colors and patterns associated with it. For instance I make very different websites when I listen to Sonny Rollins then when I listen to Led Zepplin and sometimes I end up going in a completley different direction due to a song I have listened to and will revise my design.

I really love podcasts and vodcasts and have found some fantastic shows, I will share some of these with you for when your looking for inspiration:

• Media Artist Secrets This is a podcast for all media artists that seems to emphasize on career development, not coding and graphics but dealing with clients, being your own boss and motivating yourself etc etc, it really captures the entrepreneurship attitiude many designers posess and encourages career growth. I know that sounds like tree hugging crap but its really great!
• Benjamin Walkers The theory of everything This is another podcast, this time not related to technology but the exploration of self, and life. Sometimes politicial, sometimes very personal and always a journey. Benjamins voice is soothing in itself and the brilliance of the shows are not to be missed
• The show with Zefrank A Vodcast thats usually hilarious, crazy and brillaint with a mocking slant towards technology.

Plan your time

I think a big part of losing your creativity is often worrying that your not going to meet a deadline or your nerves kick in about the end product not being good enough. I have found that the best way to combat this is to plan your time. Grab a free calendar program like Mozilla Sunbird and give yourself a reachable design target to hit by the end of the week.

Then take this target date and list all the tasks that have to be completed to enable that task to be achieved. Split those tasks up over the days you have until your design target day and hey presto, you have a plan. Once you have completed your tasks for the day, you must stop. By ticking a task off through out your day you will feel like you are making progression.

Conclusion

These techniques may or may not work for you! But have you been in the slump and how do you get out the slump?