AB what? Blood, Branding, and UX Process

Not AB testing. I'll leave that for another day. AB blood! I donate blood regularly, and I thought of being a geneticist for about a minute during advanced biology in high school. So, of course, the oft-used example of blood-type inheritance is familiar to me. When I saw comments in a social media post about the rarity of O+ blood (it's the opposite, O+ is the most common type), I wanted to see the actual facts from a legitimate source before I chimed in. That led me to the American Red Cross, with whom I volunteer and donate regularly. My nature is to follow all those glorious tangents when I am reading. (Lord help me when I am reading text with significant "related information" or footnotes!) So, of course, I read about blood-type inheritance as well. That's where things got interesting--and provided the impetus for this post.

I am blood type A and my mother was blood type O, which means my dad was A or AB. (Just trust me for now. There is a link later that you can follow to read more.) I was scanning the chart that shows blood-type inheritance on the Red Cross site and read something odd. The chart showed that someone with (O,A) parents could have only O. And (O, B) could result in O or A. Furthermore, the chart indicated that (O, AB) parents could have a child with blood type O. What?! Anyone who remembers high school genetics knows that (O.A) results in A, (O. B) results in B, and (O, AB) results in A or B.

Here is a screenshot of that strange chart that challenged my (superior!) high school memory.

Incorrect Content: Blood Type Inheritance Chart Example

You see it already, right? The inherited blood type row headings are moved a column to the left, throwing off the entire chart. I did not notice it at first because I was focused on the challenge to my own recollection of facts (content) rather than the presentation of them (format). [Now you are starting to see where I am going with this, right?] The facts were, indeed, correct. The presentation of those facts misrepresented them as incorrect.

That is a pretty big deal. And I was shocked that an organization like the Red Cross would make such an error--and that it would be undiscovered for so long. Surely, I am not the first nerd -uh- person to actually read the information about blood type inheritance.

Lightbulb Moment

Wondering about how this mistake could have remained undetected and uncorrected led me to another thought. Maybe it hasn't. [Just when you thought you were following me, I lead you down another rabbit hole.] I will explain. But first, let's talk about the impact of the error on user experience and brand.

UX of Branding and Content

The Red Cross site typically provides a good user experience for casual surfers. The incorrect blood-type inheritance information chart surprised me. How could the Red Cross, of all organizations, display incorrect blood-type information? Remember that it took me a minute to determine that the table format was bad, not per se the content. And that pause is key. People who are not tasked with delivering content likely will never look past the initial problem. They will either:

• not recognize any error and consume the incorrect content
• see a content error and abandon the site 
• recognize the error as presentational and abandon the site 
• recognize the error as presentational, nerd out, and figure out the correct content [this group apparently consists of one person to date]

Each of these scenarios is bad. At the very least, the authority (ethos, for my fellow nerds) of the organization has been diminished. Its brand has been tarnished.

The incorrect information has led to poor user experience. UX is not merely the design and flow of a site or product, it also is the content itself, which should be correct, usable, accessible, and appropriate. In this instance, the Red Cross site did not pass the UX test of correctness. Never mind that the authored content is correct. The presentation of the content is incorrect, which makes the delivered and consumed content incorrect. [Do you see why I like DITA XML and structured authoring, which separates content and presentation?]

Poor user experience can lead to users abandoning the site. Much is expected of large organizations and organizations that are highly regarded or prominent, leading to high standards even in areas that are not their focus (such as a web site). The loss of ethos could lead to a reduction in donations and volunteers for Red Cross.

Seeing this delivery error in a site that typically provides a good user experience [forgoing discussions of user authentication and targeted search for now!] made me me wonder why they would fail in something so simple without discovering the error. Hence, that lightbulb moment from before. The issue is platform specific.

UX of Platform and Context

Like most of my web searches, I looked up the blood-type information on my iPhone. The first (Google) search result was a link to the Red Cross mobile page for blood type information. That's where I encountered the badly-rendered table.

An aspect of good user experience is to provide a mobile user with a link to view the full web view on mobile instead of the minimalized mobile view. The Red Cross site provides a Full Site link (or button, depending on how you got there) on the mobile view site (m.redcross.com) that goes to www.redcross.com. Sure enough, the table was perfectly rendered on the "full" web site.

Correct Content: Blood Type Inheritance Chart Example

So only users who use the Red Cross mobile site see the error. Outside of location and specific event traffic, I imagine that the Red Cross website probably is viewed on PCs more than on mobile devices. This is a theory, I have no empirical evidence to support it. but the continued existence of the badly-rendered blood-type inheritance table does lend credence to my theory. The reach of the error in this particular existence is limited. But the issue here may be greater than the impact of this particular error.

UX of Development, Validation, and Process

The cause of the table error is not clear. Either the content itself is different for mobile and web sites or the rendering is. Obviously, rendering is the ultimate issue. But rendering where? Were two different sources used (and the table rendered in the source content) or was the error introduced during mobile site rendering? Even with responsive web design, these types of errors can occur. The first error can be avoided by using a common source for content (single sourcing) and using platform conditions to identify content to serve. This can become quite complex, leading some organizations to simply create separate content for different platforms or contexts. [The horror!] The second error can be addressed by religiously checking conversion and rendering scripts, CSS, and code.

Why was the content not tested on the mobile site? It probably was. But every single snippet of information--particularly generated content--typically is not tested. With automatic content generation, once the process is validated, the content generation typically works without a problem (until a new situation is encountered). If generation and rendering scripts have worked in other instances, they would not be questioned. And if the error was in the platform rendering itself rather than pre-formatted table content, the content author would have no reason to believe there is a problem.

Without knowing the source(s) and method(s) used to create this particular table, it is impossible for me to identify the origination of the problem. But the problem is bigger than one table. The underlying issue is not content creation nor web development nor even testing and validation. The problem is process. Somewhere, the process has broken down. In this particular instance, the content is not critical, and the reach of the error is limited. The resulting error in this case is largely benign. But it may not always be. Process issues tend to cause pervasive problems that can be difficult to identify, challenging to communicate, and expensive to address. Although it is sometimes overlooked or undervalued in user experience design, process is an important component of a cohesive, sustainable, and successful UX architecture.

Blood Types, Type Distribution, and Inheritance

If you are like me and love to follow those tangents and want to learn more about blood types, follow this link to the American Red Cross (full web) page. Hopefully, the blood-type inheritance table as rendered on the mobile site will be fixed soon. 

http://www.redcrossblood.org/learn-about-blood/blood-types