I’ve always found it interesting reading the design process of others (David Airey, Contrast, Brian Hoff). It’s good to have an insight into others work, to see if I can learn anything from their process but also for curiosity. So I’ve put together a break down of my design process, using a recent project as a real life example, Newsgroup Direct.
Overview
I was recently hired by Newsgroup Direct (NGD), a leading Usenet newsgroup service provider, to revamp their website, make it more modern and improve signups.
Here is their previous design.
Planning
The first thing that happens when I get an enquiry is I send the potential client a website planner. The website planner, a series of questions I have listed in a Word document, will gather requirements for the project.
The key objectives of the planner:
- Find out who the client is and what they do
- Who their target market/user is
- Who their competition is
- What deliverables they want from me
- Timeframe and budget
In a nutshell, NGD require a makeover with a modern & easy to use interface. I am responsible for the XHTML/CSS templates for the main pages (they already have a development team in place for the back-end programming & integration).
Research & Ideas
Current site
I start by going through the current website and list things that can be improved.
Various issues raised for NGD include non-semantic markup, no defensive design, markup was invalid, poor Google ranking for keywords, no signup enticement, overload of available sign up options and several usability issues.
NGD had over 40 packages to choose from, which can be too overwhelming for the average user.
Competitors sites
The next stage is to analyse competitor websites; what is good or bad about them. If I can take on board what is good and eliminate what is bad, then there’s a better chance of coming up with a successful solution.
Ideas
I suggest several improvements that can be made to the current site, showcase various features of other non-related sites that I feel can be integrated into the new site.
Several ideas I have for NGD:
- Clear instructions on how to use NGD and setup newsreaders for novice users
- New logo to reflect new branding
- Narrow down the packages (introduce a free package for trial)
- Clear call to actions
- Highlight the key features of NGD with a slide reel in the header
Logo
Depending on the project new branding may be necessary including logo, stationary, company image and the website.
To help with their new online branding, I recommended NGD have a new logo designed & I suggested a couple of professional logo designers I know or have worked with. They went with Graham Smith, a well respected and well known graphic designer from the UK.
Graham did a great job with the logo and this was the final outcome.
Information Architecture & Sitemap
I should mention here that at each stage I get feedback from the client and discuss it. It’s important to make sure they’re involved the whole way through the process.
For IA I jot down every section of the website on post-its and arrange them (on a wall or fridge) in order of importance. This is an great technique (that I was first introduced to by Front) that allows you to easily change and rearrange your order. In the end you will end up with various levels of importance, which will help with your sitemap and wireframes.
Once I settle on the IA I produce a sitemap. I usually produce the sitemap in Illustrator. The reason I use Illustrator is it allows me to move pages about (unlike using paper) and it also produces a professional outcome that I can pass onto the client, but there are various other tools you can use.
Wireframes
I start by sketching wireframes and then move onto Illustrator to produce more professional looking wireframes that I can pass onto the client and depending on the project I could produce 1, 2 or 3 wireframes.
For NGD I only produced 1 that was the homepage as this is the most important page while I kept the other pages (pricing, info pages etc.) as paper sketches.
Mockups
Once the client is happy with the wireframes it is time to open Photoshop and start with a fresh canvas. The good thing about this process is that I now have a wireframe to build the design over.
Some key things to keep in mind here:
- Branding – tying in with the overall brand, colours, mood
- Target audience – NGD’s audience are 20-35yr old males so it has to appeal to them
- Grid – keeping the elements structured and to a grid system is important
- Development – bare in mind this has to be produced in CSS so don’t make anything too complicated and keep graphics minimal
Homepage mockup
Implementation
All good to go, the front end development process starts and I produce templates for:
- Homepage
- About Us
- Pricing
- Sign Up
I also produce a template that has various other styled elements that the NGD developers can use if need be, which includes tables, forms, buttons, alerts etc.
Completion
The project is complete and the templates are then passed onto the client (in this case NGD’s development team to integrate into the framework).
After launch I will still monitor the analytics and make suggestions on how to improve the site and conversion rate. It’s hard (or impossible) to get it perfect first time, there are always things you can learn from how the users use the site and make improvements based on this.
What’s your process involve?
Insights are always interesting and useful. Even if you’re not a web designer, it’s good to hear how projects develop.
Web Design Bureau of Mauritius says:
I also love to read other people’s design process and I can say that your’s is awesome. I particularly like the 3 columns homepage with great use of whitespace. Great job and inspiration.
Marko Randjelovic says:
Great article! Might create a checklist out of it. ;)
Rebecca says:
Thank you so much for sharing your process. I agree that it’s always interesting to read how others approach the process. Since I’m a web content writer, I start as you do with an analysis of the client’s needs and the performance of their current website (if they have one). Then I gather up a team — PM, designer, etc. — if they don’t have their own. I work with the designer to develop the information architecture, write the content, and send it along to the designer. Sometimes that’s the end for me.
If we’re managing the site, we go on through the mockup (some of the designers I work with do wireframes first and some don’t)and building the site, and then we work with the webmaster to launch the site, check for any problems, submit the site to search engines and appropriate directories, and keep an eye on the analytics for a while.
Adam says:
Great article, Lee. It’s interesting to see how other designers work. My own process is quite similar to yours, but I’ve picked up a few good tips!
Jeff Mackey says:
Hi there,
This is a very nice write-up of your design/development process. The new site looks great–a definite improvement! Thanks for the inspiration.
All the best,
Jeff
Union Room says:
I love seeing these kinds of blog posts, great work Lee!
Neri says:
Thank you for sharing your process. This is something that I find myself constantly working to improve. Thanks again.
Antoine says:
Great post indeed, and really nice output.
SlickPlan says:
For anyone who doesn’t want the hassle of making a site map visit us at http://www.SlickPlan.com An easy and free web app that is dedicated to making free and easy site maps.
Sankar says:
Great explanation.. Good Job
Thanks
Sankar
Most Interesting Ideas says:
Nice web develop process description
EasyWPAdmin says:
I always love to read about how other people go about their design process. Roughly, how long did this one take from start to final design?
Courtny Cotten says:
My process usually changes around the point you build your site maps and IA. When thinking about the IA I also like to lay out how much time I target to spend on a specific task, like building wire frames, mock ups, and sometimes get down to specifying exactly how much time should be spent on coding and development of certain sections of the site.
This process allows me to gauge
1) Efficiency
2) True cost to myself
This process not only encourages me to complete tasks on time and eliminate distractions, it also ends up impacting the cost to client and future project quotes. Obviously no two projects are alike, but this can give you a ballpark depending on project depth.
Dave Sparks says:
Thanks very much Lee – always great to see how other people work through the same process we’re all doing.
A nice finished product as well!
Lee says:
@Rebecca: Thanks for sharing your process
@Jeff: Thanks, glad you think so :)
@EasyWPAdmin: Good question. This project took roughly 2 months to complete, although from the point I handed over the design to the point the site went live there was about 3 months.
@Courtny: Good thinking! I guess this is something I keep in mind (or at least I keep the quote in mind when making out IA and wireframes so I don’t include anything that costs a lot more). Thanks for sharing
Pigeon says:
Nice post, and very informative.
One think I would say is that Balsamiq [http://www.balsamiq.com/products/mockups] is great for wireframes, it stops them being old and boring and (I find) it engages the client far more when they see something that isn’t as plain as the wireframe you show. My clients definately prefer the wireframes made with balsamique over my old ones!
Not only that, balsamiq allows you to create wireframes very quickly and it gives you ideas as your creating them at the same time!
Pigeon (and no, i dont work for them!)
Jack says:
Thanks for posting this. A nice overview of how you do things.
Jing says:
Thank for sharing.
great post.
Tara Dee says:
This is a great overview, I’m abundantly thankful to read it. Venturing into freelance web design and wanting to really grow up my process, reading about others’ process is so so helpful. I’ll make sure and keep this post as a great resource to look back to. Very nice design, also!
raphael from artd.ch webdesign says:
Great article! For german readers..check my post here:
http://www.artd.ch/blog/projekt-webseite-fragen-die-sie-sich-stellen-sollten.html
Questions you should ask to your clients before starting a project..
I always start with this questions to make the customer sure what he really wants and to have an idea about his target.
I guess it was not a bad budget for this project..
best regards
raphael
Dave says:
Hey Lee, great work. My question may look little strange, but it’s really important for me. My interest is how do you charge your clients? For example how much you took for this project, reviewed here? You know, I live in the country of so called Third World (what’s that supposed to mean? or what are a first two?..), where the whole site can be done just for $100. I constantly have a feel that I undercharge my clients (I’m coder) – they always are so happy to hear how much they have to pay me…
Aaron Moody says:
Great article, interesting to see your design process, Lee.
Chris says:
I wish more of my clients understood this. They always expect to just have the starting point be the mockups with no attention given to the initial planning processes. Thanks for the great article.
BebopDesigner says:
Brilliant! This single post is practically a whole course!
I usually try to share or educate clients a little on how web-marketing has changed nowadays and how important it is to produce good content and to take full advantage of social media.
Many times I’ve come across with clients who got trapped in 1998, when people used to put a website, flood it with keywords and prayed for a miracle.
Guess I can’t help meself, but spreading the word should help us all in some way. What do you reckon?
Thanks for sharing. Cheers
saurabh shah says:
nice article Lee .. i am almost follow this procedure too …
Pedro Magalhães says:
Excellent! Nice work Lee..
web design sydney says:
hei thanks for the explanation.I really liked the way you explained the whole process.Once again congratz !!!! :)
theweeguy says:
Lee
You’ve done a great job outlining how you implement the design process.
It’s such a shame that a marketer wasn’t briefing you and your client
No web designer is ever going to articulate :
the real target audience and the problem they have !
why usenet newsgroups are a solution
why this is better than the alternatives
why Newsgroup are the only solution
How to attract those who don’t know about the solution (me) and how it might help my business.
As I say, don’t let the chef run the restaurant !
F.
James Kurtz III says:
Great work. Do you typically only provide one “concept” or do you provide multiple concepts from which the client can choose?
Efraim says:
BRILLIANT! Great post!
To ‘speed up’ client interaction, I usually do meetings with these:
http://www.MockupMagnets.com
It helps the customer understand white-space, placement, using screen-real-estate and so on… plus it makes your meetings shorter. I use them in combination with my GuiBoard (.com) and use Balsamiq when I get back behind my desk.
-E
Lee says:
@Pigeon: Thanks for the Balsamiq link
@Theweeguy: Fair point, it can be hard to understand the client and their market. The best thing you can do is to ask questions, and keep asking questions. I will ask ‘Why?’ a lot or ‘How will this benefit your users?’.
@James: Usually only 1 concept. I only factor 1 concept into the quote. I don’t believe in providing several concepts – your entire effort and expertise goes into producing the first concept so it must be the best based on your research. Fair enough though if the client comes back and they don’t like it, you may have to take another stab at it (and charge for it), but I don’t do more than 1 for them to compare at first.
@Efraim: MockupMagnets looks cool, thanks for sharing
James Kurtz III says:
Thanks for the clarification and insight on why you only provide one concept. That is very true. I always seem to have one concept that a WAY prefer over the others, and it’s usually the first.
Sahus Pilwal says:
Didn’t really appreciate the improvement you made until I opened the newsgroup website into a browser! Much fresher & cleaner look! Thanks for your design process!
Pim says:
Wow, great post and made my brains fresh again after the holidays :-).
curriemonster says:
Amazing post Lee. It’s great to see how so many of your projects turn out so well.
Christophe Divina says:
Thank you so much for sharing your process! Using post-its to decide of a sitemap is a brilliant idea – I’m definitely gonna use it next time.
ThinkBohemian says:
I noticed that the logo that was produced from the designer, is not the same one on the final site, is there a reason for this?
HullDO says:
This is a really interesting insight into your design process. Thanks for sharing.
The post-it idea is very useful.
Ted Goas says:
It’s really nice to see how you’ve laid out the process in logical, feasible chunks. Designing a site from scratch like this always seems like such a daunting task.. at least to me.
I like how you’ve broken this down into manageable steps! I’ve bookmarked for future reference. Cheers!
Patrick says:
Great article. That is good reading for starters like me.
Eduardo Baldan says:
Hi, Lee.
Very good post, mate!
Sharing is the spirit of things. I’ve being doing a lot of thinking about my development process. Your article really helped.
I also the coding and database stuff. So I start doing it just before or in parallel with the Wireframe.
And then, do the prototyping. Which in some cases I don’t consider necessary.
Well, thanks for sharing.
Cheers!
Most Interesting Ideas says:
Useful article. Thanks for sharing
Simon Griffiths says:
Great post! I thought I would share my cheat sheet of client questions. A lot are similar to yours but there are a few extra marketing related questions that you may find interesting: -
Website Questions
1. What is the website for?
Brochure, E-commerce, Business card, reinforcement
[Why: to see what the site need to include and what technologies should be involved]
2. Who are the customers?
Male, Female
Age range
What do they do
What is their job title
[Why: to try to profile the customer so that site design and content can be created to suit the audience]
2a. Who is the competition?
[Why: so we can look at their sites and see what we can learn about keywords, expected layout etc]
3. How would you expect the customer to find the site?
Search, word of mouth, literature/business card
[Why: to see how much emphasis needs to be placed on SEO/SEM]
4. If search, what would they be looking for to find the site?
[Why: so that keywords can be checked to see if there are more available]
5. What sort of device would they use to access the site?
PC, netbook, phone
[Why: to see what technologies need to be involved/avoided, to look at creating specific content for a device]
6. Where would they typically access the site from?
Office, home, out and about (using public wifi or mobile connection)
[Why: to see how much bandwidth the site can take without inconveniencing the user]
7. Are you geographically based?
What are the limitations you want to put on area.
[Why: to make sure content is written to make this clear, make sure Google is aware of this and to see what type of hosting is required]
8. What type of site are you thinking about?
Examples of sites that you like.
What do you like about these sites?
[Why: to get an idea of what you expect from the site]
9. What tone do you want to set with the site?
Professional (typically more subdued), light hearted, fun
[Why: to make sure that the tone of writing matches that of other literature or the image the company is portraying]
10. Do you have other literature/business cards?
[Why: so we can make sure the site matches the style and creates a total company image]
11. Would you want to be able to edit the site content?
All content, a blog, social media
[Why: to see what technologies we need to use and what you expect from updates]
12. What timeframe and budget is the site required in?
[Why: Timeframe will set what is there is time to do in terms of design and interaction, also whether the designer can actually do it or not. Budget will set again set what is possible to do].
[Note: Budget is always tricky as the client will not want the designer to design to a budget. Possibly ask for a range, or look at requested features and say roughly what each will cost].
I’ll try to post these up with more detail on my blog in the next few days.
Johnny says:
It’s all good but articles like this look like advertising yourself. “I made a website, here’s the link. It is part of my portofolio…” It doesn’t explain anything new. All this is logical anyway. Evaluate current, find flaws, work with the customer. It’s all been desribed 105 times already.
And what is this stupid trend with white text on black background. Totally unreadable. I couldn’t finish your post just because it’s so difficult to read. When will people finally understand that it sucks.
As an example you can see what people think about it here http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/
And don’t check “Notify me of followup comments via e-mail” by default. It’s like subscribing people to spam.
Simon says:
Wow Johnny, we must have caught you on a bad day! Yes you are right, a lot of these things are obvious to you and maybe to me, but read the comments above, not to everyone!
I’m not sure I agree with you about the white on black either. For one thing its actually grey, but with enough contrast for me at least to read comfortably without it being glarey (and I’m willing to bet I am both older and have worse eyes than you do).
As for the notification, this is really personal choice. I actually prefer to see follow up emails, you obviously don’t. The check box is there so feel free to use it. Maybe the blog designer has actually done the research and found that a higher proportion wanted the followup than not. You never can tell!
Anyway, you probably won’t read this (as you won’t get the email), but I hope your having a better day today;-)
Lee says:
@Johnny: Thanks for your feedback, I do appreciate both positive and negative reactions. When I decide what to blog about I basically blog about stuff that interests me, so for example, as mentioned I like reading the design process of others. Sometimes I’ll learn a new trick or sometimes it’s just good to see if others are using the same process. So I thought this topic would be useful to other designers.
I take your comment on board about the text on dark background. Do you have poor eye sight out of interest? Will keep that in mind for future redesigns.
The comment subscribe is auto checked as I think it’s good for you to be automatically informed about new comments if you have contributed to a discussion. As Simon says, the option is there to uncheck and there is always an option in your email alert to unsubscribe.
@ThinkBohemian: Sorry about the confusion. The logo I used for the mockup was their old logo – this let me move on with the project while Graham was designing the new logo. The end result uses the new logo.
@Simon: Thanks for sharing your planner questions. I think “How would you expect the customer to find the site?” is a good one – often the marketing plan or promotion of the site is overlooked, forgotten or left until after launch.
Alan Anderson says:
Great post, glad to see that my process is basically the same, different programs used i.e. depending on project either illustrator / /photoshop or now more commonly fireworks.
One thing that you might want to check out is personalbrain its a free app on mac (works on 10.6) thats a mind mapping tool. Great if you are working on multiple websites so you will be able to see your walls if working on multiple projects (or like me, have a young son who thought it was great fun to play with the post-its in my room)
Joe says:
Great read! Something I am bookmarking and referring to for all future projects!
Business Web Design says:
Really good post! I love reading other designers stories there are always interesting. Thanks for sharing and I am looking forward to some more articles like this!
Eric says:
Always interesting to see someones process, thanks for sharing.
sonnydesign says:
thank you for sharing this tips. This is my first time i’ve read an article about this. Really a big help
Richard Bland says:
Very good article and a great insight to a newbie like me. What would you suggest as the best reading material for purely dealing with clients and handling the client process? So far I have survived because the clients know me through a friend etc… but now looking into contracting more, I may need to come up with some sort of process to take to clients!
Mcometa says:
Really helpful! Thanks for this one! :)
Louisa says:
Great article. Was just wondering if the logo design came before or after the site design, because I guess the risk was there that the designs could have clashed??
Murlu says:
Fantastic read, love seeing the behind the scenes during the development process.
The new design is much more appealing and the pricing structure is a helluva lot better than the older one. 40 various plans? Wow, that would be waaaay too much, I like the smaller scope.
It would be nice if you had permission to do a follow up and see how well it’s been generating new sign ups :)
Michael Minter says:
I usually generate between 5 and 20 separate improvements of a one page design. I keep the client posted to the process, which helps me build rapport, and they feel happy about getting to watch.
Website Design London says:
Nice post, thank you for sharing. You have really imparted useful knowledge on website planner, Research & Ideas, Competitors sites, Wireframes and Mockups. This is a big help for me.
complete IT Services says:
Great work,thanks for sharing.
baidu123 says:
This weblog appears to recieve a great deal of visitors. How do you advertise it? It offers a nice individual spin on things. I guess having something authentic or substantial to post about is the most important thing.
Drupal Web Developer says:
appreciate the work, thanks for sharing
Web Designer Newcastle says:
As a developer for many years I always appreciate learning how other developers approach their projects. Very insightful!