This handbook will guide you through the process of creating a clear and concise blueprint for a website or application.

How to use this handbook

Your job is to clearly define the project’s final product for both the client and the Imarc production team, while focused on creating a positive end-user experience. You’ll work with your producer, and probably with UX engineers, web engineers, creatives, and/or UX designers as well.

This handbook provides a reference for the most frequently needed activities and deliverables. We’ll focus on what their goals are and how we do them, but leave out tool-specific notes (i.e., this is not an OmniGraffle tutorial).

Team Members

For large projects, the strategy team will include most of the following roles. More often, a single person may wear several hats, and only a few people are needed.

Producer or Project Manager

Strategist

UX Designer

UX Engineer

Creative Designer

Web Engineer

The Designer, Engineer and UX Engineer(s) will stick with the project after the strategy phase is complete. This ensures that the Engineer and Designer are familiar with the plan and are prepared to execute. The UX Engineer provides consistency, shepherding the vision architected during the strategy phase and forged in production.

Process

The overall process typically looks something like this:

  1. Define project objectives
  2. Conduct discovery and report findings
  3. Define content and tools as required a. Iterate with client, comparing to objectives frequently

Imarc aims for somewhere between the extremes of Waterfall & Agile.

Since most of our projects are scoped by feature, we try to define those features before we start development and determine how we will implement them within the time allocated; that’s the Waterfall heritage.

But we know that we won’t know everything even after our discovery, and the design & development process must have flexibility. Imarc empowers designers and engineers to adapt the requirements to the situation at hand based upon ongoing dialog with the client.

As you plan the site, keep in mind that not everything must be nailed down in advance. You want to:

The Client’s responsibilities:

The Imarc team’s responsibilities:

Tips

You don’t have to document how every part of the website or app will be executed. You do have to define what they will do. Even if it’s not written down, you and the production team should have a good idea of how that will happen; this helps ensure what you are defining is doable in the time provided. If ever in doubt, talk to the person who will do the work!

The most costly problems (in schedule and dollars) in a project almost always happen because someone did not understand what they were approving. Your job is not only to get a client to approve each deliverable, but to ensure the approver understands them.

Take the time to thoroughly answer a client’s questions. If you find yourself waving your arms or saying “trust me”, that’s a pretty strong signal that neither the client nor you understand the answer.

Getting approvals

Approvals are slippery; it’s easy to misinterpret an email that just says “looks great!” as approval. You are responsible for clearly telling the client what they are approving, and getting a clear and explicit approval.

The exact form of the approval is unimportant; what matters is that you and the client agree on what that form is. That might be literally signing a document and emailing or faxing it, or it might be clearly stating in email “I approve the wireframe Homepage-v5.pdf”.

Once approved, the deliverable doesn’t change again without a very, very good reason. Because of this, you may find that a client is reluctant to approve a document. That’s fine. Just explain that you cannot proceed to the next stage until they are comfortable approving the document, and try to identify and address whatever it is that worries the client.

Types of Projects, Types of Clients

Each client and project will have different audiences, content, goals. However, projects generally fall into one of the following domains:

  1. Business to Business (B2B) sites are marketing services or products to businesses. B2B projects tend to focus on lead generation, brand awareness, and serving existing customers.
  2. Consumer (B2C) sites sites are selling services or products directly to individuals (consumers). B2C projects tend to focus on merchandising, conversion, and customer support.
  3. Web Applications are only websites by co-incidence; these applications help their customers do things. App projects tend to focus on workflow, efficiency and ease of use.
  4. Non-Profit Services usually function similarly to a B2B or B2C site, depending whether they serve the public directly, or are oriented to other organizations, companies or funders.
  5. Membership Organization sites combine elements of direct-to-buyer marketing, web applications, brand awareness, and serving members. Imarc has created many such sites for state CPA associations in the United States.

Pre-production

In this section:

Purpose of this activity

Have you ever stood up to speak, with no idea what to say? Yes? That’s for wedding toasts. Everybody else does their homework. Before you kick off with the client, you need to have a good understanding of who the client is, what they are trying to do, and how you’re going to help them do it.

Background research and reading

Do your homework.

