UI + UX design
How can we use immersive design to help migrants navigate and integrate with unfamiliar communities?
During a 48-hour workshop, I was the augmented reality team design lead. We worked to create an experience for the Mygration project, an online portal for migrants to document their experiences throughout their journey to finding new homes. We saw an opportunity for immersive design to help solve the challenges that come with language and cultural barriers, so we used designed and developed an AR visual culture translator.
Immersive design moves beyond pre-defined conditions
Blurs and shadows create visual separation between UI elements and countless potential backgrounds. When users scan objects, they access more than just a definition. From pronunciations and idioms to slang and explainer videos, this information empowers users to not just learn language, but culture.
Simplified illustrations and motion to educate users
After the workshop, I designed the motion for onboarding screens and developed them by implementing Lottie with Swift code. Finally, I created all the UI elements in Swift and oversaw implementation across the app. Most of the team was new to coding with Swift, so I kept the UI elements minimal to simplify development.
Designing within technology limitations of users
Key design challenges were the severe limitations to reliable network access at migrant camps and the high battery usage of AR experiences. To address these constraints, we created an offline mode so users could access information without a network connection. We also narrowed the scope to focus on cultural integration once users are settled in permanent locations to combat the inconvenience of excessive battery usage. Finally, by allowing access to location info, the native language of the user's new homes is automatically populated.
Narrow the target customer by expanding research
During target user research, we learned many migrants are forced to leave behind nearly everything they own and destroy personal photographs as a safety measure. Usually, one of the few items they bring with them is their smart phone. Mygration was created so they can document their photos and videos and share their powerful stories with the public. We decided a mobile experience that complemented the mission of Mygration could help these people overcome other obstacles such as improving familiarity with a new language or adopting cultural practices.
In the spring of 2018, most migrants were leaving places in the Middle East, with 50.2% coming from Syria alone. Many of these people were seeking a new home in Western Europe, Canada or the U.S. Our experience needed to support languages with non-Latin alphabets, such as Arabic, so we used San Francisco for optimal language support.
The original design frames
The original mockups used much subtler drop shadows and smaller typography. This approach worked far less often than the final concept we used for UI. We also altered our color system to align with the brand team's vision.