The 7KB web page that can save a life

  • 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.
A favicon is around 2kb — our desired size for the total website is 7kb
  • 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.

--

--

--

what3words is the simplest way to talk about location. It has divided the world into 3m x 3m squares, each with a unique 3 word address.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Call for Pervasive Personas

Exercise #3: Design in Daily Life

11 vital elements of art that make a good design

MAC Mineralize Skinfinish Highlighting Face Powder

MAC Mineralize Skinfinish Highlighting Face Powder

#01. MJ’s Thesis — Image Cluster

10 Things I Learned from My Colleagues

Ironhack Challenge 1 : Design thinking

TikTok and Its Content — UX Research Case Study

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
what3words

what3words

what3words is the simplest way to talk about location. It has divided the world into 3m x 3m squares, each with a unique 3 word address.

More from Medium

10 reasons how web accessibility can help improve SEO?

Two hands joining puzzle for Accessibility and SEO

Avoid “Zero Results” On Your Career Site

User Experience Best Practices

What are the magic metrics to measure your team’s performance?