Build your own Singaporean (BYOS) v2

The Product

BYOS is a character and scene builder that allows public officers and citizens to create local scenes and characters that they can export as images to use on their products, websites or general use.

Problem Statement

The illustrations used across products are inconsistent and not representative of the Singapore population.

How Might We

Make it easy for anyone to create relatable illustrations to help with their communications effectively.

How the BYOS character builder looks like

Background

The team started with the problem statement of how to update and expand the BYOS design system. OGP products are currently used but are limited to the rest of the government. We acknowledge that the current method of creating a personalised Singaporean persona through a Figma file restricts accessibility, particularly for non-designers across the government. We also received requests from BYOS to allow government agencies to customise the colours, poses, and backgrounds two years back.

We plan to reintroduce a web interface and enhance its capabilities, allowing public officers to construct their Singaporean personas and design scenes featuring multiple characters.

The idea then expanded to, “Why limit it to government usage, and what if we allowed regular Singaporeans to build a digitalised version of themselves?” We introduced a “Where’s Wally?” element to the user flow to encourage users to engage and create their own Singaporeans. This would introduce an immediate use case for the Singaporeans they made. They can then share their creations with friends to “find them” on a digital map.

Goals of the product

The goals set by the team were to:

1. Expand and update the existing BYOS assets

2. Make it easy for public officers to generate design assets

3. Extend it for citizens to create digital versions of themselves

4. Introduce a fun element in the form of a sizeable local scene where users can drop their citizens into

The approach

The team asked what we could do to make BYOS fun for ordinary citizens who want to build their own Singaporeans. The team then brainstormed multiple ideas, from creating a Singaporean ‘trading card game’  to exploring “world builders” in other mobile applications where users could create their avatars and share them in a common world.

We were sure how the builder and mechanics would work, but we were unsure about the start and end of the user flows.

Inspired by a Where’s Wally? Advent calendar on our colleague's desk and Google's Most Searched Playground. We decided to make a map depicting everyday Singaporean life. This allowed us to create more heartfelt, familiar assets that can be added back to the builder to be used by government users.

With 3.5 weeks remaining in the Hackathon calendar, the team settled on the user flow and began designing and creating a prototype.

Initial draft of the Singapore map

Challenge 1: Of scenes and compositions

The team very soon hit its first challenge: creating scenes. We have people in different poses (three of them illustrated below).

3 of the many different poses of the upper body

If we wanted to give users the free rein to create any combination of items and poses it would present an issue as items might look out of places. In the case below, the plastic bag seems to be hanging slightly in the air in the first pose.

Example using a plastic bag in different poses

To overcome this challenge, the team had to ensure that the bounding boxes for each item were consistent with the items moving within those boxes, to make certain they appeared correct.

Example of the bounding boxes per pose

The Z-index (which specifies the stack order of an element) for all items also needs to be consistent, and where possible, items should overlap in a consistent manner.

Holding of items consistently

The team wanted users to be able to create scenes; however, due to the endless possibilities of combinations, we could end up with unsightly results, such as a lady in a wheelchair sitting on a chair.

While it might be feasible to restrict the combinations, the team concluded that coding all possible combinations and limitations would consume too much time and lead to scope creep. In the best-case scenario, the user would apply some judgement when experimenting with the combinations and would avoid selecting combinations that appeared odd together.

A bad combination of items and poses

After refinement, we created 51 scenes for users to pick from, which can then be subsequently customised in the builder.

Final version of the scene picker

Character customisation final design

Challenge 2: Colours Customisations

Another challenge the team faced was enabling users to freely swap out the colours of the items, allowing both public officers and users to express themselves best.

When our designers exported all the design assets, they had to ensure that the colours were consistent to avoid this issue. Engineering then needed to locate these values, convert them into variables, and replace them with the user's selected colours to display the option on the front end.

Customising the colours of the creations

Challenge 3: Dropping user creations onto the map

We had to ensure when users dropped their creations onto the map that, it would not look out of place. This meant that every spot we have had a definition of whether the individual is standing, sitting, facing left or facing right.

We also had to ensure say if the user is standing in the bus that only half the body was shown.

Placing an individual on the bus and showing only half the body

What's Next for BYOS

After Hackathon, there are several additional scenes and customisation that the team will look to add to BYOS. The product is live and available for anyone to use at https://www.byos.gov.sg

The Team

Rachel Tan - Product Designer
Khaleedah Sairi - Product Designer
Dexter Tan - Software Engineer
Ian Chen - Software Engineer
Lennard Lim - Product Manager