The 7KB web page that can save a life
by Niki Forecast, Senior Product Designer at what3words
At what3words our aim is to become a global standard. We therefore need to make our service accessible to as much of the world’s population as possible, and a recent focus has been South Africa. This is because South Africa has an incredibly diverse population, with both ends of the income spectrum being affected by poor addressing. Those in affluent areas struggle to get parcels delivered, or to tell guests how to find their accommodation. Those in townships or informal settlements however are affected by far more fundamental issues — poor addressing makes it difficult to open a bank account, register a new phone contract, or even register to vote.
Despite vastly different standards of addressing across the country, one issue that affects the entire spectrum is communicating your location in an emergency. If you don’t have a proper street address, telling emergency services where you are can be extremely difficult. Lives are at stake, and services struggle to keep up with demand. Over the last year, what3words has been working effectively with emergency services across the UK. We thought we would be able to help services in South Africa in the same way, so that callers can share their what3words address with call handlers to help locate them.
However, we came up against one major barrier in South Africa that made responding to what3words addresses more difficult, and that was incredibly expensive cellular data.
In the UK the average cost for 1GB of data is $6.66, and the median household income is $31,617. In South Africa the average cost of 1GB is higher at $7.19, whereas the median household income is a fraction of the UK’s, at around $4,759.
The current process for using what3words in an emergency (for those that don’t have the app already on their phone) goes like this:
- User struggles to communicate their location to the call handler
- Handler asks the caller if they can send them a link to their handset. Clicking the link will open what3words in their phone’s browser, and will tell them 3 words which specify their current location.
- User clicks the link, and reads out the what3words address.
In the UK this flow works well. We’re currently optimising the UX to make it even simpler, but generally people are happy to click on a link that’s sent to them, and can follow the call handler’s instructions to communicate their what3words address. However, our testing sessions with an emergency response team in South Africa highlighted people’s reluctance to click on a link that they knew could cost them data. One user calling in about a car accident was so outraged at the anticipated data charges that they ended the call, and remarked that ‘someone else can sort it out’. Please note that the size of the page they would load is around 2MB, which by UK standards is pretty small. Once it was clear the data cost was a major barrier that wasn’t going away, as a product team we were soon tasked with the following challenge:
How can users access what3words without using data?
Currently the link that is sent to callers in an emergency is a link to our online map, which displays a user’s current what3words address, as well as a map that allows users to search for other locations if required.
After talking to phone companies in South Africa we learnt that there was a good possibility that we could get our website zero rated — so they wouldn’t charge their users any data to access it — but the page had to be around 7kb in size. Zero rating our current 2MB website was simply out of the question.
It is the map that takes up the large proportion of the file size, and we soon realised that for the vast majority of users, it isn’t actually required. Most callers in an emergency are at the location where help is required, and so they only need to see their current what3words address. We therefore set about creating a ‘FindMe’ web page that only displays a user’s current what3words address using their phone’s GPS signal, with a 7kb target file size.
A 7kb web page isn’t just small, it’s absolutely tiny. For example a website favicon (the tiny logo that appears at the top of a website browser) on its own is around 2kb, let alone any content on the actual page.
The final web page comes in just under 7kb, it displays only the content that is absolutely required, and has been heavily optimised by our front-end development team. Here’s how we did it…
- The first thing that you normally display on a website is the logo, as this provides confirmation to the user that they are in the right place. However the what3words logo is around 8kb, so this was replaced with ‘what3words’ in native text.
- The font we use in our app and across our branding material is Source Sans, however because this alone is 294kb, we had to use system fonts. This means the website displays in a font already installed on the device (normally Arial).
- what3words is currently available in 4 of South Africa’s 11 official languages: English, Afrikaans, Xhosa, and Zulu. By default, the web page loads in the language set by the browser. However this isn’t always accurate; many users prefer to use their home language even though their browser is set to English. This led us to an interesting UI challenge; how do you tell someone to select their language without using words? Often we can use flag icons, but this doesn’t work for countries with more than one official language. We’re experimenting with a globe icon, but we’re still waiting to see how effective this is.
- We then tell the user their what3words address, highlighting the text on white so it stands out as much as possible on the dark background. We’ve also added a copy icon for users who prefer to send it to the handler in a text message, and a text to speak icon that uses technology in the browser to read out the address for users with literacy difficulties. As much as file size is key, we had to keep the accessibility challenges of our audience in mind as much as possible.
- The rest of the content on the site is secondary, but was still required. We wanted to give users the option to go to our full map website if they needed to find an address of a place they weren’t currently located, and of course we needed the obligatory legals.
- With regards to technology, we’ve opted for JavaScript ES6, which is far more efficient than legacy JavaScript versions, and is supported by 97.7% of mobile devices.
- The webpage is created in HTML, CSS, and Vanilla JS without relying on any framework. All our CSS, Javascript, JSON, and even our SVG icons are given as inline code. This means the number of requests made to the server are at an absolute minimum, which reduces the time it takes the page to load.
After various testing and tweaking, the final site came out at 7kb, meeting our target exactly. Interestingly we could have made it around 3kb if we’d only required one language.
In March, Vodacom agreed to zero-rate the South Africa version of this web page, so as of the 1st April 2020, approximately 43 million people in South Africa will be able to access it without using any of their cellular data allowance. The page is live and has already been used in 10 successful rescues in the region.
The global version of this page is available at https://findme.w3w.co. This version is available in all of our supported languages, but because of this it’s total size is around 25kb. Please note that this version is not zero-rated.
We’re currently testing the web page to see how effective it is in use, and to see how we can improve the experience further.
The ability to view our web page without using any of their data allowance has enormously increased the accessibility to what3words in South Africa, and is one step closer to what3words becoming a global standard. For any product team with global aspirations, considering the file size of your digital product is going to be crucial in regions like South Africa, but even for those with a UK audience quicker load speeds can improve accessibility for everyone.
Information on the cost of data internationally can be found here, and the median household income information can be found here.
