The Digitisation of User Experience

Eyung Lim at UXDX APAC. Video: https://youtu.be/KakfXAR0CIs

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Framing the journey: product, process and people

[00:00:00] I am Eyung. I work for the government; I'm from the Government Technology Agency of Singapore. Allow me to take a few tens of minutes to share with you some of our journey. In fact, it's been a very memorable one over the past year or so. In the government, of course, we are responsible and accountable for taking care of our citizens and residents during a crisis situation.

[00:00:28] Allow me to put a frame on my sharing. I use a very common frame out there, which is product, process and people, and I'm going to share aligned to these three building blocks. GovTech Singapore has gone through quite a journey of trying to see everything moving from a project into a product. Probably most of the participants in this forum are very familiar with things like this: in the case of a product, we want to focus more on the outcome instead of the output. A product also has more longevity in terms of timeline, and we also need to measure the product's value, in terms of the value and impact it can create for the customers, for the business, and so forth. Last but not least, the usual bit we understand about the whole product mindset is that it's an iterative cycle of how we continuously improve.

A website in twelve hours for mask distribution

[00:01:33] Let me use that as a quick frame to share with you how everything got started. Interestingly, this was actually a very small starting point, but it also marked the beginning of the whole COVID war in Singapore. The very first mission that we received was that the Singapore government was going to give out masks to the residents, and we needed to quickly build a website to inform people where to collect the masks. To us, that was a mission that we had to accomplish.

[00:02:10] But what the people in Singapore probably don't know is that we received this mission only one day before the actual event. That means that on the Sunday morning itself we had to start distributing masks to the citizens, so the night before, the day before, we needed to start informing people where to collect the masks. How do we make such a digital platform presence and allow people to go according to what has been assigned?

[00:02:40] That is where we started this journey. At 10 a.m. we started to receive this project brief, and then a lot of questions started to come in. What is the domain name of the website? Where do we pull the data from? Blah blah blah. We struggled quite a bit, and at the very midnight we finally found out that all the data resided in the different districts, because in the Singapore context there are different districts. All the data was residing with each of the districts, on things like the Facebook page and so on. That was the best thing we had to arrive at that mission. This is the kind of data we had. I mean, it was not very good quality data, but at that point in time it was the best thing we could have; it was what we had on the plate.

[00:03:34] We decided that within the next 10 hours or so, the thing we could build was something that let residents key in their postal code, like the one you see in the middle of the screen, and by doing that we would just have a compilation of all the images, all the posters, and we would show them as they were. It was such a simple thing. But the key thing is that it was already 12 a.m., midnight, and the website had to be used on the very next day.

[00:04:05] This is what it looked like in the office itself. We called back three pro fella [?], three engineers, and they came back and quickly tried to hack out whatever could be used. In the very early morning we also triggered our security group to do all the pen tests and so on. But at 8 a.m. in the morning, before we had even shared our website, we started to get a lot of social media posts saying, "Oh, there's a fake website." Then we also started to realize other problems: because we had never put in a masthead, we needed to put in the agency logo and so on to give credibility to the product.

[00:04:45] Finally, at 10 a.m. that morning, and I think it was really the first time in the government context, we launched a website within 12 hours. After that the journey continued. Because it was really rushed-out work, we found we could only accommodate one image per search, so we called back a lot of volunteers to try to stitch the images together, and so on. All of us just wanted to come together and play our part to make sure that we had a usable product for the residents and citizens themselves.

[00:05:23] That was a very quick journey. But there is one thing we learned throughout it, be it the part about rushed-out work, the part about how we give credibility to a product that we build, or the part about how we cut short the interaction that citizens need to have to get to the information they need, which in this case is essentially the product value itself. It taught us one very important lesson: as a product, perhaps the single most important factor in service delivery, in our case, is communication.

The poster generator and tech stacks

[00:06:11] From there our journey continued. How can we make this important communication bit even more effective? That is how we evolved to the next stage, which is really about structured data. In the Singapore context, if you are familiar, a lot of these distribution ops are facilitated by different units we call community centres. For each community centre, a lot of the time it very much depends on the digital literacy of the staff there, and it's part of their job to create all these posters, which carry the information and inform the residents where to collect certain stuff.

