Promoting the well-being of the Aboriginal Community: A UX Case Study
The Fraser Region Aboriginal Friendship Centre Association (FRAFCA) is part of a sister network of Friendship Centres throughout the country of Canada. They are a non-profit organization based in the Fraser Valley region of British Columbia. You may be asking what a Friendship Centre is exactly if the term is not familiar to you, so please allow me to share.
FRAFCA is located in BC, Canada and over the past 21 years, they have assisted urban First Nations to have a “home away from home”, including the Metis and Inuit people. They value culture and supporting the community from generation to generation. They actively continue to support the community and promote the visions of “Strong, healthy, successful Indigenous people” — Info from their website
The Team
I would first love to introduce the wonderful team that worked on this three-week project. On the UX side, there is Natasha, Vinamra, and myself, Jessica. On the UI side, there is Andy and Shaeli. Together we worked on meeting the goals of FRAFCA and their users.
Research
After researching FRAFCA as a team, we met with our client to gain a better understanding of their specific goals. From our kickoff meeting, we found some key information that we could use moving forward.
The key points from the meeting being:
By talking with our client we can determine exactly what the problem they are facing is and how we can move forward as a design team to solve it.
The Problem
Overall, the main problems on the current website were:
- The poor navigation had users not knowing how to find what they were looking for
- The events are not up to date, whereas their facebook account has the latest updated events. The issue is not everyone has Facebook and we need to make the design inclusive.
- Not all programs are displayed on the website, causing people to refer to the physical pamphlet instead.
- The current website provides only 1 contact directed at the reception desk. The receptionist then has to forward these calls to the concerned person.
Research/Competitive Analysis
After our client kick-off meeting, we then jumped into our organizational and domain research, then performed a competitive analysis. We researched a total of 7 other Friendship Centres throughout Canada to gain a better sense of what they were offering on their websites.
For the competitive analysis, we first analyzed the features on FRAFCA’s website and created a list, and then moved forward to compare these features to the websites in our domain research.
- We compared the features by percentage due to the large amount and to give us a clear overview of the data. We found that the most common features/pages were the Home, About, History, Programs, Contact Us, and Get Involved, Calendar, and Social Media Integration.
- The least common were the Archives, Testimonials, and Staff/Team.
This competitive analysis gave our team a better sense of what we could keep and what we could remove from the website if backed up by our further research.
Survey & Interviews
After completing our initial research and competitive analysis, we came up with an initial hypothesis.
Our Hypothesis: The Aboriginal community is looking for program and event info but due to lack of website information and excess pages, they have a difficult time navigating the current FRAFCA website.
We then moved forward in confirming this hypothesis by deploying one survey and completing 6 user interviews.
In our survey, we asked questions regarding the positive experiences of being a part of the Aboriginal community, the culture, as well as the frustrations they experienced when using organization(s) websites if applicable. This gave us a better sense of features to include in the re-design.
Survey — Key Findings
Interviews — Key Findings
While talking with the indigenous and non-indigenous users we observed that:
- There are 2 kinds of users, newcomers who were not aware of the organization at all, and the ones who are already involved with FRAFCA.
- Newcomers used the website to learn about their mission, history, the programs they offer and how could they get involved with the organization, enjoyed visuals and easy navigation on websites.
- Ones already involved primarily used the website to know the event and program dates as well as contact info
- People used desktop or mobile depending on their preferences at the moment
Affinity Diagramming
After completing our survey and interviews, we used an Affinity diagram tool to organize and analyze the data. This tool helps us in further determining the main problem to solve in our design before moving forward.
Through our research, we found that we could confirm our hypothesis and move forward with the planning phase.
Personas
We then moved onto creating our user persona. In this case, we created two user personas as we found from our research that there were two types of users. Our first user persona or primary persona is Raymond.
Raymond has recently just moved to Greater Vancouver, and he is looking to connect with FRAFCA so that he can gain support through the organization’s programs and services. He is also looking forward to attending events to meet new people in the aboriginal community. He goes on the FRAFCA website trying to find more information regarding the programs, services, and events but has difficulty finding the necessary information about who to contact. He also finds that the program, service and event information is not up to date. Connection and ease of navigation are important to Raymond.
Now, meet our secondary persona, Joyce.
Joyce is a former social worker in the Fraser Valley Region who is highly interested in giving back to the community through volunteering. She has worked with multiple Aboriginal organizations in the past and would love to provide her skills and services to them and their visitors wherever she can. Joyce knows about FRAFCA and decides to visit their website to view volunteer information and send in her application, but realizes that the website doesn’t offer much info or a process to apply easily. She finds it frustrating that she has to connect directly with the organization to find the basic information she requires and wants to work with a reputable organization. Time is very important to Joyce.
Storyboards
After creating our personas, we moved forward into creating our storyboards for each. The storyboard helps us form ideas for our user flows by telling a story of our personas situations.
Customer Journey Map
Our team then moved onto creating a customer journey map for the users, plotting out the highs and lows experienced in their journey of using the website.
Our team analyzed the points on the customer journey map to target how to improve the low points and improve the users’ overall experience. The primary lows are experienced during the programs and services page, as not enough information is shown on the website, as well as the event updates, as the website has no calendar at the moment. A few other low points include the third party integrations, asking for help, location, and contact. These points cause frustration for the user as the info is not updated or easily accessible on the pages, and is generally a confusing process for the user.
MVP/Feature List
Moving forward in the process, we determined our MVP/feature list by using the bucket method. We create this primarily based on the users’ needs. We sorted what to keep from the current website, what to discard, and what to modify. We also included what features to add to the new website.
This MVP is based on what to include in our limited three week time frame and unfortunately, we are not able to add all features into the first version of the website.
User Flow
The user flow is the final step in the planning phase before creating our paper wireframes and prototype. The user flow shows the path our user personas will take within the website to reach their end goals. Each user flow is meant to target the low points and frustrations that users currently experience and how we can solve this with a streamlined experience.
Raymond’s user flow features his journey through the programs and services page, to attending an event that FRAFCA offers.
Joyce’s user flow features her journey through learning about FRAFCA and how to get involved, to contacting the organization for further info regarding registration.
Paper Prototyping
After finalizing our user flows, we created our initial paper wireframes and tested out the prototype on various users by assigning them tasks to complete. This was for us to see what needed to be included and what could be removed.
User Testing — Tasks
These tasks were given during the low-fidelity phase as well as the mid-fidelity phase but I will summarize them here. We tested with 8 different users, not included in our group so they were not familiarized with the concept or idea, therefore yielding better results.
User Testing — Iterations (Finalized in Mid-fi Version)
The iterations we made to our low-fidelity prototypes were implemented into our mid-fidelity wireframes after further testing confirmed the changes to be made. Below I will showcase the changes we made to our wireframes to suit the users’ needs.
Desktop Walkthrough
The primary features of the website include the events calendar and contact form. We also added a donate feature which has third party integration through Chimp just as the events page does so through Eventbrite.
I will remind you of Raymond, our primary persona. Raymond is looking to know more about the programs and services that FRAFCA offers so he navigates the “Programs and Services” tab of the navigation bar. He hovers to see his options or he can click the menu item directly to go to the overview page (he can also select view all at the bottom of the dropdown.
He lands on the programs and services overview page and is interested in viewing “Health and Wellness Promotion”, so he proceeds to click the CTA.
He lands on the programs and services Sub-Categories page where he can view the specific programs and services within the higher category. Raymond is interested in learning about the “Positive Health Program” so he clicks the CTA, where he is greeted with the specific program page. This page consists of info including an overview, program dates, times, and location, as well as direct contact info.
We added a direct contact form as well connected via email for easy direct contact without the use of a phone. It provides a fast, convenient and simple way of contacting.
Raymond is also looking for an event at FRAFCA so he decides to go to the “Events” tab in the navigation bar. He is greeted by the events calendar (far left) and as he hovers over the Culture Night Event (middle), he sees the base info for the events and is interested so selects the CTA so view more details (far right). He has the option of getting tickets or RSVP’ing through Eventbrite, where he can share via social media or invite friends if he chooses. He can also share the event directly through the event info page of the website.
Mobile Walkthrough
I will remind you of Joyce, our secondary persona. Joyce is interested in getting involved with FRAFCA so she comes onto the website on her mobile phone to learn more about the organization and how to get involved.
Joyce scrolls through the home page (left) and is interested in learning about the organization so taps the “Learn More” CTA. Joyce lands on the “About Us” page (right) and explores to learn more about FRAFCA and their history. Towards the bottom of the “About Us” page (far right) she is prompted by a CTA to learn more about the team currently involved with FRAFCA, as she is interested in becoming a part of the team.
Joyce lands on the “Meet our Team” page (left) and browses to learn more about FRAFCA’s team. She then taps the Hamburger Navigation icon in the top left (right) and navigates to “Get Involved” as she is now ready to contact the organization regarding volunteering.
Joyce then lands on the “Get Involved” page (left), featuring the different ways to get involved with FRAFCA including Volunteering, Job Positions, Donate, and Practicum Students. Joyce is interested in volunteering so she taps the CTA to learn more.
She is navigated to the “Volunteer” page (right), where she learns about the position and director contact info. For easy contact, she can fill in the contact form near the bottom of the page, similar to the Programs and Services form.
InVision Prototypes
For further exploration, please view the Invision Prototypes below.
Web Version
Mobile Version
Future Considerations
This project was very eye-opening and taught our team extensively about the culture of Friendship Centres and the hard work they put into creating better lives for the Aboriginal community. We were absolutely honored to work with FRAFCA on this project.
In terms of future considerations, we wanted to include:
- Online application for Programs, Volunteering, Donating and applying for a job
- News Feed
- Programs Calendar
- Check availability of beds (for housing services)
Of course, due to time constraints, we were unable to add these features into our design but looking into the future we believe that they would be beneficial to FRAFCA based on our research.
From this project, our team had great collaboration and communication and this furthered our understanding of how important this is in any team-based project.
Thank you for taking the time to read and support my work!
