01 —
Google
Calendar
Google’s new calendar app is perhaps the best yet demonstration of how illustration can be used as a key element in digital product design.
It does show how much warmth and humanity can be added to software through the clever, integral use of illustration.
— Khoi Vihn
Google Calendar is designed to work across mobile, tablet and desktop. It automatically brings in any reservations you made, and has many more features you can read about here.
Redesigning Calendar across all platforms and form factors meant organising its key components — time grids, events, date pickers, etc — for radically different layouts and input modalities.
Little characters sprinkled throughout tell small stories within the images, their activities slowly changing with each season passing.
— Lotta Nieminen
We brought in illustration from artist Maya Stepien, Lotta Nieminen and Owen Davey to create unexpected moments of joy, but more importantly, to aid the eye in scanning the diary.
Lotta’s seasonal canvases — January through December — use colour and form to create a seasonal narrative that accompanies the user through the year.
Lotta’s characters swim with the sharks in summer, harvest fruit in autumn, ski alongside polar bears in winter and roast marshmallows in spring. The canvases are offset by six months in the north and south emisphere to account for the seasonal differences across the globe.
As we asked Lotta to design for both tablet and mobile, I had to define a template that would allow the illustrations to integrate well with the UI across both form factors, keeping UI areas clear from characters and other key items.
The template enabled Lotta to design while seeing the work across a number of form factors, driving quicker review cycles and allowing us to focus on more interesting creative details.
We collaborated with illustrator Maya Stepien to create illustrations for 100+ event types. These are automatically added to events, matching their titles.
Maya’s elegant geometric shapes, bold use of colour and negative space create iconic illustrations that make key events stand out in the diary.
Art directing this set had a couple interesting challenges. Firstly, keeping diversity in mind, both from an activities perspective, but also in the way we chose to represent such activities.
Calendar illustrations celebrate St. Patrick’s Day, Quinceanera, Nowruz and Pride. We chose never to represent humans at this scale, given the challenges in keeping the set diverse — and instead focusing on the key items that represent such activities.
Additionally — in order to keep the set feeling cohesive as it grew — we focused in using two viewpoints (front and top-down) and colours from Google’s palette.
Try adding Badminton Practice or Summer BBQ to see illustrations appear across your diary.
Imagery acts as a bridge between aspirations and the content you see in Calendar, making Goals more tangible and actionable — seeing a woman running with her dog for example, might get me off the couch and to the park for an evening run.
— Google Design
For a more experimental design — Goals in Calendar — I worked with illustrator Owen Davey, who created for us a set of 5 canvases narrating of people intent in their everyday life.
Together with Calendar's historical set, Owen's images accompany the user in their journey towards setting up a routine.
The five canvases — Exercise, Build a skill, Friends & family, Me time, Organize my life — inspire people to visualize themselves working towards their goals. Owen’s artwork fosters discovery, helping users explore the variety of goals we curated in the app, from getting healthier, to dealing with chores, and staying in touch with people who matter in your life.
Similarly, Maya’s illustrations walk the users through the goal set-up process, helping them focus on key aspects of the activity (I need a brush and some canvas before I practice painting, for example) from visualization and mental preparation, to action. These same illustrations surface throughout the whole goal cycle, visually nudging users, and helping them build their routine, day after day.
02 —
Streams
Suspected Sepsis alert.
36 minutes ago. Automated.
Streams is a mobile alerting app, designed for nurses and doctors in hospital. Streams enables clinicians to monitor their patients' vitals on the go, and get alerted for Acute Kidney Injury, vital signs changes, Sepsis and Covid-19.
Streams is developed by Google Health.
Clinicians can set up auto-updating lists displaying their patients' latest data, including trends and alerts.
We redesigned Patient Lists to mirror hospital routines, like the ward round.
A combination of the National Early Warning Score and alerts enables a clinician to quickly assess their patients' trend and spot any issues worth investigating further.
Patient information including date of birth, hospital number and location allow for identification and follow-up.
The list is now made by the intersection of any clinical proxy the user chooses — e.g. All patients in Diagnostic Medicine under Dr. House. This enables nurses to focus on patients in a given location, or consultants to select patients within a specific specialty and under one or more consultants.
Grouping patients by location — rather than alphabetically — facilitates routines like the ward round where clinicians assess patients in a specific location-based order.
NEWS is a scoring system for clinical assessment, typically used in the form of a paper chart.
We designed Streams' visual system to convey score, risk level and trend.
The badges, coloured by the score parameters set by NEWS, show the patient's latest NEWS score with a trending arrow to indicate whether they're worsening or improving.
NEWS scores range 0—20+ and are divided in four risk bands, colour-coded with a traffic light system. Scores 0—4 are low risk, colored in grey, or yellow where a single parameter is scoring 3; 5—6 are medium risk, in orange; 7 and above are high risk, in red.
The trend arrows are a key piece of information, as they communicate to the clinician whether the patient is worsening or improving.
For example, a critical patient, recently reviewed, might be improving while still scoring high. Conversely, another patient might have recently worsened quickly requiring a fast follow-up.
7 section headers, 6 button
components, 8 content tiles...
One versatile component.
We introduced Streams Design System to support the growth of the product at speed, across platforms. A single, flexible, component can handle most of the app's layout needs, providing consistent hierarchy throughout.
The Streams Tile was designed in tight collaboration with our engineering team to ensure design requirements would be met in implementation, and vice-versa ensure we kept the design simple to implement.
This approach led to many benefits, including enabling Dynamic Type across the app as well as making data ingestion simpler.
Comparing vitals over time is essential to interpret current data and assess trends.
I explored what a table chart displaying a patient's vital signs might look like.
The coloured blocks create a visual map of the vitals, highlighting areas of concern and indicating stability or sudden change.
Four sets of values — normally covering the patient’s last 24h — allow for comparison over time.
03 —
Google
Health
How do you bridge the gap between the hospital and those who build products for it?
You bring them (a bit) of the hospital.
The Google Health team in London is a diverse crowd of backgrounds. As many might not be familiar with the hospital environment, I designed a set of 11 posters to bridge that gap, and help create empathy for our users.
ABCDE.
Airway. Breathing.
Circulation. Disability.
Exposure.
I designed this pair of posters to communicate some of the tools clinicians use to assess and monitor the conditions of in-patients. The ABCDE approach helps health-care professionals to focus on the most life-threatening clinical problems, while vital signs are recorded to monitor a patient's trend, highlighting any early signs of deterioration.
Common across hospitals in the UK, the National Early Warning Score chart (below) helps standardise the assessment and response to acute illness. While relying on manual input, this impressive piece of design manages to visually outline a patient's trend in both overview and detail.
Designing environmental awareness: how does the hospital change from day to out-of-hours?
This set of posters tries to paint the change between the hospital from daytime to out-of-hours. What's the impact of attention fatigue while each clincian is responsible for more patients?
Out-of-hours hospitals have not only less nurses and doctors covering the many patients. Support staff like cleks, pharmacists, specialist nurses are also less or not available at all.
04 —
Plebiscitum
Will you be a fair politician, or play dirty and destroy whomever comes in your way?
Plebiscitum — Latin: people's choice — is a card game I designed with some friends while doing my master in Interaction Design.
Based on the political events at the time, Plebiscitum is designed to foster constructive and destructive team dynamics. The players, organised in Parties are encouraged to gain as much Popularity as they can, balancing their own success while keeping in check both their enemies and allies.
Ever thought of becoming president? Now you can! Give interviews, bribe, foment protests, play good and evil to become the most popular politician ever.
While we only had two weeks to design a game prototype and test it, I liked the outcome so much I took it as an opportunity to refine it and make it a finished product.
I personally designed the illustrations for 100+ cards, the graphic system and all the collateral assets for the game.
The backbone of Plebiscitum is the idea that players should try to make their own party win, and at the same time beat their own party members in order to get elected.
To do so, players can play cards both against other parties’ members or against their own party members.
In retrospective, politics in 2012 weren't so bad after all.
Players can use powerful Negative Action Cards during their turn. You may be able to frame your political opponent, or gain a lot of dirty money.
For example, the Approve Illegal Construction card allows you to gain quite some money in a single turn, while the Frame card allows you to move one of your previous shady actions to someone else.
These actions become a player's skeleton in the closet, risking to expose them to the public for what they did, eventually losing all the popularity they had gained.
For example, event cards such as Wikileaks reveal all players’ Negative Action Cards, making them pay for all the bad deeds they did.
05 —
De Vliegende
Hollander
Who hath seen the Phantom Ship,
Her lordly rise and lowly dip,
Careering o'er the lonesome main,
No port shall know her keel again...
— Albert Pinkham Ryder
Mythology has always fascinated me. De Vliegende Hollander is an exploration of graphic studies I made while studying.
He struggles with his fatigue and finally falls asleep. The storm begins to rage violently: it grows darker. In the distance appears the ship of the Flying Dutchman, with blood‑red sails and black masts. She rapidly nears the shore, on the side opposite the Norwegian ship; with a fearful crash she casts anchor.
— R. Wagner, Der fliegende Holländer
It is a common superstition of mariners, that, in the high southern latitudes on the coast of Africa, hurricanes are frequently ushered in by the appearance of a spectre-ship, denominated the Flying Dutchman... The crew of this vessel are supposed to have been guilty of some dreadful crime, in the infancy of navigation; and to have been stricken with pestilence... and are ordained still to traverse the ocean on which they perished, till the period of their penance expire.
— John Leyden
The weather was so stormy that the sailors said they saw the Flying Dutchman. The common story is that this Dutchman came to the Cape in distress of weather and wanted to get into harbour but could not get a pilot to conduct her and was lost and that ever since in very bad weather her vision appears.
— John MacDonald
