Creating illustration guidelines for Singapore's public facing products

Timeline

1 month

COLLABORATORS

Rachel Tan (Design systems)

CONSTRAINTS

Systemising different visual languages
Applicability across different use cases

MY ROLE

Re-looking at the illustration design system and spearheading updates/changes to workflows

To do this within a month, I initiated a design jam audit to understand the space and challenges as someone without context, and then created a set of guidelines based on the challenges. (i.e. what within the guidelines would b most helpful?)

CONTEXT

Open Government Products (OGP) designs and develops a lot of government products.

Open Government Products is an experimental government team in Singapore that builds tech for public good. Designers usually have design ownership over entire government products, and work in small, agile-like teams.

‘Build your own Singapore’ illustration system has grown to be used across various government products.

Illustrations has been used across various government products – custom modifications to illustrations itself and requests for more have been made. This has created more delightful experiences across a variety of products!

HIGHER LEVEL PROBLEM

Illustrations are often hastily added at the very end of design workflows

Whilst this is understandable, the quality/impact of illustrations may hinder the experience when not applied intentionally. This was revealed when I initiated an audit of the ways illustrations have been made across products.

I sent out a message to designers who've used the illustration design system in their products!

The first audit of how illustrations have been used across various OGP products.

Challenge

Illustrations used across screens and touchpoints for various products appear inconsistent

Opportunity

Creation of illustration guidelines/references, key touchpoints for products

Challenge

Creating custom illustrations and compositions are tough
for designers with no illustration background

Opportunity

Exploring scalable, modular illustrated composition + objects in common screen states - Succes, Error, Empty states etc.

I scoped and identified 3 main challengers from the design jam I hosted...
‍

On a higher level, how might illustrations create a more trusted, delightful relationship between Government products in Singapore and members of the public?

... which led to an opportunity to explore guidelines and impact on a craft and systems level

design solution

An open source set of illustration guidelines designers can reference when creating custom illustrations or looking for inspiration

The current illustration design system is a mix of custom made illustrations, a dump of ideas and illustrations you can play with.

ITERATING THROUGH VISUAL DESIGNS/ILLUSTRATIONS

Starting with creating illustrations of my own!

One of the illustrations I revamped was for Singapore’s Health Appointment System. I was intentional in thinking about color, visual density, scale of objects, and visual consistency. These also become guidelines and as a source of reference for building up the illustration guidelines.

CRAFTING GUIDELINES

Use of colored backgrounds, considering responsiveness and scalability

It's wasteful to have an illustration be adapted to multiple screen resolutions/dimensions - in this case, using a colored background could create awkward negative space around the focal point.

Using characters in illustrations and product touchpoints

Although characters can be cute and fun to use, designers should also be mindful of representation and not perpatuate stereotypes around gender, race, jobs.

Formality, Tone of visual styles

More internal, information focused products such as dashboards may not want to use such playful illustrations. Maybe the style could be adapted through stroke widths to make more formal visual styles for private or non-public facing products!

CONSIDERING UX STATES

Scalable illustrations across common states: Success, Error, Empty

Beyond the generic success, error, and empty illustrations, I explored what illustrations might look if imbued with a sense of playfulness. I drew inspiration from familiar elements of Singapore...

Understandably some of the explorations might be a bit too playful or informal for government facing products, but depending on the intention and tone, I believe such illustrations can alleviate the potential frustration that comes with these touchpoints.

thoughts, reflections

Learnings

Being intentional with illustrations in the context of products. Illustrations don't ALWAYS have to be boring!

This self-initiated challenge made me think about raising the bar of design quality, but also the potential of illustrations in products. Illustations don't just have to be a checkmark - it can serve its functional purpose of communicating information but also elements of emotion!

Systemising visual language that is scalable and not suffocating

I had a lot of fun and learnt a lot about being intentional with visual density/information, product branding, and even how illustrations can scale across multiple aspect ratios - an important consideration for products that are both on desktop and mobile.

<-

Roster Monster

Bumble

->