Dashboard Re-design
2020 was significant year for SOC Telemed. They turned a public company at NASDAQ. Telemed IQ is a platform which enables providers to deploy, optimize and scale a telemedicine program rapidly, seamlessly, and cost-effectively across all care sites.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of SOC Telemed.
Challenge
This is the current doctor’s dashboard. The design brief was to show more information on the dashboard above the fold. This would help in increasing the efficiency for experienced users by reducing scrolling.
Fold is the upper area of the website that the user sees when the webpage first loads. It is important while designing content layout and placement because content that appears above the fold is what is first visible when the user loads the page. Typically, a user spends 80% of their time looking at information above the page fold.
Wireframes
I started the design process by creating quick, hand sketched wireframes for generating ideas and gathering feedback.
I sought inspiration from various dashboard designs like Jira and Asana. I kept a note of the design brief I was provided. Then I brainstormed by sketching three distinctly different solutions.
Medium Fidelity Mockup
This exercise’s goal is to think about navigation and layout without getting distracted with typeface, color and other effects. This is a quick way of generating ideas, gathering feedback and figuring out strengths and weakness.
Medium fidelity prototype - Option 1
Strength of this option is the clarity of information displayed in all three sections. There is feedback in the Tasks section, that there are more cards under the first one displayed.
Weaknesses are that not a lot more cards than present design are being added to the Individual Consult section.
Medium fidelity prototype-Option 2
Strength of this option is that more cards are visible than any other option in all sections.
Weakness are that the cards in task section are arranged close, making it seem to need more whitespace. The text of one card “To do note” is very close to the next card, which makes it loose its purpose of being one card.
Medium fidelity prototype-Option 3
Strength of this option is the distinct layout of each section and it is easily scannable.
Weakness is that consults presented in list format could mislead the user on their importance.
High Fidelity Mockup
After refining the low fidelity mockup and getting feedback we chose to move Option 2 to high fidelity stage. This is the first iteration of high fidelity mockup, in which I have added colors, typeface and effects.
First Iteration
To differentiate each card in Tasks – I tried using the green paper effect – of using two colors to visually differentiate two consecutive items on the list.
The weakness of this iteration is, too many elements in the Individual consult cards compete for attention.
The phone/video icon seem clickable.
Cards in Task section lack hierarchy of information.
Cards in Individual consult could have better visual hierarchy and reduce noise. Noise are all the elements that shout for your attention. More the elements, more is the noise.
The strength is that we do have 9 visible cards in Individual consults, 6 cards in Rounds and 7 cards in Tasks above the fold. All sections are visually distinct from each other, which helps the user to identify them immediately.
Second Iteration
Improvements from last iteration
The phone and video icon are lower in hierarchy. By removing the shadow, they look more like icons and less like buttons.
Reduced noise by reducing colour variation in Individual cards, rounds and task cards.
Grouped text in individual consult cards for improved association.
Third Iteration
Improvements from last iteration:
Set affordance for phone and video icon - Reduce hierarchy by moving it down.
Time since consult assignment and notes in rounds should be easily discernable – Make it prominent by using bold typeface.
Differentiate each card in Tasks - Use the green paper effect – of using two colors to visually differentiate two consecutive items on the list.
Detail design of individual consult card
First Iteration
Critique:
Variation in text weight and font contributes to noise.
Set right affordances and clearly demarcate between UI elements and icons.
Group related information together.
Second Iteration
Solution:
Created a flat phone icon and reduced the size of the circle. Changed the position to reduce prominence in the card.
Reduced line space between lines to improve association.
Critique:
Reduce variation in typography
Icons could have less prominence
Third Iteration
Solution:
Reduced the font weight of the time. It will match consistency with other elements and reduce variation.
Reduced card height by reorganizing the space of the left of phone icon to show more cards in the section.
Detail Design of Rounds card
First Iteration
Critique:
Variation in the card adds to noise.
The pencil icon doesn’t covey its affordance.
Solution:
Reduce the font weight of time. Retain consistency with other elements and reduce variation by limiting colours.
Modify pencil icon to show that it is a clickable UI element.
Second Iteration
Solution:
Reduced noise by removing colour variation. I have emphasized the information by adding a border.
Designed the pencil icon to look like an UI element. I have added a circle and dropped a shadow for the shape.
Detail Design of Task card
First Iteration
Critique:
Hierarchy in information is missing.
Solution:
Create a flow for the user to follow when they look for information in a card. Create hierarchy in information and convey them visually by using typeface, whitespace and grouping.
Second Iteration
Solution:
I worked out hierarchy by emphasizing the most important information.
I used bold typeface for the most important information that the card conveys. The information next in line has a border, which distinguishes it from the rest of the card and guides user’s eye.
Outcome of re-design exercise
The redesign of TiQ application dashboard was a step towards displaying more information to doctors without the need to scroll down. This project is in progress. On launch, there will be significant change in the design of the dashboard, which will hopefully impact the user’s efficiency positively.
With this re-design I was able to achieve:
50% increase in Individual Consult cards
50% increase in Rounds cards
60% increase in Task cards
For confidentiality reasons I have omitted the actual values for these metrics.