[00:07:03] But here comes the problem: there is no consistent way of communication, because it very much depends on the UX writing skill, the design skill and the UX skill of each of the different CCs, the community centres. So there were a lot of information gaps. To drive better communication, as a product team we continued to brainstorm, and we thought that maybe what we needed to do as a next step was provide an appealing product, so that all the public officers would be willing to use it, while at the same time, at the front end, it solves a problem for the citizens by providing a consistent look and feel and a consistent UX representation.

[00:07:55] This is where we came up with something we call a poster generator. It is not rocket science. What it does is this: I turn to the public officers and tell them, "Instead of having to use PowerPoint or Photoshop or whatever to come up with these posters by yourself, how about I just provide you a web page with a very simple form interface?" You just fill in whatever collection information details you want, and by pressing one button, immediately on the right side of the screen you get a consistent poster. You can print the poster out to be used on the different government housing blocks, and because the format of the image is also compatible with the digital bulletin boards in all those housing estates, you can use it there too.

[00:08:47] With that in mind, I have a tool to bring the public service on board, but at the same time I'm able to provide a more consistent experience to the citizens who need to use these particular services. It is a very small story to tell, but it symbolized one of the very important mindsets that we have in fighting this COVID war, which is really about the tech stack. We used to think that the experience side of things and the engineering side of things belonged to two very different worlds. But I think if we have learned anything from this COVID war, it is that for a lot of these important lessons and a lot of this effort, we want to be able to tech stack it, so that a lot of the important lessons and important implementations we can keep on reusing, and that allows us to respond fast in a COVID situation.

A digital product life cycle and reusable modules

[00:09:51] That leads me to my next topic, which is the process itself. Since you signed up for this conference, you'll be very familiar with topics like design thinking. What you can see in the top right corner is our own adaptation of the design thinking approach; in our case we call it the digital product life cycle. It aligns very much with the design thinking principle that we have to start with user observation and the discovery journey, then we ideate, after that we do small prototyping, and after that we send it to an MVP.

[00:10:34] At the bottom are the modules that we have come up with. For example, on the left corner, what you see is this location-based search. That is a module that we have used often in so many of the distribution ops in government, be it masks, be it sanitizer, and so forth. The basic authentication module is another one. I think Singapore has a famous initiative in TraceTogether, and this is the baseline module behind it. After we solved a lot of the issues, we made it a very solid tech stack, making sure the user data is as accurate as possible. This module is being used to support not only TraceTogether but also things like the exit pass system [?], which is another initiative in the Singapore government to help fight the outbreak of the COVID situation in the dorms.

[00:11:32] There's the poster generator I mentioned. And last but not least, there's this benefit engine. We want to help the people in this country, and we want to provide a lot of benefits and so on, but how do we provide the most user-friendly experience possible for people? Out of so many benefits and schemes, we just get people to answer the top five or top seven questions, and then immediately you are provided with a personalized list of benefits that you can zoom into and apply for.

[00:12:10] For lack of a better word, we sometimes joke around and say that because in a COVID situation we have to run very fast, we are almost building a plane while we are already in the air. That is of course driven by the demand. But to allow that to happen, and to allow the product to continuously improve, we need a very good feedback mechanism. That's why, in the Singapore government context, we have already built the feedback mechanism as part of the tech stack.

[00:12:55] What does it mean for any product owner? It means that if you are running a Singapore government touchpoint, the only thing you need to do is add two lines of JavaScript code at the top of your source code, and immediately you are exposed to a dashboard where you are able to turn it on and off and customize the questions, through something we call volga sentiment [?], which is this little smiley face you see there. From the point in time that you want a feedback mechanism on your digital touchpoint to the point that the feedback mechanism is working on the website, it takes well under an hour. This powerful tool has been used to power more than 2,000 Singapore government touchpoints.

[00:13:46] These are some of the real feedback we have gotten. Just in the three phases of the MaskGoWhere collection exercise, we received more than ten thousand ratings and more than 1,300 pieces of actionable feedback. That is the very powerful feedback loop that allowed us to continuously iterate our product.

