Michelle Peretz

I am a product designer passionate about combining behavioral insights with strong aesthetics to create delightful user experiences.

Re:source Connect

Resource Hackathon, September 30, 2017
Hosted by UC Berkeley Haas Business School & Refugee Center Online

For more information about the hackathon, see this article by Welcoming America

Duration: 1 day 

My role: UX Designer

Award: First place winner 

Tools: Sketch, InVision

Challenge:  "Refugees face isolation and lack traditional support from family, kin, and other network structures. Newcomers have consistently said something that would help them is an online place to ask questions and connect with others who have resettled successfully." How might we aid refugees in accessing resources while also facilitating community growth?

Solution:  An easily accessible communication tool that accompanies the online classes provided by Refugee Center Online. This tool connects newcomers to fellow refugees and other trained volunteers to supplement lessons and provide help in the language they are most comfortable with.


building personas

In order to focus our brainstorming, we created personas to understand the answers to these questions: Who are our users? What problems do they face? What can we do to help?


USER JOURNEY 1: REFUGEE

  1. Who are our users?

    • Newcomers to the US, with the ability to use a phone adequately (texting, talking, accessing websites, etc.)

    • Most likely 25 years or older

  2. What problems do they face?

    • Limited English speaking skils, potential low literacy level

    • Difficulty understanding US rules and regulations

  3. What can we do to help?

    • Provide them with access to individuals who want to help them

    • Supplemental resources Refugee Center Online courses

Our sample user is: Joseph, a refugee from El Salvador. Resident of the US for one month and trying to save money

USER JOURNEY 2: VOLUNTEER

  1. Who are our users?

    • Current or former refugees or non-refugees eager to help

    • Fluency in other languages besides English

  2. What problems do they face?

    • Specific time availability because of busy life schedules

    • Desire to maintain some degree of anonymity

  3. What can we do to help?

    • Allow them to decide which messages they want to respond to

    • Opportunity to indicate availability and easily accessible platform


Our sample user is: Amy, a second-generation Spanish speaker. Her grandparents are from Mexico, and she wants to help people like them. 

Screen Shot 2017-10-02 at 7.00.00 PM.png
Screen Shot 2017-10-11 at 9.41.57 PM.png
Screen Shot 2017-10-02 at 7.12.18 PM.png
Screen Shot 2017-10-11 at 9.42.07 PM.png

wireframing

After our brainstorm and persona development, we had a clearer vision of what we wanted to create: a chat platform to connect refugees to dedicated volunteers.  To minimize barriers, refugees can text from WhatsApp or SMS and volunteers can control their availability through the online platform. We individually created low fidelity paper prototyping for the volunteer platform. Following the paper prototyping, I used Sketch to create a higher quality prototype of the volunteer chat platform based on my initial designs. My wireframe sketches are below: 

A more detailed view of the chatting dashboard and platform. Once we settled on refugees only utilizing text to access volunteers, I sketched a more specific dashboard for volunteers.

A more detailed view of the chatting dashboard and platform. Once we settled on refugees only utilizing text to access volunteers, I sketched a more specific dashboard for volunteers.

Volunteer user flow starts from Refugee Center Online. In my initial prototype, I created a platform for both volunteers and refugees to access.

Volunteer user flow starts from Refugee Center Online. In my initial prototype, I created a platform for both volunteers and refugees to access.


Evolution of the dashboard

We iterated upon our idea for a volunteer-refugee communication platform quite a few times, and the transformation of our volunteer-side dashboard clearly shows the evolution of our idea. 

Dashboard #1 is most similar to the initial wireframe I drew, with icons representing each category of resources available on the Refugee Center Online website. Should we want to extend this dashboard to the refugee population, we wanted the icons to be representative of their content so low literacy individuals could properly identify which resource they wanted.

Dashboard #1 is most similar to the initial wireframe I drew, with icons representing each category of resources available on the Refugee Center Online website. Should we want to extend this dashboard to the refugee population, we wanted the icons to be representative of their content so low literacy individuals could properly identify which resource they wanted.

Dashboard #2 represents the next iteration of our idea. During this phase, we decided to focus on financial literacy content, and also concluded that there should be more descriptive text for the icons.

Dashboard #2 represents the next iteration of our idea. During this phase, we decided to focus on financial literacy content, and also concluded that there should be more descriptive text for the icons.

Dashboard #3 is our final iteration. We cleaned up the layout, and incorporated language that highlighted the community focus of the tool by labeling the messaging icon "Connections."

Dashboard #3 is our final iteration. We cleaned up the layout, and incorporated language that highlighted the community focus of the tool by labeling the messaging icon "Connections."


The Final Design

To minimize barriers to access this tool, we did not want to create an app that refugees or volunteers need to download. Instead, refugees are able to text a number, depending on which language they speak, which connects to the volunteer platform. Volunteers can access their new and saved chats directly from their account on the website. For those users who are less literate, they can also opt for voice recording instead of written communication. 

 
useresource.gif
 

personal reflection & lessons learned

I learned quite a bit from this experience. Not only was this my first hackathon, but it was a wonderful opportunity for me to use my prototyping and design thinking skills in a highly collaborative atmosphere.  Throughout our many iterations, one of the most interesting but vital challenges was to return to the core values of our product: to build community and offer an interactive way to access resources beyond just going to a website. Personally, I greatly enjoyed thinking through our wireframes, and producing a high fidelity prototype with Sketch given the limited timeframe. We were thrilled to win first place, and look forward to working closely with Refugee Center Online to implement our idea. 

 
Screen Shot 2017-10-02 at 11.02.08 AM.png