Design and Build a Website Part 1

Posted by Donna Rouviere Anderson August 18, 2015

Once we have defined the requirements for building a website, the next step is to start the designing and building process. 

Designer/Developer Session

We start with a designer/developer session where we step back and look at the big picture of the website, including all of the information we have gathered for the project and stakeholder feedback on the requirements. 
We consider any past and similar projects to predict the website's structure and movement. 
We outline the project as a narrative story that includes all of its relevant elements, strung together in order of importance, so that we include all of the important aspects. We make sure that the thread of the website’s main idea runs through it so that the project is logical, coherent and succinct throughout. We include other important ideas, all of the relevant facts that make up the project and what they mean underneath all of the labels we will put on them. 
We consider the website’s future as a result of the decisions we are making now. 
We determine the attention getter, what will initially attract the user. 
We specify all essential pages and functionality and how the website should behave, trying to visualize the ideal website to tell the narrative and create the appropriate conversation with the user. 
We ask these questions:

  • Will this product or service provide satisfaction over time?
  • What will make people buy the product or service?
  • What will make them loyal customers?
  • What message and style will be appealing to them? 

Based on the stakeholder feedback we received about the website requirements, we make sure we understand the client whose product or services will be showcased on the website. 

Design Workshop with the Client

The next step is to hold a design workshop with the client to shape the project in depth,  develop the vision for it and a plan to make its story a reality. 

General decisions

We determine five main things we can impact with the website and then decide what is the one good thing that will make the story and the project. 
We determine how to interpret these main points visually. 
We define the features of the website that add functionality and utility. These include client requests, features we found in our research, and items that we know need to be there. This includes everything that may drive the site's design.
We determine how the site moves and functions and what the navigation is like.
We identify all of the different types and attributes of the content we expect to have on the website, then identify page templates that will allow for automated production of most of the pages, with more customized layouts for special features. We are designing for two users – the end-user personas and the person who will be inputing the information. We need templates that are flexible enough to meet the needs of both.  

Various formats

We then consider how these general decisions will need to be adapted to meet the needs of various devices – mobile, tablet and desktop and how to make the site responsive. 

We storyboard the various views on the fly as we consider them – on paper or a white board so those present in the meeting can view them and provide input. We photograph each view on the white board before erasing it so we can use it for reference later on. 

This process includes consideration of the following:

  • Small logos on some pages
  • Different kinds of navigation for different devices and/or parts of the website. 
  • Different layouts, such as the need to have content in a single column on mobile devices. 
  • Click functions and how active links will be identified for the user.    
  • The use of video and how it will be hosted. 

Different devices - phone, tablet, desktop

We place ourselves in the user’s shoes with each device to determine how it will be used. 
We ask who will use our website on each of the various devices and nail down the scenarios and context in which they will be doing so.  We ask why the personas are accessing the site? What are they doing when they get there - the most likely task they need to complete. We make completing these tasks very obvious and easy. 
We make choices about what to give them on the mobile version – the top 1-3 features. Mobile sites should be primarily for quick searching and two or three individual tasks. 
We try to make sure these tasks are prominent without the need to scroll and can be instantly understood. We determine what desktop features will not be available on the mobile site or on other device views. 
We ask where the user will access the site, the lighting conditions and circumstances and the time of day and whether they also will be busy with a task not necessarily related to the site. 
We ask whether we can enhance the site to use information that the user entered previously or to influence the data the user requests.  
We ask how we can collect data automatically that will help the user – the time of day, the date, the user’s location or phone numbers. We try to leverage mobile site features such as time of day, location, ambient light, a compass, a camera, a microphone, messaging and calendar. 
Can we display suggested options that the user is likely to choose next?
We consider the limitations created on mobile devices by the keyboard and small screen. We make all buttons 40-80 pixels and type 16 point minimum. 
We optimize the site for vertical scrolling so there is a minimal need for clicking or panning left or right. 
We choose 2-3 fonts that look good together. 
We decide how to do transitions and animations to help the user experience, minimizing unnecessary animation and graphics while assisting the user in navigating the site. 
We decide how to use branding. 
We group common elements and separate the groups with white space. 
We put important controls such as search at the top. 
We go over mobile forms and determine the fields that will be needed. We try to minimize required input and provide sensible default values. We minimize the number of screens the form has to pass through. 

We consider disability needs.

Everything is sketched to determine how it will look. 

Technical decisions

We then consider with the client and the developer the technical requirements and limitations.     

Business decisions

We consider the phases of buildout and their financial ramifications. 
Business factors.
Marketing.
Sales. Figure out how to make the site:

  •     Attract interested targeted visitors. 
  •     Focus on the needs of the visitors.
  •     Keep the visitors on site and encourage repeat visits.
  •     Get the desired response - traffic and sales.

We define clearly what the client gets for the price and stick with it. We agree on funding arrangements for the website.

Summing up
We make sure we have specific measurable goals that include defining the purpose of the site, its benefits and features, agreeing on the target market and agreeing on market trends in that market.

We identify keywords and create a list of keywords that the client believes his target market would use to find his business.

We agree on start and tentative end dates, outcomes and how they will be measured.
We agree on a clear way to track the results.

Content

Content is the glue that brings together the credibility, usability, visibility, sellability and scalability of the website. Content that educates and empowers web users is paramount.
Content includes material on:

  •     The website
  •     in e-mails
  •     in press releases
  •     on blogs
  •     in videos
  •     on social media
  •     in articles
  •     in photos

We ask how we can customize all of these to serve the target market.

Content must provide value to the reader. It must have to have a human, conversational voice appropriate to the user. 

We consider the potential reuse of the materials, including deciding on formatting options.

We follow up the design workshop with a written summary and send it to the client as well as incorporating it into the project plan.

Future blogs will outline Part 2 of the Design and Build process.


« Previous | Next »