Inclusivity: translation, usability testing and the ethnic keyboard

[00:14:12] At the same time, I want to bring in a topic that is very important to us, because in the Singapore context we are a multiracial society. Based on some of this very authentic feedback from the ground, one thing is definitely the language barrier. We often receive feedback like, "I cannot read English. If your website is only available in English, how is it inclusive to me?" and so on. I must also say that in the past, translation quality has mattered a lot, because there were a few incidents where people simply used machine translation and it ended up causing some misunderstanding across the different groups.

[00:15:04] At the back end, what we are trying to drive is good translation. Even with simple content like this, if you put four key languages together, it's a lot of work to put things together and make sure the accuracy is there. Of course there are many ways to drive it, but to really drive it as part of very fast product movement, where we need to iterate on the fly and, like I mentioned, build a plane while it's in the air, we really need people embedded in the team. It cannot be an external commercial dealing where there's a time lag; it has to act as part of the agile team itself. So our main mode of solutioning this is to go through a lot of volunteers as well as part-time translators.

[00:15:58] At the back end, if we assess that inclusivity is one key issue to solve, then obviously we need to invest in it. That's why we have also developed some of the tech stack that allows us to do it, so that at the whole-nation level we have a more holistic position to make the whole Singapore government digital service more inclusive. These are some of the screenshots of how we allow translation to happen without burdening the translators too much with comparing different Excel spreadsheets and so on.

[00:16:34] We even came up with a process. In the traditional sense, process might sound a bit old-school, a bit more lengthy, a bit more bureaucratic. But in a fast-response environment, in our humble view, process becomes even more important. Just when everything starts to happen here and there and new situations start to appear, if you do not have a process to make sure that things happen in order, it's more likely that mistakes will be made. These are some of the products that have benefited during the COVID situation, be it SupportGoWhere, SafeEntry, TokenGoWhere, which is a website for people to know where to collect the TraceTogether token, and MyLegacy, and so on.

[00:17:29] Other than what I mentioned just now, there are other kinds of processes that we have put in place. For example, you can see there's a heat map overlaid on the website. That is our new HDB; HDB is basically Singapore's housing board, and recently they launched a new housing portal. All of this design work, before we even send it into development, we pipe through usability testing sessions. For some of the sessions we even use eye-tracking tools to make sure that people are paying attention to the right thing, the thing we want them to pay attention to, and to make sure that the user journey is consistent.

[00:18:12] At the bottom, that leads me to tell another little story. The team was commissioned by ICA; ICA is basically our immigration office. We were called in to revamp a digital service on the NRIC, basically our ID registration. When the team went in with the same kind of design thinking process, we found out what the issue really was. On our physical ID card there is one field where people need to put in their ethnic name, but the fact is that a lot of youngsters today, when they go to the website and try to consume these services on their computer or phone, don't have the ethnic keyboard preinstalled on their devices.

[00:19:03] The current process was that they had to write the ethnic name on a piece of paper, take a photo, upload the photo and send it to the back-end officer for them to try to recognize the name and digitize it for you. Sometimes this process could ding-dong for a few rounds, and people might not be able to read your handwriting, and so forth. To make the service more inclusive, the designers and engineers decided to come up with something they called the ethnic keyboard, which is a soft keyboard.

[00:19:39] What it means is that now, if you go to the ICA website, in the ethnic name entry field you just click one button, and without installing anything on your mobile device or computer, the keyboard appears on your computer and you can use your mouse to do the ethnic name entry. On the right-hand side is what happens when you try to enter Chinese characters. Because it is more stroke driven, we implemented a handwriting keypad: you use a mouse to try to write the word. It gives them another way of entering an ethnic name without installing any ethnic keyboard on your device.

[00:20:25] Things like these are what naturally appear along the journey because you put a process in place, and they holistically make your service more inclusive.

People, and building usability into the tech stack

[00:20:38] Last but not least, what matters most to us is really the people. It begins with empathy, just like any UX 101 lesson taught us. What's even more important is that it's a team sport, because for a lot of these things you need to support each other. It's also very important in our journey to use positive behavior to encourage positive behavior. What you see on the right-hand side is our in-house ceremony: whenever people go the extra mile for inclusivity, accessibility and so on, we have a session to call out this kind of positive behavior. At the end of the day, even as the manager of the team, there is no way for me to drive every single bit of my digital product to make it more inclusive and more user-friendly. It has to be the people driving the product forward.

