Common

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. 

Responsive Web Design

My Role: Brief Creation, UX / UI Design


CHALLENGE

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.

SOLUTION

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

4 week (80 hours) design sprint.

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

APPROACH

 
close-view-of-macbook-pro-on-white-desk.jpg

RESEARCH

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

Five interviews were conducted to gain some human centered insight into the topic of refugees and volunteering; three empathy interviews with local residents, one former refugee (now US citizen) and a program manager at a local refugee centre. A summary of my findings can be seen here.

Three personas were generated to address the needs and desires across the issues; the Refugee, the volunteer and the non-profit employee.

  Research lead to three personas; The Refugee, the Volunteer and the Non Profit Employee.

Research lead to three personas; The Refugee, the Volunteer and the Non Profit Employee.

 

With the drive to identify key concerns 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


DEFINE

Drawing on the information and recommendations, I began brainstorming from an opportunity statement pointed me in the direction of the solution;

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

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

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

 

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 and identify the core characteristics; an avenue to connect new arrivals with the community.

The challenge was always going to be how I could address the needs to refugees. With the time restraints of the project and having greater access to potential volunteers, I focused the design sprint on the volunteer and their experience applying to the program.

task flow: Volunteer Registering.png

Results from the empathy researched revealed that the volunteers wanted the flexibility to control the amount of involvement in the program. With this in mind, I started sketching out a login area, which would allow users to connect through a digital hello, set up meeting and social events. Very quickly, I realized the complexity of this task and returned to my feature list to refine what could be achievable and the core priorities. Instead I redirected my energies to the core of this mission; inviting people to connect and get involved with their community in person.

DESIGN

 Early exploration of membership account page.

Early exploration of membership account page.

 

Research revealed that statistics are overwhelming and the importance of personal stories are key to engaging people in an issue. Next, users seek a clear statement of what the organization is hoping to achieve and their legitimacy through partnerships. But their are multiple sides to this story, and their must also be an opportunity for the new arrival to identify with the story and see clear results of getting of getting involved. As well as text, competitive research revealed video was often used as an introduction to the organization.

 Drawing on the research, the responsive homepage highlights individual story, program goals and how to get involved.

Drawing on the research, the responsive homepage highlights individual story, program goals and how to get involved.


It was essential to create a brand that was approachable, community driven and supportive. Brain storming a name that would capture all of this, I landed on Common.

Common People, Common ground, Common America. 

These themes of community and interconnection influenced the exploration of the logo design. 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. 

BRAND

 Brainstorming the programs name to incorporate global inclusiveness.

Brainstorming the programs name to incorporate global inclusiveness.

 Journal exploration the logo common.

Journal exploration the logo common.

 Variations on the common logo created in Sketch. The final design was chosen for this simplicity of shape and narrative of people coming together.

Variations on the common logo created in Sketch. The final design was chosen for this simplicity of shape and narrative of people coming together.

  Logo, Watermark, icons and colours all created with branding; welcoming, open, safe and joyful.

Logo, Watermark, icons and colours all created with branding; welcoming, open, safe and joyful.

UI DESIGN

 

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. People are the center of this story, so realistic, honest photography also became a key part of telling a story. 

  Homepage starts with an individual story to humanize the experience.

Homepage starts with an individual story to humanize the experience.

  Volunteer page with the use of icons to explains how to get involved.

Volunteer page with the use of icons to explains how to get involved.

2Forms.png

Ideation and iteration created a version 1 of the volunteer task flow but I really needed input to valid and push this project further by highlighting the pain points. Identifying three users based on the volunteer persona, I conducted usability testing on the sign up process.

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

TEST

  Affinity Map allowed me to break out the key information from the user testing, highlighting the both success and pain points. This lead to prioritization of changes based on frequency and severity.

Affinity Map allowed me to break out the key information from the user testing, highlighting the both success and pain points. This lead to prioritization of changes based on frequency and severity.

 

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.

  Volunteer Page before and after user testing. The users wanted more information about the roles, including pictures, enabling them to visualize what the position and community would be like.

Volunteer Page before and after user testing. The users wanted more information about the roles, including pictures, enabling them to visualize what the position and community would be like.


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 focused on the narrowing down the needs of the new arrivals.

Looking towards next steps, further research and development into mentoring, the refugee registration process, events and resources could also uncover further opportunity and shape version one. 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. 

CONCLUSION

front-view-of-macbook-pro-with-a-library.jpg