Just Magic Design

Developing a great website requires a great process.

In our experience, the best process is:

(Rinse and repeat)

Developing a website is a lot like growing a tree - it starts out small and undeveloped then builds out in layers or rings, each cycle bringing it closer to full grown. We’ve found that going through the full cycle (all the way to deploy) as soon as possible is the most efficient process because everyone is dealing with something real. Specifications are abstractions. The only specifications we produce are the initial project proposal and the hand-off documentation.

Here are some details about what goes on in each of these four phases during the different rounds of the cycle. Note that there are specific deliverables (from us) and requirements (from the client) at certain points. The requirements represent places where progress may be stalled until we have something from the client.

First round

Discover - First Round

Everything starts with the project brief. We like to do this over coffee. While we do work with some remote clients for whom we rely on email and the phone, we prefer to have at least one meeting in person. (This helps them to get to know us better and vice versa.)

In order to get an idea of the requirements of the project we ask four key questions:

1. Who are you and what makes you unique?
2. Who are your visitors and what are they like?
3. What do you want them to do on your website?
4. What are your constraints in terms of time, budget, existing website or branding?

We’ll ask follow-up questions as needed, but mostly what we do at this point is listen. We might mention some ideas for the website but the focus is on getting to know the needs of the client.

One important thing we’ll discuss is who will maintain and update the site in the long term? (This could be us, the client or someone else.) How often will it need to be updated and what is the technical skill level of the person who will do that? This will heavily influence the implementation of the website. We specialize in websites that are easy for a moderately computer-savvy person to maintain (or trivial for a very computer-savvy person) because this is the most cost-effective and fast way to do it for the client.

Deliverable: Project proposal

The project proposal will summarize what we learned about the client during the brief and will scope a website that will meet those needs. It will have a guestimate of pages and functionality, list the measurable goals of the site, list the things we will need from the client (especially regarding content), include a rough schedule and a price. (We usually have a queue of waiting projects so the schedule will be in the form of an approximate start date and an estimated duration.)

The proposal will also include brief sections on platform recommendation, hosting recommendation, maintenance and promotion assumptions. This way the client knows about all the recurring costs and effort that will be associated with the website beyond the initial development.

Requirements: Signed contract, deposit

After refining the proposal with the client, we’ll ask for a signed contract. When we’re ready to begin work on the project (which may not be immediately based on our other client work) we’ll ask for a deposit of 25% of the total payment.

Content gathering

Now that the project is officially started, the next part of the Discover phase is collecting anything we can from the client. If it’s a website redesign, this means a thorough audit of the existing site’s content and a discussion of what is working for the client and what needs to be changed. We also gather business cards, white papers, price sheets, flyers, advertising, images, articles or anything else that describes what the client does.

Competitive analysis

We’ll do our own research into competitors but we’ll also ask the client for references, especially to competitors (or allies/heroes) they’d like to emulate. We’ll ask a lot of questions about what the client likes and doesn’t like about the competitors’ websites.

Design - First Round

At this point in the early design we’ll focus on four key aspects of the design:

• Branding
• Navigation
• Layout
• Typography

The branding work may not be required if the client already has a name, logo, colors and possibly other elements that they want to continue using unmodified. Everything has to build on brand, though, so we always address it before other aspects of the visual design. We enjoy designing logos and the other parts of branding, but this is one thing we may recommend outsourcing to a specialist if the client can afford it since it is so critical to all aspects of business, not just the website. (If we do the branding work ourselves we will always deliver source files in vector formats suitable other purposes, such as print.) A key aspect of branding is naming and important requirement of that is getting the matching domain name, so we’ll usually register the client’s domain name at this point if that’s not already done.

Before we jump into a full visual design (in other words, before we fire up Photoshop) we’ll address the other three things: navigation, layout and typography. We’ll work mostly with pencil and paper at the beginning, sketching sitemap diagrams (and other forms of Information Architecture) and making thumbnail sketches of possible layouts. We’ll use various tools to play with different fonts, sizes, weights and use of whitespace.

Develop - First Round

Platform selection and install

Unless we’re developing an extremely small, static site, we’ll usually go with a platform like WordPress, Drupal or Ruby on Rails. (You can read a previous blog post that discusses this choice.) That will take some initial set-up.

Hosting selection

The platform will influence the hosting needs and we’ll discuss the options with the client, helping them find a good balance between cost and performance/support.

Site prototype based on initial design and content

Now is the time to actually start writing HTML and CSS. We like to hand-craft our markup and styles (rather than use Wysiwyg tools) but we start with best practice libraries of HTML templates and CSS frameworks to speed development and ensure good findability (SEO) and accessibility.

Deploy

The initial deployment is to a staging server, usually hosted by us (e.g., clientname.justmagicdesign.com). We make sure the site is password protected and not accessible to search engine spiders like Googlebot. Having a real, live website to show the client helps a lot in getting feedback because there are things you just can’t do on a static mock-up: resize the window, for instance, or interact with a drop-down menu.

Second round

Discover - Second Round

