Human Centered Design: Key to Great Websites

When you’re surrounded by a team of awesome developers, you might think that a statement such as, “Great Websites are Created before the First Line of Code is Written,” isn’t going to be met with a lot of enthusiasm.

As it turns out, our developers tend to be among the greatest supporters of the kind of Human-Centered Design engagements that get all stakeholders on the same page and create a roadmap for transformative possibilities. 

The point of the above statement, which is also the title of a presentation that Promet’s Chris O’Donnell has been delivering at DrupalCamp events all over the country, is not to downplay the importance of the impeccable coding that makes great websites work. No one doubts that. Our point is that when web development is fueled from a foundation of: 

• collaborative problem solving, 
• elimination of  assumptions,
• deeper knowledge transfer, 
• empathy for users, 
• early stakeholder alignment, and 
• excitement about what’s possible,

everyone benefits and work is a lot more fun.

Getting it right at the start makes sense for a lot of reasons. Teams are happier and work proceeds with a higher degree of efficiency. At the same time, the impact on cost is a factor that is seldom acknowledged to the degree that it needs to be. Consider the following observation from noted software engineer Tom Gilb:

“Once a system is in development, correcting a problem costs 10 times as much as fixing the same problem in design (concept). If the system has been released, it costs 100 times as much…”

Read: How to Win at Remote Project Management

The Luma Institute graphic below powerfully illustrates the difference in the relative cost of getting it right in the concept phase, vs. fixing during the build phase, vs. fixing after release.

 

 

Human Centered Design vs. Agile Development

Questions concerning “agility” frequently emerge in our conversations with clients and offer an excellent opportunity to clarify some important issues. Human-Centered Design initiatives focused on getting it right, right from the start, are in no way at odds with the idea of agile development. 

The clear vision and collaborative energy that emerges from Human-Centered Design activities often helps to inform and enhance agile development. 

An all-to-common misunderstanding about agile development is that it’s about avoiding the discipline of an actual plan. Not true. Agile development is a real-world development methodology that does not close off the possibility for mid-course refinement. An agile plan plays out within a series of sprints. Each sprint is reviewed before moving on to the next one. If the review reveals an oversight or issue, it can be quickly addressed. 

Prioritization is key with Agile for sprint planning, and Human-Centered Design helps gain consensus on what is important.

The world’s most agile process, however, is up against an uphill battle in trying to reset the course of a project that was based on inadequate or faulty information from the start. Ensuring that projects get off to an excellent start is at the core of what Human-Centered Design is all about.

Read: Invent Your Own Development Methodology

 

Going Wider, Digging Deeper 

The activities within a Human-Centered Design workshop continuously build upon knowledge collected and insights gained for purposes of:

• Identifying stakeholders
• Prioritizing stakeholders
• Identifying strengths, problems, and opportunities in current system
• Grouping strengths, problems and solutions within agreed-upon categories 
• Identifying solutions 
• Prioritizing solutions

Let’s take a look at a few components of a Human Centered Design workshop.

 

Stakeholder Mapping

Stakeholder mapping results in what is essentially a network diagram of people involved with or impacted by the website. Typically, there are a lot more stakeholders than the obvious end users and stakeholder mapping evaluates all the possible users of a system to then identify the key target audiences and prioritize their needs and expectations. 
 
Stakeholder mapping is an excellent activity for:

• Establishing consensus about the stakeholders,
• Guiding plans for user research, and
• Establishing an empathetic focus on people vs. technology.

 

 

Persona Development

The next step following stakeholder mapping is the creation of persona information in order to understand the range of differing needs from the site for purposes of tailoring solutions accordingly. 
 
Defining the distinct personas for whom the website is being designed serves to clarify the mindset, needs and goals of the key stakeholders. Giving each persona group a name provides a quick reference of key stakeholders and serves as a constant anchor for conversations moving forward.

 

Drupal-Specific Rose-Thorn-Bud

Adopted from a Luma Institute collection of exercises, the goal of Rose-Thorn-Bud is to quickly gather a significant amount of data in response to a specific question or the current system in general. During a Rose-Thorn-Bud activity every individual’s opinion ranks equally as responses are gathered on colored Post-it Notes for labeling attributes as positive (rose), potential (bud), or problems (thorns).

The post-it Notes are gathered and grouped on a white board according to identified categories. The collection and organization of large amounts of data in this manner serves to highlight prevalent themes and emergent issues, while facilitating discussion. 

During Chris O’Donnell’s “Great Websites are Created before the First Line of Code is Written” presentation at Drupaldelphia, attendees were invited to respond to the following problem statement: 

Drupal 8 as a viable CMS for small business / small organization needs.

Each participant was encouraged to contribute ideas to 10 post-its -- within any of the three-color categories. All of the contributions were then “voted up” in order to poll attendees and achieve a level of consensus among the group.

Results of that exercise can be found here. 

 

Drupal-Focused Statement Starter

Statement Starters are evocative phrases to ignite problem solving within teams and challenge teams to restate the problem from differing perspectives within a framework of “We could …” and “We will …” 

The way a statement starter is worded is important. It needs to be an open-ended question that requires more than a yes or no answer. Effective statement starters such as, “How might we…”, “In what ways might…”, “How to…”, and “What might be all the …” help to encourage the generation of explicit problem statements.

Conversely, closed-ended statement starters such as: “Should we…” and “Wouldn’t it be great if… tend to yield a yes or no answer” or less specific responses.

The statement starter presented to attendees at the Promet-led Drupaldelphia event, was:

How can we increase Drupal 8 adoption outside of the “enterprise” space?

Their responses are recorded here.

 

Importance / Difficulty Matrix

Inevitably, some of the ideas that emerge will spark excitement for the strategic leap forward that they could represent. The required time and resources to move forward with them, however, might exceed current capabilities. Other ideas might fall into the category of Low Hanging Fruit -- initiatives that can be achieved quickly and easily.

Plotting every idea on an Importance / Difficulty Matrix is an essential group activity that sparks conversation and accountability concerning Who, How, and When -- transforming good ideas into action items.

 

 

Why Human-Centered Design?

In the current environment, organizations tend to be defined by their digital presence. The stakes for getting it right are high and the margin for error is low. Optimizing ideas and perspectives at the outset, and continuing to iterate with feedback creates a strong starting point that serves as a superior foundation for web solutions that are capable of heavy lifting over the long haul. 

Interested in learning more about the possibilities for a Human-Centered Design workshop in your organization? Contact us today.