Design Study #1

This article is a study about a widely used interface element: a card UI. This study is a small extract of a bigger client project—a search application in the medical field—realised at Interactive Things.You will get insights about the decisions that can go through a small design component, and you will discover why I believe is it important to challenge the design through constant iterations and tests. At the end of this post, you will find a list of useful resources.

A card is a sheet of material that serves as an entry point to more detailed information. Source: Google Material Design.
In this study, the card serves as entry point to a search result into a medical product.

1. Mapping the content

As a first step, I have started analysing the content and mapping all the search results’ types by simply taking screenshots and noting down every single element that populates them.

By breaking down these elements, I have got more familiar with the product’s content and I was able to identify the diverse classifications and the recurring elements in it.
As soon as the whole content and structure was defined, I have started designing a card UI. The goal was to explore one or two visual solutions that would have been scalable and applicable to all the search results’ types.

2. Defining the card layout

The grid of the page defined the max-width of the card UI. But it sets also the boundaries within which I could play to display all the content’s elements whose dimensions vary. Most results present in fact horizontal images, while one specific category presents vertical images.

In order to find a good compromise between the grid constraints and the need to have both visual and textual elements in the card, I have decided to maintain a horizontal layout—3:2 aspect ratio—for the majority of images and to crop the vertical images into squared ones. Consequently, all cards had the same dimensions in width and height and we were able to fit more cards into the page.

Although equal in sizes, each card UI is an entry point to a different content.
In order to highlight the difference between single cases and collections, my first approach was to modify the appearance of the card itself. However, all the investigated solutions were not consistent throughout all search results’ types.

So I decided to apply some changes to the elements that populate the card and work specifically on the image since it was only element always present in all results. Therefore, I was able to differentiate the cards’ content by giving a different layout to their images.

3. Working on the visual taxonomy

Another big design challenge in this study was to improve the visual taxonomy of the search results. Labels, icons and colours would improve the search experience and help the user to easily identify the content types.

According to the client requirements, we had to include a topic—modules, lecture, cases, etc, its icon, and the colour of the domain to which each topic belongs. 

This straightforward visual solution would have led the user to associate the colour with the topic. Hence we decided to include the labels of both domain and topic to avoid confusion. 

The first proposal did not only present a risk of the association between colour and classification’s label, but also a challenge for the icon implementation. In fact, the dimensions were too small to have a good readability of the icon. 

As many projects do, this one also started with a review of the branding guidelines. I had the requirement to keep three colours from the brand guidelines and to come up with a six colours qualitative palette. 

In a first phase, I did some colour pickings on an HSB colour model, trying to vary the hue of the colours as much as possible by adjusting their numerical values and operating some optical corrections.
After attributing the colours to the text, I could test that labels could not be easily identified as the colours’ hue did not vary enough. Furthermore, some labels did not pass the accessibility (WCAG 2.0) standards for the contrast (Level AA).

At this point, I needed to differentiate the hue and to play with the luminance—on an HCL colour space model—of the colour scale. 
To vary the colours as much as possible, I had to ensure that the linear distance across the colour space and between those six colours would be similar. This means that all of six colours would have similar luminance and chroma but different hue. In order to do so, I needed to change my tools. Jeremy, our Technology Lead introduced me to a React App that would have helped me to map and redefine the colour scale.

By mapping the colours on an HCL colour space—best model to represent dataI was actually able to see that the luminance value of the three brand colours was not the same. Therefore, I set the luminance to a fixed value of 50 and started changing the hue values.
In the end, I applied the colours to the text to make sure to match the accessibility requirements.

Once the colour scale was ready, I had to attribute a colour to each domain’s label. As first, we tried to match the colours of the old product in order to reduce the learning curve of the user. Then I applied the new colour palette to the different cards.
Although the cards were distinguishable, as soon as they populated the page, I realised that two too similar colours would have lived together in the same section. After the last refinements, I considered the design of the card UI on a good level for the user testing.

Take outs

Alongside with the learnings from the process, this study wants to remind me that:

  • a fair amount of thinking and design iterations pass through a simple UI element;
  • iterating on the single component, the card UI, and testing it into the composition, that is the page, is a good practice;
  • you have a great control on a colour if you work with its numerical values.

The whole process and design were lead, challenged and reviewed by Christian, our Senior Interaction Designer. Due to contract reasons, all the images from the actual medical product have been removed.