Now that we’re on the second round we want to discover if the prototype site is on the right track. It’s sometimes hard for the client to concentrate just on the menus, the layout and the flow of the site and not get sidetracked by the lack of graphics. “Yes, it’s not pretty yet,” we’ll ask, “but does it work for you?”

Requirement: signoff on the sitemap/navigation as presented by the prototype.

After the client is happy with the “ugly” version of the site, next we get input on design and mood — what are their favorite colors (if they’re not dictated by existing branding), what tone/personality do they want for the website, what are websites they admire for their appearance (even if they’re in a different space), and so on.

Design - Second Round

Finally! The part everyone loves and many developers and clients jump into way too soon.

At this point we’ll often need to gather imagery from or for the client. The photographs and other images that we incorporate into a design need to be meaningful to the client’s business or organization. We’ll try to work with existing imagery and supplement it with stock imagery from on-line sources or imagery we create ourselves. At this point we may recommend the services of a professional photographer so that we are starting with the best imagery possible.

Mock-ups

This is where the magic happens: the “real design”. Adobe Photoshop is our weapon of choice for producing a design. We have the wireframe in the form of screenshots of our prototype site that we can use like a uncolored coloring book. We don’t necessarily color within the lines though because the design influences the layout just as the content does (and because asymmetry and blurred boundaries may be appropriate for the goals of the site).

We may produce multiple designs for the client to choose from or we may (perhaps because of budget) focus on one that we refine together.

Deliverable: One or more mock-ups as static images on the web.

Requirements: Selection/sign-off on the design. The second 25% of the project fee.

Develop - Second Round

During the second stage of development, we convert the design into sliced images and CSS. (In other words, more magic happens!)

We’ll also pay more attention to the content at this point. We prefer to be copy editors and to take content written by the client (the domain expert) and use our experience with writing prose for the web to make it as effective as possible in that context. This is another area where we may recommend outsourcing to a specialist if the client can afford it and doesn’t feel he/she can write well enough. (Re-read the second sentence of this paragraph to see why we sometimes recommend outsourcing copy writing.)

We also work on things like e-commerce integration, contact forms and other interactive parts of the website at this stage.

Deploy - Second Round

Now the staging server should look pretty close to the final product, even if some of the pages still have “Lorem ipsum” level content or the forms don’t actually do anything.

Subsequent rounds

A simple project will just have one last round of testing and refinement before it is deployed live (launched). A complex project (like a web application) will have many.

We do two types of testing: validation and usability testing. Validation is automated and ensures that our markup and styles follow standards (as much as pragmatically possible), that all our links are valid, and so on. During usability testing we get feedback (ideally from people like our target visitors), refine, and repeat until the visual impression, usability and readability meet our goals.

We don’t test only on the final round — we do it at each stage of development. (The amount of formal usability testing we do varies a lot depending on the budget of the project.) Testing is particularly important during the final round, however, because we’re “done” when the client is satisfied enough that they want to open the website up to the public.

Requirements: sign-off from the client and the third 25% of the project fee.

Deliverable: the site deployed to the live server.

At this point, we party, or at least have a glass of champagne!

After launch

We’re not done, of course. We will do one last round of refinement, if necessary, based on real user feedback. For the few months following launch, we will make sure we set aside time to address any issues as quickly as possible.

But most importantly, we’ll set up and train the client on things like Google Analytics so that they can measure whether the site is actually working for them, and we’ll train someone on how to maintain the site. We’ll also discuss how to promote the site with company literature, advertising (such as Google AdWords), e-newsletters, use of social media, and so on.

Requirement: the last 25% of the project fee.

Deliverables:

• An Information sheet with all service providers (hosting, domain registration, SSL certificate, payment processors…) and all the passwords associated with the website.
• A CD containing the site files and all original artwork as source files (e.g., .psd, .eps).
• Any materials provided during the content gathering phase that the client wants back.
• A How-to document that covers:
  • Content updates (e.g., modifying pages, how to make blog posts, adding/updating products on an e-commerce site)
  • Upgrading the platform (such as WordPress)
  • Monitoring the site with Google Analytics and keeping an eye on server logs
  • Information about backups and restores
  • Site-specific features like user management if there is a community, forum management, etc.

So there you have it: our process for developing a website from start to finish. Next, of course, the new website brings in so much business that the company grows and expands. Now new features need to be added so they contact us again. That puts us right back at the beginning and we do it all again!

For further reading

The web has many, many sources of information on the web development process but I’m a book person. If you would like to read more about this topic two books I recommend are:

“Web ReDesign 2.0 | Workflow that Works” by Kelly Goto and Emily Cotler

and

“Getting Real - Discover the smarter, faster, easier way to build a successful web-based application” by 37 Signals.

If you’ve read both of these you might be surprised I put them both in the same list since they take two very different approaches to development. The first approach is “Think really hard, write down lots of stuff in a very structured way, then go implement until you’re done.” The second approach is “Think a little, do it, think some more about what worked and what didn’t, refactor, then repeat until done.” You’ll recognize our approach as a combination of the two.

An excellent book on usability is “Don’t Make Me Think“, by Steve Krug. This is a classic book on what makes a website a joy to use.