For a moment, put yourself in the shoes of a newly-arrived immigrant from China who has recently moved to a small town in the United States for work. Being completely new to the country and having limited English proficiency, you struggle to settle down in this new community and face difficulty communicating with others.

There are tens of thousands of immigrants just like you across the country who would benefit from knowing about all of the resources and services in their area.

Fortunately, there can be a mobile app that solves this problem for you.

 
 
 
photo-1534294866851-03eeeaf7f5dc.jpg
 

Real-World Problem

Countless immigrants who come to the United States, often hoping for opportunities to improve their quality of living, do not speak English and therefore struggle to settle down for a lengthy period of time.

Some newcomers who do speak English still face issues in settling into a new area.

I personally have faced similar struggles when moving from another country to the United States as a young child, as well as when moving to and from multiple different cities throughout my life.

 

Design Solution

The main goal is to design a mobile app that aggregates local resources and services (e.g. grocery stores, churches, community centers), and essential information for immigrants and newcomers. Users would be able to discover new places via the app, which would make it easier for them to take advantage of valuable local benefits and resources.

 

My Roles

User Experience Designer and Researcher

School project -> expanded to personal project


Tools

  • InVision

  • Sketch

  • Principle

 
 
 

Conducting User Interviews

 
 
 
 
 

To fully understand the audience that I am designing this app for, I interviewed 10 immigrants from a variety of ethnicities and socioeconomic backgrounds. The interviews were semi-structured and lasted for about 20 to 30 minutes.

 
 
 

Designing User Personas

 
 
 
Church.png
 
 
 

Key Pain Points

Through those above personas, I noted four main pain points that would lead to potential design opportunities:

  1. Uncomfortable with their surroundings

    Most immigrants felt uncomfortable looking for new resources or services in person, and would rather rely on their social circle for local information. I want to help them break this barrier.

  2. Unaware of nearby resources

    A few immigrants indicated that they have lived in their community for over three years, but have never heard of some local resources until very recently that would have been extremely helpful to them if they had found out earlier.

  3. Insufficient knowledge with technology

    Over half of the interviewees had at least basic knowledge of using a smartphone, but they mostly use it to communicate with close ones via call or text.

  4. Most interested in language, education, and finance-related resources

    Due to the interviewee’s financial and personal situations, they are looking to maximize their success in those departments.

 
 
 

Transferring Research To Design Opportunities

Based on my research findings and personas, I realized that I need to have these essential features in the app:

  1. A simple overall app design without the need of an onboarding process.

  2. Allow users to easily discover new resources and locations within a few screens.

  3. Easy-to-access information for each resource or service, which include business hours, address, contact information, available services, and more.

 
 
 

Iterative Mockups and Prototyping

Next, I wanted to design the app that would bring out positive emotions from users. These were my first mockups, so they are very rough.

However, my goal was to explore my visual design options, and to map out the essential features that are needed in the app.

You can check out my final prototype at the end of the page.

 
immigrantcollage.png
 
 

Iteration and Feedback

After this iteration, I received feedback and critique that exposed many usability and visual design issue my mockups had.

The biggest issues here were the overwhelming variety of colors, the distracting background, and the lack of needed information on certain screens.

 
 

With this feedback, I went for another round of redesign.

 
immigrantcollage2.png
 

I made sure that users see enough information before they tap on a specific resource to avoid unnecessarily bloating their mental model.

After receiving some more feedback from peer designers and colleagues, I noticed that the multi-color design, use of icons, etc., are very outdated and needed a more modern look, and some text was still hard to read. With this feedback in mind, I redesigned once again.

 

The two onboarding questions that I asked in this version of my mockups were removed. I didn’t think they were necessary and gave users any extra value, and it would likely deter some users from using the app at all.

 
 
 

Usability Testing

After these above designs were created, I quickly realized that there were a number of (mainly visual design) issues that needed to be fixed. This intuition convinced me to conduct five usability tests to validate my hypothesis.

These tests I conducted each lasted for about 15 minutes and all were in person with potential users who were immigrants.

Some of my findings are:

  • Not enough information provided for each service/resources

    • Users ended up wanting to search via Google instead.

  • Navigation slightly confusing because there is no menu to follow.

  • Inconsistent visual hierarchy and difficult to read text.

  • No need to have integrated maps feature.

    • Google or Apple Maps are acceptable.

  • Should allow users to easily access updates to these locations, including hour changes, holiday store closings, etc.

  • Should be able to access Yelp and Google reviews for each service when available.


After these results, I evaluated the feedback and redesigned once again.

 

Style Guide

 
 
 

San Francisco
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz


Using Apple's Human Interface Guidelines for iOS

#333333 (black - non-clickable text)

#333333 (black - non-clickable text)

#4F6B6F (Statue of Liberty color - main app color)

#4F6B6F (Statue of Liberty color - main app color)

#ffffff (white - welcome and login/sign up text)

 
 
 
 

Current Design

The current visual theme uses a green color to bring the feeling of financial stability and affluence. The variation of green is also a shade of one of the colors of the Statue of Liberty.

I also changed the name of the app from ImmiSearch to Sanctuary to reflect a more welcoming atmosphere to the app and to its potential users.

 
 
 
 

Before redesigning, I looked at competitors such as Yelp and Google Reviews for inspiration.

 
 
Asking the user for location permission through a conversation!

Asking the user for location permission through a conversation!

 
 

Users will see a red notification badge on the Updates tab bar icon when the app receives updates in the users’ surroundings, which can include business hours changes.

 

The visual hierarchies for a literacy center and a supermarket need to be different because each type of location must prioritize different information.

For example, the user is more likely to want to see the available offerings and photos for a supermarket before anything else.

On the other hand, the user is less likely to need to see photos of a literacy center, but would be more interested in the types of services it offers.

 

Here’s a walkthrough of the user reading about a nearby health clinic.

 

This is the view where users can view photos (if available) for a resource. (I chose to show a restaurant because food always appeal to people the most, but this design can be used for any photo galleries within the app).

 
 
Horizontal scrolling animation

Horizontal scrolling animation

 
 

Interactive Prototype

Click below to begin!

 

What I Learned

Confirming my hypothesis through user research is essential.

Through previous personal encounters and being a first-generation college student myself, I suspected that finding useful resources was a widespread issue across the United States and that immigrants could benefit from this application. In spite of that, however, I only became completely confident in my hypothesis after I interviewed immigrants who voiced the same concerns that I had heard and experienced before.

Users’ technical and language proficiency are significant challenges for designers.

Even though you and I may be experts on smartphone usage, many immigrants, especially ones who are older and less educated, may not be. Not only that, some of them may not be very fluent in English comprehension. All of this was shown through my user interviews. Therefore, having empathy for the user here is especially important. I had to keep these constraints in mind while designing and attempt to avoid complex design patterns for the sake of the user.

 

Read other case studies: DaySmart Software / NASA / Amazon (Password-Protected) / Sanctuary / YourGamePal