Common: Refugee Mentoring Program

Responsive Web Design

My Role: UX / UI Designer


We are witnessing the highest number of people being displaced from their homes since World War II. Refugee and asylees need support when they first arrive to their new host country in order to better their chances of success and social integration. 


Identifying the areas of greatest impact, design a universally easy to use responsive website which connects the local community with new arrivals and promotes understanding and integration.

4 week design sprint; Research, Define, Design, Test were all allocated a week with a human centered design approach to reduce risk and uncertainty. 



Secondary research and competitive analysis were the starting point in understanding the design challenge and the resources currently available to new arrivals and community involvement. 


  • 20 people are newly displaced every minute of the day around the world. With this movement, we should be looking for solutions to help them on a local level. 
  • Mobile First. Refugees like to stay connected through social media using their mobiles.
  • Statistics can be overwhelming. People make donations on emotion and respond better to visuals and individual stories. 

Five interviews were conducted to gain some human centered insight into the topic of refugees and volunteering. This included three empathy interviews, as well as chat with a former refugee (now US citizen) and a program manager at a local refugee centre. See the full interviews here

From the empathy research, 3 personas were generated to address their needs and desires; the Refugee, the volunteer and the non-profit employee.


With the drive to identify the key concern for a new arrival, what resulted was a list of recommendations before moving into the define stage.


  • Mobile first when building the responsive website 
  • 1:1 support for a family or individual
  • Inclusive of refugees and asylees
  • Clear language aids online for both government and supportive systems.
  • Access to job training and industry networking
  • Government system support needed
  • Community engagement through social media
  • Endorsed by a larger more established organization for greater trust
  • Screening process for volunteers
  • Individual Stories; quotes, images and video
  • Step by step guidelines
  • Refugees can connect directly with the service
  • Live chat availability for the human element


Generating an opportunity statement based (people + need + insight) I began brainstorming possible solutions and defining the direction of the project. 


Create a mentorship program and platform where people can connect with varies degrees of involvement; a digital hello, outings, events, mentorship and resources. 

With this ambitious idea in mind, a site map, task/user flow and features list was created to define the perimeters of the first release. By doing this, I was able to focus on the core of the product; an avenue to connect new arrivals with the community.


With greater access to potential volunteers, the task and user flow was centered around the volunteer application process. 

Exploration of layout ensured all the relevant features were captured and prioritized according to the research findings. 


DSCF2072 2.jpg

It was essential to create a brand that was approachable, community driven and supportive. When brainstorming a name, I landed on Common.

Common People, Common ground, Common America. 

Bright, playful and welcoming colors were chosen to reflect the key elements of the brand; providing an uplifting community inclusive of new arrivals and the local volunteers. 




Keeping in mind the broad spectrum of users, I wanted the website to feel open and clean while maintaining legibility. Navy and white created contrast and became a visual aid in sectioning the information. Color added a playful accent. Humans are the center of this story, so photography also became a key part of telling a story. 

version 1.jpg

Ideation and interaction created a version 1 of the volunteer task flow. Identifying three users based on the volunteer persona, usability testing was completed in order to to highlight any pain points. 

From the raw data, an affinity map help isolate the key issues that were were high in severity and frequency. 

Expanding the volunteer task information was key to the users feeling like their was a spot for them in the community. With the increased text, additional imagery was introduced to both create informational sections and allow the users to visualize their involvement in the program. The outcome is a more fluid and informative volunteer page.


Affinity Map_Common.png

The resettlement of refugees and asylum seekers is a complex issue. One which I feel I only had the chance to graze but would love to explore further. With a quick turnaround, the research was largely focussed on the narrowing down the needs of the new arrivals to create a mentorship program. 

Next steps would be to build out the remainder of the site for the first release. Research and development the refugee registration process, events and resources. With the evolution on the first version, further testing as a complete site would be undertaken before release. 

Beyond this release, this project offers further development, allowing users to connect directly through an online community, creating an avenue for asking questions, creating outings and forming supportive social networks.