Web & Product Design
September 2018 – November 2018
My team was asked to tackle a very broad issue: Refugees in America. Google Refuge is the result of five weeks of research, planning, and execution, from the initial stages of identifying the specific problem we wanted to address, to 3D modeling and video production. Throughout each stage of the process we had to ensure that we were putting the needs of refugees first.
I was specifically responsible for: designing the phone's hardware specs; designing the phone’s operating system and eInk versions of Google apps; and designing and developing the campaign website. To see the fully realized products, keep on scrolling.
Visit the Campaign Website
Over 25 million people globally have been forced to flee their homes from persecution or violence. They are now refugees. Google Refuge provides connectivity for those who have lost everything else.
The resettlement process for a refugee is a long one, often beginning with a catastrophe or some terrible event forcing the refugee to flee. They may not have time to gather the whole family, or retrieve important documents such as property ownership documents, birth certificates and IDs, etc. And once they arrive in a camp, access to the Internet is often limited or entirely unavailable.
Google, as one of the only companies in the world with the infrastructure and resources necessary to provide Internet capabilities to refugee camps, will launch a new project: Google Refuge. WiFi-emitting beacons stocked with hundreds of specially-designed phones are air-dropped into locations with the greatest need.
Physical Product Design
Building a Cheap & Indestructible Phone
The phone had to withstand rugged outdoor conditions and cross-country travel, as well as operate hyper-efficiently for users who often go long periods without access to charging.
The phones are built to military standards, with Corning Gorilla Glass DX (the glare-resistant glass used on smart watches) and a protective non-slip rubber casing. The phones use eInk technology to render the UI, saving on both manufacturing costs and processing power by foregoing colors and animations. See the full technical specifications below.
It's Google — In Grayscale
There were three main constraints to consider in developing the UI for the phones: the Google design system, eInk technology, and efficiency. Additionally, knowing the vast majority of camp populations speak Arabic as their first language, the default language is Arabic and all of the text and UI elements are laid out right to left.
The phones ship with six apps — pictured above — selected for their utility when it comes to the resettlement process. Everything is rendered in grayscale due to the eInk technology. The phone UI and app UIs are all faithful to Google’s design system and the Pixel 2 UI.
Explore the Prototype
An Innovative Campaign Rooted in Familiarity
The website should feel familiar to Google users and similar to other Google product pages. The copy and visuals needed to clearly frame the narrative and describe Google's new initiative. Drawing from the Google Pixel 2 and Google One sites, the resulting design is a unique hybrid that effectively serves as both a campaign platform and the home base for an emerging social good effort.
Visit the Campaign Website
The project began with a topic assignment: the refugee crisis. Our first task, then, was to figure out exactly which sub-problem we wanted to tackle within the larger topic. We established a long list of possibilities by reading countless articles and interviews with past and current refugees, listening to relevant podcast episodes, and researching both UN and US policy documents related to refugees.
As we sifted through the piles of data we collected, one statistic from the UNHCR (United Nations High Commissioner for Refugees) practically leapt off the page: Refugees often spend a third of their income on staying connected. And as we further explored the relationship between refugees and communication & connectivity, the role and value of internet access and smartphones in their lives became increasingly apparent. The quote below speaks for itself.
See why this phone is so dear? It has everything. All my family, all my world is here. That's why I'm always holding it.
Along with the above quotes and statistic, we learned that refugees are about half as likely as the general population to own a phone, and that roughly 30% of refugee households do not even own a phone. If phones are often more important than food and water, it was hard for us to imagine how those refugees without access felt — and we wanted to help. This led us to our big idea: Provide refugees with smartphones and internet access. Which, of course, is far easier said than done. But it is a noble goal, and it is directly relevant to the UNHCR directive laid out in their 2016 connectivity report:
UNHCR believes we can do better. Through creative partnerships and smart investments, UNHCR aims to ensure that all refugees, and the communities that host them, are connected to mobile networks and the internet so that they can leverage these technologies to improve their lives.
Obviously, this idea would need a large technology company behind it to work. A global brand with the necessary infrastructure, manufacturing capabilities, and corresponding brand mission. Three big ones come to mind ...
We eliminated Apple first, due to their irrelevant brand mission and closed ecosystem of products and software. Additionally, refugees already tend to use cheap Android smartphone models and are likely more familiar with the Android operating system.
Google was chosen over Samsung due to the fact that they developed the Android operating system and their history of refugee relief efforts, including device donations and sending volunteers to install WiFi in refugee camps.
Google Gives Back
It's a Win-Win-Win!
In order for this plan to work, we had to be sure that all parties involved were benefiting in some way — or else refugees wouldn't use it, Google wouldn't pay for it, and the UNHCR wouldn't allow it.
Refugees are provided free phones, free WiFi, and free charging (at the Refuge Beacon). The apps included are vital to sharing information, traveling between safe locations, communicating with family members, and organizing important documents for the resettlement process. Additionally, as a congratulations for successful resettlement, they are granted a free Pixel phone from Google.
The UNHCR explicitly states in their report that they are seeking "engagement of the private sector – in particular, large technology companies and mobile network operators – if we are to achieve this vision." If Google were to enact this solution, it would be exactly the kind of private sector support they are looking for.
While the benefits to Google may have a hard time outweighing the costs financially, they will gain an admirable and invaluable social good reputation. Additionally, this gives them a chance to expand their user base among a less-represented population and develop innovative solutions for those in need.
In order to frame the idea as something realistically possible, we needed to develop assets showing how it could work. These included 3D models of the phone & beacon, a UI prototype of the phone, a campaign website, and a concept video. You can see the finished products in the sections above.
I used a variety of tools to bring this project to life: Sketch to wireframe the phone OS & apps and website, InVision Studio for the high-fidelity prototype, Cinema 4D for the phone and beacon models & animations, and my three favorite front-end technologies (HTML, CSS, jQuery) for the live website.
I had two team members with me on this project. Joshua Perry, copywriter, and Joe Jones, art director. Josh was essential in capturing the dual emotional / explanatory tone needed on the campaign website and video. Joe helped us define our concept and pushed for creating our own phones, edited and voiced-over the video, and mocked up the Refuge Beacon 3D model in Cinema 4D. These folks are incredible — I couldn't have done it without them.