hamburger.svg

As my World Cup Feature surely indicates, I’m rather a big fan of what the non-American world calls “football.” So it was that, yesterday, I had the ESPN feed for the Juventus-Dortmund game up alongside my work.

While trying to parse through the substitution information, I noticed a rookie mistake in how the sports organization presents team rosters. Take a look for yourself.

juve_dortmund_rosters

If you start by looking at the SUBSTITUTES tables, you will notice that ESPN uses alternating grey and white rows in listing a team’s roster. At the start of the game, each team’s LINE-UP was laid out the same way. While there may be better ways to present a team roster, the changing of background colour to more explicitly differentiate within a list is a valid design choice. It is certainly preferable to using a single color on an otherwise Spartan list.

The problem for me as a viewer of ESPN’s data is that, when a team substitutes out a player, the substitute's information is always presented on a white background, regardless of where it falls in the table. This creates visual inconsistency in the established alternating-row pattern. Based on the initial presentation, one expects each player to be distinguished by color from the player/row above and beneath.

juve_dortmund_sub-confusion

From a layout perspective, ESPN’s method for showing a substitution relationship works. The substitute's information is associated with the player they replaced by a connecting line and indented representation of their position. Let’s explore how they could use background colour for these substituting players:

Method 1. Always use white (as ESPN does) or grey for ALL replacement players. This irrevocably breaks the established pattern of alternating grey and white rows and creates illogical visual connections. A white-backgrounded replacement is connected to a grey player they replaced, but the white-backgrounded substitute appears directly above another white-backgrounded—but unrelated—player. Or, more sensibly, sometimes the white-backgrounded replacement happens to be replacing a white-backgrounded player, in which case there is a logical visual connection that reinforces the original pattern. But it is entirely inconsistent: sometimes the replacement fits ESPN’s pattern and other times it does not. 

This next solution brings a bit more consistency to the view.

juve_dortmund_sub-highlight-gray

Player/sub pairs are bracketed in orange  for emphasis only. The brackets are not intended for inclusion in the UI design.

Method 2. Always use the same coloured background for both replacement and player, regardless of the row color in the Line-Up. This is consistent with ESPN’s basic alternating colour pattern, reinforcing the logic of that approach while providing at-a-glance understanding of who is on the field and their potential role in the team’s tactical setup.

juve_dortmund_sub-highlight-1

Player/sub pairs are bracketed in orange  for emphasis only. The brackets are not intended for inclusion in the UI design.

The third solution uses color to highlight changes in the line-up.

Method 3. Introduce a third background colour only for replacement players. This approach would highlight replacements and would again reinforce the logic of ESPN’s original alternating scheme. White and grey would continue to be used in an alternating fashion with the deviation from the pattern always clearly indicating “this player (with the new background color) replaced the player above him.”

Which solution to ultimately choose is largely a product of ESPN’s art direction and the other graphics they choose in their presentation of football games. Given that context, I would probably go with Method 2, which is understated, keeping the colour range largely in blacks and whites.

While small information design problems like this ESPN example might not seem like a big deal, they are like paper cuts of varying acuteness. As one poor choice piles atop the next, it compounds into something that meaningfully detracts from the overall quality of experience.

We are getting accustomed to having the world in the palm of our hands, what with the pocket-sized computer that is also a phone, a camera, and a set of encylopedias that we carry around.

There is something delightful about compact design, especially when it contains much more than one would expect based on its size. While working on our next edition of the Health Axioms, we’ve been inspired by some of these clever, beautifully designed educational card decks.

Legends of Science

legends_science

 

Envisioning: FutureDeck

Futurekit_deck

 

KnowCards

iot_deck

 

This last one is a personal indulgence; Yours Truly grew up with the original deck.

Eames House of Cards

Eames_house-cards

And from this week:

Thursday: The Digital Life: Smart Clothing, Drone Regs, and Apple’s Electric Car

Wednesday: Another Look at Design for the Patient Experience

Monday: Around the Studio: The Doughnuts of Winter

More on card design: How a Health Axiom Card is Made

defining_patient_experience

This definition of patient experience comes from The Beryl Institute, a global community of practice and thought leader on improving the patient experience in healthcare.

