Website Design Methodology -- The Golden Pyramid

Aaron Qian — Fri, 27 Jun 2008 06:27:00 +0000

Optimizing Design Efficiency and Cost

Building a website is similar to building a pyramid, except it is built from the top of the pyramid to the bottom. The pyramid below represents different phases of creating a website from an idea to completion. The sizes of each phase gives you an idea of how much time/money it will take for each changes made during that phase.

Idea Phase

This is the initial phase of making a website. Primary goal is to gather initial requirements of the site. However, the initial requirements is often incomplete, vague, and often contradictory. Often times driven by the vision of the boss.

Spec Phase

This is the phase where you make your initial spec complete, correct, concise, and clear. Several tools will be used to facilitate this goal:

Wire Diagrams (Schematics)
Flow Diagrams (Use Cases)

At this stage, no design is done. However, functionalities, features, and general layouts are decided at this stage. This stage should also involve the Operation, Design and Development team and hear their input for several reasons:

Is this spec operationally suitable for the operations team? (Operations)
How to maximize Usability? (Usability)
How to lead different types of users through our website to increase the conversion rate? (Design and Usability)
Is this spec possible to implement? (Dev)
How long will it take? (Design, Dev) What plans do we have for SEO? (Dev, Design, Operations)

The detailed spec should be finalized BEFORE moving into design and development. Often times this process is lengthy and chaotic. It’s important that an open exchange of ideas are tabled and discussed as a team. It’s also critical that there’s a clear decision maker reach closure.

Design Phase

This is the phase when the spec is finalized, and we start to create the prototype of the website. This time, design should only focus on the look and feel, not usability and functional issues. When this phase is done, ideally an HTML mock up should be done with links to demonstrate how the site should look like when it is operational. Also, when changes to usability and functional changes must be made, (meaning Spec is done wrong) there should be a meeting where all member should get involved.

Development Phase