Need a New Website? Wait! Have You Gone Through a Discovery Process?Hashtag: #13NTCDisc

Sean Larkin & Brett Meyer

Friday, April 12, 13The following presentation was prepared for the 2013 Nonprofit Technology Conference by Sean Larkin and Brett Meyer of ThinkShout, Inc.

ThinkShout is an open source technology consulting firm located in Portland, OR. We provide Internet Strategy and Drupal web application development services to forward-thinking organizations. For more information, please contact us at: http://thinkshout.com.

To comment on this session via Twitter and/or to ask questions during the presentation, please use the hashtag: #13NTCDisc.

Session Subtitle:

Website Discovery Process (#13NTCDisc)

Everybody wants a pony...

Friday, April 12, 13

Website Discovery Process (#13NTCDisc)

But there are many types of ponies.

Friday, April 12, 13

Website Discovery Process (#13NTCDisc)

So let’s avoid making assumptions.

Friday, April 12, 13

Session agenda

• Queuing up success (15m)

• Goals, motivations and target audiences (40m - including group exercises)

• IA, wireframes and design (15m)

• Technical planning & budgeting (5m)

• Tools & takeaways (5m)

• Questions & hopefully answers (5m)

Website Discovery Process (#13NTCDisc)

Friday, April 12, 13The majority of this 90 minute session will be spent doing hands on exercises with session participants to explore the “Goals, motivations, and target audiences” for a website redesign.

Website Discovery Process (#13NTCDisc)

Disclaimer:No ponies where hurt in the making of this presentation.

Jokes are made with good intentions.

Friday, April 12, 13Note: It is easy in a session like this for the presenters and session participants to joke around about past web development projects that might not have been as successful as stakeholders had hoped. In this slide, we want to point out that the presenters and session participants should feel free to speak freely, but we all need to keep in mind that this sort of work is difficult and everyone involved in such projects does their best given their experience, availability, budget and other constraints.

Core concepts

Website Discovery Process (#13NTCDisc)

• Websites are tools that promote behavioral change

• Content is King

• Understanding what’s at stake, and for whom

• The challenges of working with people and technology

• Waterfall vs. Agile in planning and development

Friday, April 12, 13

Website Discovery Process (#13NTCDisc)

Websites should promote behavior change

• Nobody outside of your office understands 95% of what you say at work

• The Curious, the Concerned, and the Committed

• The “Ladder of Engagement”

Friday, April 12, 13Funny note: “Brony” is an Internet meme referring to 20-something year old men who enjoy “My Little Pony.”

Point #1: When approaching a web redesign, nonprofit stakeholders should keep in mind that it’s easy to fall into using internal jargon when communicating to external audiences. For example, we see this a lot in the environmental movement, where scientific terms and acronyms such as “watersheds” and “TMDLs” find their way into outreach materials.

Point #2: Our goal in web site redesigns is to turn audiences who stumble into our work or are curious about our work into people to are concerned about the issues we work on. In turn, we want to inspire people who are concerned about our issues to become generally committed to our organization’s overall cause/purpose.

Point #3: We often describe this progression as the “Ladder of Engagement.”

Content is king

Website Discovery Process (#13NTCDisc)

• There’s no substitute for good writing and compelling multimedia

• Good content is often less expensive than functionality

• Content can be used across channels

• “Mobile First” = Design for real content

Friday, April 12, 13See the following resources on “Content First” mobile strategy:

Understanding & communicating with stakeholders

Website Discovery Process (#13NTCDisc)

• Risks: What’s at stake? And for whom?

• Time constraints and experience gaps

• Everyone in your organization can’t care about every decision

• Getting buy-in and managing expectations

• Write out roles - most importantly internal roles

• Stakeholders gotta get real (about tolerance & risk)

• The importance of reporting back

• When to choose vendors? How vendors need to work together

Friday, April 12, 13In this slide, we speak to the fact that it’s important for all stakeholders in a web redesign process to understand everyone else’s expertise and experience in these sorts of processes, as well as to think critically about when and how various stakeholders engage in this work. Not everyone can be part of every decision regarding a complex redesign. So, stakeholders need to communicate clearly regarding the decisions that they do care about.

A large part of web development, particularly in discovery, is getting stakeholder buy-in. This is facilitated by continually “reporting back” on the project’s progress.

At the end of this slide, we will also talk about the art of working with paid vendors, when to bring them in, what roles they should play, and how different vendors can be best set up for success in partnering on a project.

Waterfall vs. Agile....and getting things done

Website Discovery Process (#13NTCDisc)

• What are the risks?

• The variables: money, time, clarity, buy-in, quality

• When to plan vs. when to prototype and/or iterate

• When to bring on vendors in this process

• Juggling flexibility with accountability

• How much to spend on upfront requirements gathering?

• Getting to the MVP (“minimal viable product” release)

Friday, April 12, 13In this slide we explore the two main project management methodologies and discuss the costs of planning and/or iterative development.

Let’s kick off Discovery

Website Discovery Process (#13NTCDisc)

Friday, April 12, 13At this point, we will begin the hands-on exercises.

The Equation:

Website Discovery Process (#13NTCDisc)

Your organization’s

goals

Your audiences’ motivations

Money & Time

The content, design, and functionality you release

+ + =

Friday, April 12, 13

Understanding your organization’s goals

Website Discovery Process (#13NTCDisc)

•Design Questionnaire

•Card sorting exercise (Now, let’s try it!)

Friday, April 12, 13A sample design questionnaire is provided as a resource at the end of the presentation.

Society for the Advanced Awareness of Animals Riding

Other Animals

Website Discovery Process (#13NTCDisc)

Friday, April 12, 13Our discovery exercises will be based upon a fictional organization: The Society for the Advanced Awareness of Animals Riding Other Animals.

The photos on this slide are taken from: http://animalsridingotheranimals.tumblr.com.

Understanding your target audience(s)

Website Discovery Process (#13NTCDisc)

•2 card sorting exercises

•Identifying and prioritizing target audiences

•Examining their motivations

•Persona documentation

Friday, April 12, 13A sample persona worksheet is provides as a resource at the end of this presentation.

User Stories

Website Discovery Process (#13NTCDisc)

Card-based features brainstorm

Friday, April 12, 13

Bringing it all together

Website Discovery Process (#13NTCDisc)

The “Cores & Paths Exercise”

Friday, April 12, 13The “Cores and Paths” exercise was developed by the firm: Boxes and Arrows.

And finally....

Website Discovery Process (#13NTCDisc)

The Requirements Gathering Brief

Next up: Information Architecture

Friday, April 12, 13Note: we do not have a generic “requirements gathering brief” document to share with the session participants, because these are highly-customized and sensitive documents. We will speak to what they should contain however.

Information architecture

Website Discovery Process (#13NTCDisc)

1.First pass at Entity Relationship Diagram

2.Site map development - Round #1

3.Clickable wireframes - Round #1

4.Budget Check

5.Detailed Entity Relationship Diagram/Specification

6.Clickable wireframes - Round #2

Friday, April 12, 13At this point in the presentation, we will show a number of examples of each of these documents/resources.

It’s important to note that IA documentation is iterative. We often jump between deliverables as they build/complement each other. The site map and wireframes in particular work together to help us understand how content relates. Wireframes must also be checked continually against budget/time constraints for the website redesign.

Graphic Design

Website Discovery Process (#13NTCDisc)

1.Design brief and style guide

2.Design in the browser

3.Style tile development

Friday, April 12, 13At this point we will show a number examples of these design deliverables and how they relate to clickable, responsive wireframes developed in the Foundation prototyping framework.

Project Plan and Schedule

Website Discovery Process (#13NTCDisc)

1.Finalized implementation budget

2.Content matrix

3.Development schedule and project plan

4.QA plan

5.Training plan

Friday, April 12, 13

Kicking off development

Website Discovery Process (#13NTCDisc)

• You can iterate on discovery documentation, but version control it!

• Iterative development cycles with weekly deliverables (Don’t cheat on this)

•Report back to internal stakeholders every week

Friday, April 12, 13

Tools of the trade

Website Discovery Process (#13NTCDisc)

• Note cards, note cards, and more note cards

•A camera....

•Google Docs (no MS Word Docs)

• Trello, Stormboard or Stixy

• Pinterest

•Omnigraffle

• Foundation wireframes

•GitHub Pages

•ThinkShout’s collection of sample Discovery docs

Friday, April 12, 13

Evaluate This Session!Each entry is a chance to win an NTEN engraved iPad!

or Online using #13NTCDisc at www.nten.org/ntc/eval

Friday, April 12, 13