Start with the proposal or statement of work. It defines the project scope, suggests features and functionality, and usually includes quite a lot of background research and client goals.

The proposal was created by Business Development, who have probably spent weeks or months building a rapport with the client and understanding their needs. Use that to your advantage! It’s an excellent source of intelligence about the client’s goals and needs.

Be sure you can answer:

Make a list of all activities and deliverables that were proposed, and make sure they fit within the time budget defined in the proposal. With your Producer, decide who on the Imarc team will perform the activities.

Internal hand-off and team briefing

There will usually be a formal hand-off from the sales team to the production team. Before this, make a list of outstanding questions you have from your background research. The hand-off is your chance to ask the sales team for answers or ideas. They may not have the answer, but they probably can help you figure out who on the client team you can ask. Remember, the sales team has been working with the client for weeks or months already — they know a lot. Use it.

Discovery, Research & Planning

In this section:

Discovery Kick-off Meeting

You’ll start with a meeting (best) or conference call (acceptable) with the client stakeholder team. 90 minutes is a good amount of time to budget for this initial meeting (complex projects may need more). At the kickoff, you’ll discuss the project goals, their current business environment and growth objectives, review client’s current site, and identify competitor sites and exemplars for follow-up. (This is often a precursor to a full Competitive Analysis.)

This meeting serves several purposes:

  1. Process. You’ll introduces the client to our process, the activities we’ll be doing together, and the deliverables they can expect to see.
  2. Expectations. Explain to the client what kind of information you need, how you will present work, and how and when they will provide feedback. Many clients are worried about how much time they’ll need to put in; give them the best guidance you can.
  3. Start Discovery. You and the client team will review and refine the project goals, audiences, objectives, content, functionality, competitors and benchmarks.

You should prepare an agenda, and provide it the client before the meeting. This agenda should contain a list of discussion topics, such as:

As larger projects often have many goals, yet do not have unlimited time and resources, it’s important to prioritize goals. A group card sort activity with the core client team (3–6 people) can be very effective in both establishing priorities and in ensuring the entire client team is in agreement on them.

Research Activities

Depending on budget and goals, a number of research activities may be incorporated into a project.

Most are qualitative, meaning they depend heavily upon the expertise and experience of the researchers—for example, interviews and hallway testing. Some are quantitative, meaning they are designed to produce a measurable result — for example, surveys and analytics. Designing meaningful quantitative research takes time, budget and substantial expertise; few projects actually require this, but the ones that do will benefit greatly.

Interviews

Interviews are an effective way to rapidly gain understanding of a project’s audiences, goals, requirements, constraints, and available resources.

Interviews almost always turn up new information, issues and objectives. Whether you are talking to stakeholders, users, or customers, your job is to understand and document their pain, aspirations and requirements.

Stakeholder Interviews

Stakeholder interviews have two objectives:

Stakeholders often mistake their own needs for their users’ needs. It’s our job to help align stakeholder’s goals with our users’ needs.

Often, the needs of different stakeholders must be balanced or prioritized. Interviews help us make informed recommendations, and our clients to make informed decisions (and, often as not, compromises).

Even if the client’s senior stakeholders aren’t in every meeting, the client team and strategy team should be aware of all people with decision making or veto authority.

When estimating time requirements for interviews, be aware that preparing to interview senior stakeholders effectively is staff- and time-intensive. Expect to spend twice as long preparing, and to get half the time you can get from others.

Some organizations will have people who are in daily contact with users or customers, and have valuable insight into what makes them “tick”. Customer service and technical support teams are often treasure troves of insight, with “on the ground” knowledge dwarfing that of sales and marketing personnel.

Customer or User Interviews

By talking to users or customers, we can learn not just what users are doing, but why. The better we understand their motivations, the better we can fulfill their needs.

Interviews can explore concrete items, such as user interface, document flow, feature importance, technical knowledge, or devices used (pc, tablet, phone…). But to be most effective, interviews should explore more fundamental issues.

User interviews can take place in person or remotely. We create a script and a list of questions to ensure consistency.

Templates

//fileserver/files/UX/templates/Interviews/
Both internal stakeholder and user interview templates are provided.

Competitive Analysis

