Barangay (2022)

UX Case Study

My Role

UX & UI Designer
Visual & Graphic Designer
UX Researcher
Slick Deck Designer & Presenter

Team

Kayla Hop Hing
Ben Valles
Winnie Huo
Chenchen Zhu
Yibei Zheng
Steven Poung

Tools

Figma
Figjam
Illustrator
Photoshop
Procreate
Pencil Sketching

Our General Process

Problem Space πŸ’­

RSA Brief 7: Nature of Work

"How might we reimagine the way we work in the future to reflect local context, experiences and knowledge?"

My Proposal to the Team

During our ideation phase, I presented to the team an idea for an application that would serve as the community hub, work, and resource centre for new immigrants living in Canada. Highlighting the experience that my own parents went through, as Chinese immigrants coming to Canada, my parents came face-to-face with the bleak reality, that they were alone in a new country with very little money, no job, intermediate English skills, and no immediate friends or family.

Through navigating through all of these obstacles, they found websites that fostered community, provided information, jobs, and other helpful resources, that all catered to the Chinese-Canadian demographic, such as 51.com and Rolia.net. These sites helped them acclimate to life in Canada with much more ease, it provided them insider tips & tricks from others that went through similar situations, and the site also boasted active job posting and hiring sections. Decades later, my parents still use these very same sites, but for a different purpose, to find and hire personnel for jobs and contract work.

These websites and their resources were extremely helpful and supportive in their journey in navigating a new and unfamiliar landscape. As this was an issue close to my heart, I chose to earnestly push for us to create an application that could serve as a means to bridge the gap for new immigrants coming to Canada through digital literacy, sense of community, and accessible resources.

Challenges

πŸ“‘

Language Barrier

πŸ’»

Gaps in Digital Literacy

πŸ”—

Lack of Connection

πŸ‘₯

In-Group Biases

πŸ—‚

Inacccessible Resources

Our Goal

How can we create a product that can bridge the social, and economical gap for Filipino-Canadian immigrants and newcomers to Canada, through accessible design, tools for professional development, and digital literacy?

Our Solution

Barangay

BRGY: An inclusive, community-oriented web application that enables Filipino immigrants of Canada to foster digital literacy and career-building skills in exploring the Canadian job market.
(β€œbarangay” - /ˌbΓ€rΙ™NGˈɑī/ (in the Philippines) meaning village, communities, & neighbourhoods)

Contextual Design Thinking

Our team worked to design our product to tap into the users sense of β€œhome” and belonging. Whilst still featuring an interface that walked the line between the Eastern and Western styles of product design. It was essential for our team to understand the cultural, technological, and social contexts for the East Asian audience we are designing for.

Super Apps 🌟

β€’ Asian centric applications usually feature a multitude of features. These are dubbed as "super apps" that can boast a wide range of capabilities.

β€’ Ex. WeChat or Line have features that range from communication channels, QR scanners, financial transaction processing, and more.

Information Architecture πŸ“

β€’ East Asian applications typically are content heavy, as compared to their Western counterparts. Utilizing less white space to highlight their wide range of multipurpose actions.

β€’ Western design features more white space. With overall information architecture much more minimalist.

Clicks per Impression πŸ”

β€’ East Asian design generally places more emphasis on click through rates (CTRs) resulting in the prioritization of pop-up advertisements and product marketing.

β€’ Western design does also place value on CTRs, however, advertisements are shown in a more negative light.

Scope

The Filipino community is rapidly growing in Canada, according to a 2021 census, there are 957,355 Filipino Canadians living in Canada, or 2.58% of the total population. They are an extremely prevalent immigrant community within the nation, however, many individuals within this community face hardships in finding long-term, secure, employment. Due to a multitude of factors, such as unfamiliar job landscapes & cultures, lack of social connections, or culture shock. Not to mention, these challenges could become further compounded because of a language barrier, which ultimately back many immigrants into a corner as they are forced to take on more difficult and strenuous working conditions. Through our research, we were able to determine that in the Filipino-Canadian community, there is a significant emphasis placed on word-of-mouth. However, the community lacked an effective product or service that promoted professional opportunities beyond just word-of-mouth.

Competitive Landscape

51.ca

Offers local news, events, job boards, but was designed solely for the Chinese-Canadian community. The website is designed with little regard for standard UX/UI practices, information hierarchy, and there are large chunks of the website that cannot be translated. The jobs board is active and refreshes daily, however, the postings themselves are not translatable & many only feature minimal information about the job position/company.

