The discovery session is a two-hour to two-day meeting that begins with an overview of the requirements and history of the project. Clients are instructed on the difference between business goals and users goals, with examples given for both. This is followed by a discussion in which the project's top business goals are identified; for example, what is the single most beneficial event that you want to happen when someone visits your site? second? etc.

A user segmentation analysis is then performed, detailing the different types of users, their likely personnas, and their desired flow through a site. For each user type, a discussion occurs about how to align the user goals with the business goals, funneling the user to a measureable success event that satisfies both parties.

Usability testing options are also offered at this meeting, with an explanation of the associated benefits, processes and costs.

Goals of the discovery session include:

• To allow the clients an opportunity to describe their business requirements
• To provide a description of the processes and how they will be specifically applied to this project
• To define short- and long-term project goals
• To define user segmentation and understand the business and user goals

Benefits of the Discovery Process

• Get both teams on the same page with regard to audiences, deliverables and requirements
• Reduce the risk of confusion by clearly defining all requirements and having the client approve them before proceeding
• Introduce and receive buy-in from the client on the design/development process

Typical Deliverables

• User segmentation flow chart
• Site map, future and current
• Usability test plan

 

 

Once the project goals and user flows are defined, two components are worked on simultaneously to create the foundation of the site design - a moodboard and a wireframe set.

The moodboard helps establish the branding, design components, imagery, and color palletes that will be incorporated in the design. Much the way an interior design will initially put together a swatch panel showing the fabrics and colors that will be used in designing a room, the moodboard establishes the aesthetic direction of the site. It is a good way to involve the client up front with the design process without negatively impacting the flow or structure of the site.

On the opposite spectrum, wireframes provide what equate to an architectural blueprint of how the site will be organized to accomplish the goals set forth in the discovery session. This is the best way to focus the client on the strategy behind how a site is structured, independent of the colors and branding, which can sometimes distract the client from the end goal. This step is often where the most important discussions occur with the client, as it is here that the you are visually outlining the site's functional framework.

Once both a moodboard and wireframe are finalized with a client, much of the work is already done. You know how the site should be organized and layed out and, generally, what graphical form it will take. This makes the design mockup phase much easier to complete.

Benefits of the Moodboard/Wireframe Process

• Separates strategy and design to provide proper focus on each
• Involves the client with the design process in a non-destructive manner
• Speeds the next phase of the process, design mockups

 

 

With the moodboard and wireframes complete, you have already made the major decisions regarding how the site will come together. You have a guide for colors, mood and branding, and blueprints for where things should go. The next step is to essentially merge these two elements to create design mockups. Often, this can be done with just one initial version of each page and a few rounds of a revisions - the clients at this point won't be seeing anything that surprises them. They feel connected and involved in the process..

Design mockups are typically created for the homepage, any pages involved with critical user flows, and a few unique content page templates. When designing the pages, special consideration is given to the next step - CSS/HTML production. Pages are designed in a manner that satisfies the branding and design goals, while remaining as efficient as possible to generate from a coding standpoint. For example, if you have a box on the homepage that contains a series of links, and you have a similar component on one of the content pages, you should design both so that styles can cascade effectively to create that treatment on both pages, and throughout the site as necessary. It is a good practice both from a production efficiency and usability standpoint, as consistency in design inherently leads to a more intuitive interface.

At this step, attention also needs to be paid to SEO optimization. Ensuring proper keyword density, search-friendly links and keyword specific title tags, for example, will improve the performance of the site down the road.

 

 

Once design mockups have been approved, the next step is the buildout of the CSS/HTML code. Tableless CSS-based production is the recommendation here for several reasons:

Benefits of CSS Production

• Lighter code base - leads to improved download times
• More search engine friendly - less HTML markup makes it easier for search engines to identify and index keywords
• More flexible - easier to make global site design and layout changes
• Better workflow - by separating code base from the presentation, developers and designers can work together on the same files without stepping on each others' toes

Rather than building out every page in a site, one method commonly used is to put all page components on a single page and build a stylesheet in the most compact way possible that will properly style all areas. Once this is complete, the components can be placed into containers to compose the individual pages. This is better for developers as well, as sites are often developed in a similarly modular fashion. Anything that can be reused from one page to the next is developed as one code fragment that is called multiple times. A strategy similar to that is employed with effective CSS production.

Samples

The following samples demonstrate the power of CSS production. The following four boxes all use the same HTML markup, with the only change being a class appended to the surrounding container. The stylesheets are controlling all differences in the look and feel. Although this is just one container, it is easy to see how simple stylesheet changes can dramatically impact the look, even the organization of a page.