You should understand how your client’s competitors use their online presences, learn from good practices and avoid their mistakes. Look for patterns and best practices in content, layout, navigation, workflow, SEO, and social media.

You should look for patterns and best practices among:

Beware! Just because something commonly is done a certain way does not mean it is the best way. You should use your own judgement; the goal of a competitive analysis is not to comply with the lowest common denominator, but to find the very best practices.

Templates and Tools

Surveys

Use surveys to gather information from a large number of participants, yielding quantitative results.

Ideally, questions should be close-ended (multiple choice, Yes/No, True/False). This makes it easy for participants to respond, and easier for us to analyze. For example, “We found that 83% of participants prefer to book their ferry ride online between 11am and 2pm on weekdays.”

Open-ended surveys can be helpful in specific scenarios, such as to get input from stakeholders who cannot attend intervews or meetings. It’s not ideal; unlike in an interview, the moderator can’t probe answers. And even free responses will tend to answer only the questions that we already know.

Surveys can only answer the questions we know to ask; unlike interviews and usability testing, they rarely produce novel findings.

Watch out for confirmation bias creeping into survey design and interpretation.

A note on incentives: Some clients may wish to offer an incentive to participants. When included with the invitation (for example, an Amazon gift code redeemable regardless of participation), this can increase participation rates by up to 19%. However, the promise of an incentive after completion has not been found to be effective, nor has entry into a prize lottery.

Web Analytics

We review web analytics to better inform decisions, and to set a baseline to measure the site’s performance in the future. You’ll look at user activity, page flows, content popularity, and traffic sources.

Topics include:

We also identify the most important performance metrics that the client should follow in the future. The exact metrics will vary from project to project, but in general we will define several general and specific indicators:

Templates needed

Personas

Needs description, examples, templates.

Card Sorts

Projects often have many goals, yet do not have unlimited time and resources. A group card sort activity can be very effective in both establishing priorities and in ensuring the entire client team is in agreement on them.

A small-group card sort is performed in person with the core client team (3–6 people). Cards are prepared in advance with all known project goals, and blanks are available to create new ones. The team is asked to sort the goals into groups (typically “High”, “Medium”, and “Low”). Not only do priorities emerge, but the conversation within the client team clarifies why cards go into each group.

Sample card sort

If the stakeholder group is very large or geographically scattered, an online card sort may be appropriate. This also allows us to segment participants into “core” and “advisory” groups for separate analysis; if significant differences are found, this should be immediately raised and addressed with the client.

This technique is also effective at prioritizing audiences or brand attributes.

An “open sort” exercise, in which card groups are created on the fly by participants, is very useful for organizing information. (But be aware that creating groups and finding content in groups are different cognitive tasks; use a tree testing tool such as TreeJack to test content findability, not a card sort.)

Reporting to Client

How you report your findings to the client will vary, but the purpose does not: You need the client to know what you found so they will understand your decisions, and you need to give them a chance to correct or expand upon the results. No research is perfect; if your client doesn’t have anything to say about it, something is wrong!

Common formats include:

Templates

needs links to examples on fileserver

Information Architecture

  • Content Strategy
    • Content Audit
    • Content Requirements
    • Mapping gaps & identifying sources
    • Working with the client to plan content development – realistically.
  • Architecture
    • Site Maps
    • Testing the IA
    • Guiding Client Feedback and Obtaining Approvals
  • SEO
    • Research
    • Considerations

User Experience & Interaction Design

In this section:

Experience Kickoff

The experience kickoff is an open discussion that explores design and user interface concepts by looking at concrete examples. You and the project’s lead designer will lead the client through a review of key goals and audiences, brand personality and tone, content and messaging, page density, color palettes, navigation styles, animations, photography, etc.

You’ll find yourself answering some common questions:

This exercise sparks conversations around design that gives Imarc’s creative team insight into the visual direction they should head, and the UX and client teams with a common grounding in the messaging, content and navigation models that will work well for the client’s audience and goals.

Work with the designer to prepare the experience kickoff website. You’ll need to provide:

Meet with the designer before the kickoff to decide who will lead the meeting. Usually, you’ll divide up the session, with the designer focusing on visual elements and the UX/strategist focusing on goals, audiences and content.