In January, we offered a three-part series on the future of design for the patient experience, a topic on the minds of everyone involved in healthcare. Here, we revisit the themes of each article and invite you to read them—for the first time, or again—and consider the possilibities for emerging technologies and design.

Design for the Patient Experience

Patient experience is part of a larger ecosystem. If we desire better care, quality clinical experiences and good clinical outcomes for patients, we must contemplate designing for a complete patient experience—from process to system to built environment—that emphasizes usability, functionality, and even beauty.

The revolution in mHealth and sensor technology makes it possible to achieve greater patient engagement outside of the traditional confines of the doctor's office. The healthcare system must exploit technologies that make getting and using data more seamless with other tasks, like goal-setting, fitness-tracking, and calorie budgeting. In a similar fashion, increased transparency around cost enables better healthcare decision making.

Design for the Patient Experience: Health Axioms

Invo’s design philosophy for the patient experience is articulated in our Health Axioms, which speak to critical areas of patient engagement, adherence, and clinical design, and are meant to inspire and support a healthy lifestyle outside of the health system and doctor's office. When patients are involved in their own care, they manage conditions better and they need fewer visits to specialists and hospitals and fewer tests. Designers must strive to create simple, accessible ways for individuals to incrementally change behavior.

Design for the Patient Experience: Software in Action

New software applications address long-standing problems in American healthcare delivery from a patient perspective. These examples support building knowledge around personal health factors, pricing transparency, and clarification of the billing process.

PatientsLikeMe

A web application that enables members to share their data including condition, treatment, and symptom information, so that they can monitor their health over time and learn from each other.

hGraph

An open source software tool for visualizing a patient’s complete range of health metrics.

Change Healthcare

Platform comprising a suite of tools for educating patients around healthcare costs including prescriptions, medical procedures, and dental and vision services, with results that are based on an individual's plan, network, and location.

To learn more about Involution Studios in the healthcare world, visit our Healthcare pages.

Give_Me_My_Data

We’re big fans of Susannah Fox.

Lucky for us, Susannah Fox has been a big fan of the Health Axioms. Not only has she provided insightful feedback, she recently suggested a concept that has now launched as a new Health Axioms card. Here’s how it happened.

First, Susannah tweeted her idea.

fox_sketch

Slow down? Brilliant!

sonin_tweet

Sarah Kaiser sketched. Reviewed. Talked. Thought. And sketched some more. Out to Susannah for feedback.

sketches_email1 slow_down_sketches

Susannah replied with much, much more than just design feedback. She offers her own experience and a favorite poem by Grace Paley. Her message has a certain calming effect in itself. This is the kind of design conversation that keeps us going.

fox_response_poetry

More sketches go out.

sonin-email2-1 sketches2

The reply is succinct, to the point, and exactly what we love to see.

fox_feedback2

 

More talking and thinking. Narrowing down the concepts. Refining the drawing.

And we are back to Twitter, closing the loop with the final concept.

slow-down-final

The conversation continues. 

final-tweets

Let us know what you think of Slow Down. And special thanks to you, Susannah!

Next up:

The card design is ready, but there is still work to be done. Jane Kokernak works her research mojo and editorial magic to craft an elegant, straightforward story that tells how to apply the health axiom for positive behavior change.

slow-down_detail

What to expect when...

You need a joint replacement. Or your dad had a stroke. Or your six-year-old was just diagnosed with type 1 diabetes. 

Can you expect your care team to provide information that will help you to understand your condition? How will you know if something is wrong and you should seek help? How do you know what to ask your loved one's caregiver? What do other people do in your situation?

It’s well known that patients stay healthier when they are informed. Health literacy is key; if you are not able to obtain, process, and understand basic health information and services, you will be ill-equipped to make decisions regarding your own or the health of your loved ones.

Patient education plays an important role in a number of Involution designs. Here are a few resources we’ve found.

AMA Atlas of the Human Body

handatlas

Illustration: Leslie Laurien, MSMI

The American Medical Association (AMA) has been a leader in addressing health literacy and patient safety and offer a number of health literacy educational tools.

Park Nicollet Hip and Knee Replacement Care Guide

replacement-knee

One feature of this guide that we really like is that the first page, even before the Table of Contents, addresses the questions “When do I call my doctor?” and “When do I call 911?”

