We’ve learned this the hard way that projects fail at the beginning, which is why we recommend that our Website Discovery process is used to give the project a plan.
Our Website Discovery Process has three deliverables: the requirements doc, the site map, and wireframes.
Website Discovery – Functional and Technical Requirements.
This isn’t the most exciting thing to do, but it will set the stage for a successful project. The document we use starts by defining the objectives, what’s the primary objective of the site for the business and what’s the primary objective for users. In essence, describe how the website creates value.
Then we define the users and describe their needs with user personas and user stories.
“As a [type of user], I want [some goal] so that [some reason].”
This leads to a section where we describe and document the business’ and user’s functional requirements. These are the things that the site must do for the business and for the users. Functional requirements lead logically to technical requirements. This section describes the technical resources, often plugins or custom software that will be needed to deliver the functional requirements. Like I said, website discovery can be dry at this stage.
Sitemap and Page Descriptions
The sitemap is a simple diagram that shows how the pages relate to each other. There are typically three parts: main navigation, secondary navigation, and footer navigation. The sitemap shows the user flow through the website. The goal is to have the functional requirements, the things the website needs to do accessible within no more than two clicks.
Then each page in the sitemap is described in detail. This will be a two column table with the page name and permalink in the left column and a description of the elements need on the page in the right column. This gets quite detailed. And it’s important that it does. You want all the functional details captured to ensure that the design team knows exactly what they need to communicate and so that the development team knows what they need to build.
We find that this document and especially this section of the document will be refined frequently as the project develops.
The wireframe is the aspect of our Website Discovery Process that causes a lot of confusion. The intent is to represent the page descriptions graphically. It’s not intended to be the design. It’s intended to represent the pages, to rough out the elements that will be used to build each page.
It’s important to understand what a wireframe is and what it isn’t. We found this excellent description or what a wireframe is on the G2 Learning Hub. Otherwise, you will find yourself in a conversation about semantics.
“This doesn’t look like the design concepts.”
“This is too much like design, the wireframe needs to show the site functionality and the content hierarchy.”
To understand how wireframes work, think of a wireframe as a communication tool, as a bridge between the website’s functional and technical requirements, and responsive design. Don’t think of it as the design, it’s not intended to be the design, it’s intended to show, graphically “what” each page must accomplish. It’s an approach that helps designers and their clients see how the site architecture, the sitemap, will function, and it helps them understand the website’s functional/UX requirements, what needs to go where and how it works before they spend expensive Designer and Art Director time designing pages.
Conclusion – Website Discovery Process
Website Discovery will give you the road map you need to design and develop an effective website. It’s the roadmap you need to avoid costly mistakes. Function and technical requirements lead to a site map and page descriptions, which leads to wireframes of each page. Or as the Queen said to Alice,
If you don’t know where you are going any road will do.
– Lewis Carol, Alice in Wonderland
Depending on the complexity of the project, and how involved we are, Website Discovery requires two to six weeks to complete. We provide a not-to-exceed estimate and bill on a time and materials basis.
In case you need to convice the boss, we have a presentation that you can use:
Give us a call, we would be happy to discuss how our website discovery process can help your next website design project have a great beginning.