If the meeting is remote, be sure your producer has reserved a conference room, a dial-in and screen share for you, and has sent the screen share and dial-in to all the client team members.

Templates

TODO: Make a standard template for this

Wireframes

A wireframe is a low fidelity representation of a design that connects the underlying conceptual structure (information architecture) to the visual design of the website. A wireframe should clearly show:

Wireframes are useful for rapidly iterating on the underlying functional design a web page or application. It helps to visualize ideas and to gain consensus among stakeholders. The wireframe’s simplified, colorless aesthetic allows us to focus on content and function instead of being distracted by creative design.

Wireframes usually are annotated to describe behaviors, functionality, and content needs.

Guidelines

Limitations

Wireframes aren’t perfect. Some common problems (and solutions) include:

Tips on presenting, getting feedback and approvals

Before you show the wireframes, repeat for the client’s benefit the goals the wireframe must accomplish, show the site map that underlies it, and remind them that the wireframe is not a creative design.

Share the wireframe and walk through it. Don’t just give a real estate tour from top to bottom; instead show how each element accomplishes one of the goals of the page.

Remember, it’s your job tell your client how to give you feedback. Explain that if they think something doesn’t work, we need to understand why it doesn’t work. They don’t have to have a solution (that’s your job), just to define the problem.

Keep in mind that your client has deep expertise and knowledge of their business and audiences. Listen carefully to what they have to say. Don’t be afraid to ask questions and dig deeper.

As noted earlier in this document, you’ll need to get an approval at some point. Enlist your producer for help. It’s your job to clearly tell the client what they are approving, what will happen after they do, and answer their questions.

Examples

Single-page Wireframe

Example Wireframe

Workflow Diagram

Example Storyboard

Templates

//fileserver/files/UX/templates/wireframes/

Usability Testing

The best way to find out what does or does not work well is by asking real people to try it.

Common kinds of testing:

When planning a structured usability test, it’s best to start with a list of questions that need answering, such as “can users easily sign up for a workshop?” or “does breaking the checkout into three steps make it easier to use than the current site?”

Next, create a formal task list and script, recruit up to 5 users (at most), and one at a time sit with each of them in front of a computer and ask them to perform specific tasks. One person runs the test, being as careful as possible not to lead the tester; other team members may observe by screen-share and one-way audio.

The script helps to ensure consistency; video recording the screen lets us revisit the tests.

Marcel Moreau conducting user testing

Documenting Requirements

  • Purpose of the requirements document
  • When to use them, and when not too
  • Just enough detail
  • Reviewers (engineers, creatives, PMs, clients)
  • Guiding Client Feedback and Obtaining Approvals

Appendix: Tools

The most important qualification for a tool is fitness for purpose. We constantly evaluate alternatives; if you think a tool shows promise, try it out; if it works well, add it to Handbook.

Wireframes and Site Maps

OmniGraffle Pro is our primary tool for creating site maps and wireframes.

We have created an OmniGraffle stencil with our most commonly used wireframe components. You can get the latest version from our fileserver.

Documents

Keynote is our preferred on-screen presentation tool. If cross-platform compatibility will be required, we use PowerPoint. (Reveal.js is handy for web-based presentations, but HTML & CSS knowledge is a prerequisite.)

We frequently use Google Docs for collaborative authoring and editing. Google Docs should not be created or edited using personal accounts; only use your imarc.com account.

We use Word for some documents, but are not great fans of it. We appreciate Word’s .docx file format for its superior change tracking capabilities.

Branded templates for Word and Keynote can be downloaded from the Imarc Google Drive.

Research and Testing Tools

Surveys: Survey Monkey for user surveys.

Tree Testing: Treejack for testing content structure and navigation. Somewhat expensive, so we turn the subscription on when needed, then de-activate.

Card Sorting: OptimalSort is used for remote card sort exercises. (Here are some others; we haven’t yet tried most of them.)

Screen Recording: Camtasia is reasonably good for conducting in-person user testing. Camtasia records the session screen and audio.

Screen Sharing: Join.me for remote user testing, as well as presentation and remote working sessions with clients.

A/B Testing: Optimizely is our go-to for testing variations of an existing website. (See also this A/B Test Sample Size Calculator.)