drawMD from Visible Health

drawMD

drawMD enables clinicians to simplify and explain medical concepts visually, customizing in real time in coversation with a patient. 

This week’s highlights

On Wednesday we concluded the six-week series on UX Maturity with The AI of UX. If you missed any of these or want to read them through again, see parts 1, 2, 3, 4, 5.

Around the Studio: Continuing Efforts in Open Government provides a look at how the City of Asheville, NC has launched an online visual financial tool based on the work of Arlington Visual Budget.


You may remember our work with the Town of Arlington to produce the award-winning Arlington Visual Budget, an open source web application that creates an easier way to communicate complex municipal financial information. The app has been well-recieved here in Arlington and is being explored by other communities as far away as Asheville, North Carolina.

Last summer, working with the code from Arlington Visual Budget (AVB), volunteers from Code for Asheville and the City of Asheville collaborated in an experiment in civic engagement and open government. They were motivated by the same principles that drove the work on AVB, wanting to contribute to “the conversation within the Asheville community and between the community and the government which serves it." 

First Steps

Asheville-vis-budget-early

Initially the AVLBudget app closely resembled the first release of Arlington Visual Budget. It was based on the AVB code, which the Asheville developers had come across via Code for America.

Engineer Eric Jackson of DemocracyApps recently spoke with Invo developer Craig McGinley about his work on the Asheville project. He explained that they streamlined and changed the design of the AVB, adding new features like a “What’s New” section, which displays recent budget changes, and a Resources section that includes “gory details” such as descriptions of the budget and organizational structure. Prominent buttons saying “How do I get involved?” and “Let me contribute to the conversation” encourage and facilitate citizen engagement.

Making it Asheville’s Own

Asheville_AVLbudget

The current iteration of the Asheville, NC City Budget app.

According to Eric Jackson, this project and others like it don’t just passively present data to citizens. They give more than answers—they prompt and encourage questions and individual involvement in local government. By connecting open data to people’s lives, such efforts enable citizens to learn, both from data they see and from data that is missing. Like the Arlington Visual Budget project, the Asheville team intends to expand government transparency app use and development. And, like Involution Studios and the Town of Arlington, the City of Asheville will continue to work with their technical team to update and improve these innovative open government tools.

Seal_of_Asheville,_North_Carolina

You already know that it’s Friday, right?

So why waste valuable character space and SEO just to state the obvious? Starting now, we’ll still give you a quick run-down of the week’s articles and share a few of our latest web finds. We just won't tell you that it’s Friday.

City of Cambridge Participatory Budgeting

cambridge_budget

Open government is on our minds often here at the studio, what with our work on Arlington Visual Budget (more). The City of Cambridge, MA is launching a new democratic initiative that gives Cambridge community members the power to decide how to spend $500,000 of the City’s FY 2016 Capital Budget.

Thync

thyncapp

We’re curious about apps that relate to emotional status. Enter Thync, a wearable device that uses neurosignaling to shift your mood.

Pixel Perfect Shapes in Photoshop

pixel-perfect-trialngle

Still in a bad mood? Is it the problem with pasting vector art into Photoshop, hmm? Now you have a neat solution.

The Week’s Highlights

Check out The Digital Life: Is Leisure Dead? Exploring Time Poverty in the Digital Age. Jon and Dirk discuss the design of time, and in particular, the rampant busyness of the digital age—what has been described as the time poverty of knowledge workers.

The fifth in our UX Maturity series, Best Practice, provides some concrete advice for positioning your organization for UX excellence by adopting a best-practice approach.

On Monday, Dirk Knemeyer shared his short list of books for enriching your knowledge, practice, and imaginative life with Of Zen, Big Data, and Infovis in our Around the Studio spot.

Last week, we offered a reading list with an eye toward global citizenship.

Today’s titles include classics with a more temporal perspective (both real and imaginary) and a mix of Zen koans and big-data thinking.

The Elements of Friendly Software Design

friendly-software

Paul Heckel’s book was so far ahead of its time—the first edition was released more than 30 years ago. While the examples in it are dated, the principles are as fresh as ever. And while the very framing of the book, “friendly,” seems quaint today, it holds a wisdom that you can learn from.