[00:21:44] Now I'm going to sum up with maybe two or three slides. Especially because we are standing at a national level, and because we are doing service delivery during a crisis period, there will naturally be some additional requirements: speed of execution, accuracy, reusability, scalability and so forth. That's the part I want to call out. There is a technical module, like the one I mentioned, the MaskGoWhere [?] one. Last time it would take me bobby [?] one day, two days, including scotty [?] maybe one week to come up with an information distribution website. But now, because of a tech stack like that, the whole effort required is cut down to a few hours.

[00:22:33] What is even more important is that along the way we solve issues like accessibility, or some browser that isn't compatible, which would immediately affect the user experience. Once we have solved it, we code it into the tech stack itself, which means that the next time I go and deploy this tech stack, all those issues are already resolved. The same thing goes for another example: last time there were some data accuracy issues, where I never considered this crowd of users and I needed to import a new set of data. Once I solve it once, this tech stack is going to support multiple initiatives and so on.

[00:23:17] Essentially, the message I want to bring across is that usability and inclusivity are not just a designer's job. It can be very much an engineering job as well, very tech stack driven as well. In fact, by combining them, your solution will be super powerful.

Designing for the service provider, and automated accessibility checks

[00:23:37] My second-last slide. This is actually a hard lesson learned as well. A lot of the time, as a fellow designer, when you design a certain solution, you just try to think of the direct end user, the citizens themselves, and so forth. But in reality, especially if there is a service provider standing in the middle, it is equally important for your solution to be appealing to the service provider. If there's no value proposition for them, if, let's say, you're benefiting the end user but making the service provider work doubly hard, chances are they are not going to pick up your solution, and at the end of the day the impact of your product won't be able to reach the citizens themselves.

[00:24:27] On the left-hand side: surprisingly, a lot of initiatives are not just to serve the citizen directly. We want to help the elderly who are staying alone in Singapore. Instead of providing a direct digital tool to the elderly themselves, which obviously does not make a lot of sense, we are helping the service providers make their job easier so that they can provide a better service to them. On the left-hand side is a customer relationship management system to help facilitate the daily ops, since we can't get to see each other that often. The middle part is the keyboard itself, as I mentioned. Now there don't need to be so many rounds back and forth; people can just key in the name themselves, so eighty percent of the time people get the name correct, and it saves everyone's time. So it is also appealing to the service provider. On the right-hand side, on top of the digital solution itself, we also have some tools that help the service providers know at one glance whether the data integrity is all there, so that in return they can provide a better experience to the front-end citizen.

[00:25:38] This is my last slide. There are other things we have done when you want to do usability and accessibility at a national level. We have made quite a bit of progress when we combine the design skill with the engineering skill. What you can see here is that we have done a lot of automation and integration with accessibility evaluation tools, as well as some SEO tools and so on. Once we onboard a government agency website, we schedule this set of tools to run automatically, without anyone triggering anything behind the scenes.

[00:26:22] You might be a fellow service provider, a public officer maintaining a particular website, and every Monday you're going to receive a report showing that, maybe on this part of the screen, the contrast is not strong enough, so it breaks some accessibility principles, and asking you to please fix it. This brings me to the important point on the right-hand side: we don't just condemn you, we also advise you on the improvements you can make. These are the failing elements and this is how you can fix them. We try to reposition the whole thing into something more positive, and we improve together. We don't wait until citizens complain before we do something.

[00:27:05] With that, thank you for being here with me. I hope I didn't bore you too much. Essentially, I tried to wrap it around three key principles. First, we think iteratively about the outcome and the value I can bring to the user, in terms of the product mindset. Second, we have a process in place: no matter how hectic the situation is, we have a process to drive this design thinking approach, to make sure that we capture more pain points that we never captured before. And last but not least, we rely heavily on people to help us push on the ground, put things together and drive better services together as one government. Thank you very much, and that's my sharing. I hope you'll find it useful. Thank you.