Rolia.net

Initially founded in the year 2000 and is a big hit within the Chinese-Canadian community. With a mission statement to be open and welcome to everyone, It's a place for people who share Chinese root and heritage, as well as people who are interested in Chinese cultures, both traditional and modern. The site offers helpful resources such as discussion forums for practically any topic (both in English & Chinese), extensive travel guides, messaging, and music sharing,

Proposal Boards

Leveraging Research in Design

Primary Research

Our team leveraged primary research methods to help us gain a deeper understanding of the Filipino-Canadian communities living in Canada. Our primary research helped us make informed design choices pertaining to the existing pain points and needs of our demographic in order to maximise accessibility and usability within our product. Our research includes two major outputs:

Community Questionnaire

Our survey’s objective was to generate quantitative data and gain insights into the various users that exist within our target demographic, what their needs and goals are, and through what methods they currently receive their resources related to community, digital literacy, and navigating the Canadian job market.

(the community survey was created using both English and Tagalog)

Interviews

We knew we needed to gain specific input related to exploring the perspectives, opinions, behaviours, and experiences of our target group. So our team conducted five interviews with first-generation Filipino immigrants in Canada.

Research Insights ⚑️

Weight of Words πŸ’¬

β€’ Within Filipino communities in Canada & around the world, it's common to see job opportunities spread through word-of-mouth. Often times, employers will find potential employees through mutual connections and similar cultural backgrounds and nationalities.

A Different Landscape πŸ™

β€’ There are significant differences pertaining to the job landscape in the Philippines than from that of North America. Although there are similarities, it mainly comes down to smaller differences within the hiring process (application process, interview structure, and resume.

Job Security πŸ”

β€’ Many individuals move to Canada with the intention to find work. Sending a portion of their pay cheque overseas to support their families. Filipino immigrants usually place a high degree of value on hard work to get job security, and Β long-term employment.

Branding & Visual Design ✨

Overview

When brainstorming the visual components of our system, there were two essential attributes that heavily informed our design decisions.Since BRGY (Barangay) is meant to represent community, fostering relationships, and forming connections, much of the design choices we have made revolved around invoking a feeling of familiarity. Our colour palettes, graphics, and imagery all have major influences from Filipino culture, trends, and the country's natural environment. We incorporated this with North American design trends that place often gravitate towards a more minimalistic style with ample white space.

Design Trend Influences (finding a middle ground)

Super Apps 🌟

β€’ Maximalist approach to design
β€’ Information dense and text-heavy
β€’ Bold, saturated colours
β€’ Graphics tend to be pictorial and decorative with emphasis on character design and iconography

Fillipino Roots

β€’ Reds and Oranges are used often.
β€’ Gold accents - for a touch of sophistication.
β€’ Geared towards nature and the inclusion of natural elements.
β€’ Line art and Geometric shapes.

Clicks per Impression πŸ”

β€’ North American design, generally speaking, places more emphasis on a minimalistic system, and designs are created with extensive thought towards negative space, and readability.

Colour Pallete

Primary

Secondary

Information Architecture

To begin the ideation process, we evaluated the features that we needed to include within our system to serve our target audience. Through this process & research, we recognized a need for two distinct account types; an individual account and a business/organization account.

Through the use of market research and compiling our features using the MoSCoW method, we were able to create a system requirements chart which served as the foundation for the information hierarchy of each unique account type.

Prototyping

Low Fidelity

Our low fidelity prototypes were based on wireframes we brainstormed and sketches, before rebuilding within Figma.

User Testing

Using the low fidelity screens as a benchmark, we created polished, high fidelity interfaces with interactions in preparation for remote user tests.
Although this form of user testing did have some restraints, we were able to gather some extremely useful insights from the study. Unfortunately, these findings were not able to be implemented within the final working prototype.

Web & Mobile Interfaces Avaliable

01

Barangay: Onboarding

Easy shopping lists shared between family, friends, roomates, and partners.
‍

02

Barangay: Resume Builder

Easy shopping lists shared between family, friends, roomates, and partners.
‍

03

Barangay: News and Events

Easy shopping lists shared between family, friends, roomates, and partners.
‍

04

Barangay: Jobs Board

Easy shopping lists shared between family, friends, roomates, and partners.
‍

05

Barangay: Homepage

Easy shopping lists shared between family, friends, roomates, and partners.
‍