The Little Zen Companion

zen-companion

This tiny book is packed with hundreds of Zen koans—little riddles that lead one to insight. From a mix of traditional sources like the I Ching as well as unconventional inspirations like John Lennon, author David Schiller provides inspiration, a challenge, and enlightenment all in one.

Dataclysm: Who We Are (When We Think No One’s Looking)

dataclysm

OKCupid founder Christian Rudder takes a deep dive into big data to reveal very personal things that big data show us about people.

Envisioning Information

env-info-tufte

Edward Tufte is the rock star of information visualization and this is the best of his four books. Smart, beautiful, and informative, anyone who wants to understand communicating with information should own this book.

A Dance With Dragons (A Song of Ice and Fire, Book 5)

dragons

If you are a fan of George R. R. Martin: With Season 5 of the HBO series ready to begin in April, now is the perfect time to pick up this ponderous tome—the one that will cover many of the storylines soon to follow.

Header image: Lifehack

Knowledge-speaks-but-wisdom-listens.1-380x275

As designers, we inhabit the everyday world.

Though our visions might occupy a different realm, we live in the same orbit as those for whom we design. Innovation requires us to understand what came before us, what lies around us, and the part we play in making the world a better place.

Enchanted Objects

enchanted_objects

Great products are magical—they make you smile and wonder how they work, and they are beautiful to use. MIT Media Lab-er David Rose goes through his checklist on the makings of enchanted services.

Think Like a Commoner

think-like-a-commoner

David Bollier’s fantastic primer on the global commons movement. Know thy history of open source, the commons, and the alternative to the corrupt Market/State.

The Men Who United the States

men-who-united

Simon Winchester is a local Massachusettsian (like another favorite history writer, James Carroll, author of House of War) who reveals many of the lost inventors, explorers, engineers, and designers that shaped our country over the past two hundred years.

Concierge Medicine

knope-md-concierge-medicine

Many of my doctor friends are sick of healthcare, bored by their jobs, and tired of the grind. Patients want a more personal experience with their clinicians versus the 6 minute drive-bys with our PCP. Steven Knope maps out the anti-outsourcing of our health care through the kinder, gentler, and better outcomes-based concierge service, which proves healthier for patients and doctors. Where has this been all my life?

The Remedy

remedy

Thomas Goetz unfolds the charming story of Robert Koch and his discovery of how bacteria work and tuberculosis. This fabulous sleuthing into the lives of experimentalists and scientists dovetails with Steven Johnson’s The Ghost Map.

Next up:

Finishing This Changes Everything by Naomi Klein. Naomi’s last book, Shock Doctrine, was enthralling. I started her latest rant, became sufficiently pissed at the climate deniers (who ultimately are anti-education) and had to put the book down. It’s now next up on my finish-list, along with The Glass Cage by Nicholas Carr The Citizen Patient by Nortin Hadler.

Caution: that last story has seizure-trigger potential.

The Human API

human-api

MedTech Boston recently posted an interview with Michael DePalma and Richie Etwaru, founders of The Human API. Their mission is to create a “prevention industry” with a new economic and behavioral model for health. According to the article, The Human API wants to “foster paradigm shift by instilling prevention and early identification health barometers into everyday life.” We should talk.

Why Life Exists

forest

Business Insider this week featured a story about MIT physicist Jeremy England who has derived a mathematical formula that he asserts underlies the theory of evolution by natural selection. I particularly appreciated the explanation of thermodynamic equilibrium using the example of a room-temperature cup of coffee: it will never spontaneously reheat. That is my kind of physics.

Nintype

nintype

According to John Brownlee on Fast Company’s CoDesign, “the experience of using Nintype is like playing the craziest game of Dance Dance Revolution ever at some futuristic space rave while out of your gourd on LSD-infused cotton candy.”

Highlights From the Week

This week, on Episode 81 of The Digital Life, Jon and Dirk talk about the landscape of speech recognition and the magic of VUI in Exploring the Voice User Interface.

Wednesday brought the third article in our UX Maturity series, Establishment.

This week’s Around the Studio: Tech Talks talks about our own brand of learning experiences.

nintype-detail

Click here for more blog posts!