.png)
Karen Organization of San Diego
Karen Organization of San Diego (KOSD) is an ethnic community-based nonprofit serving refugees from Burma in San Diego. Our goal was to redesign the website and marketing strategies for KOSD to help create a welcoming space, improve community engagement, and amplify the voices of the Burmese refugees in San Diego.
Role
UX Designer
Duration
Summer 2022
(10 weeks)
Tools
Figma
WordPress
Team
Yvonne Liu
Tram Bui
Mandy Lai
Sarah Liu
Nicole Gong
Kayla Luong
DESIGN CO: BUILD UP PROGRAM
An opportunity to deliver solutions to uplift non-profits.
Build Up was a summer design series, where students work alongside industry mentors to curate solutions for the needs and goals of non-profit organizations - whether it'd be to refine their branding, redesign their website, or boost their exposure. Watch our final showcase below!
THE PROBLEM
Redesigned WordPress and its continual visibility struggles.
In spite of undergoing a recent redesign by another third-party, KOSD's website lacked a clear brand image and faced a disconnect with their online community. It fell short on usability for all parties, including the Burmese community themselves, sponsors, donors, volunteers, and individuals who wish to support their cause. How might we amplify KOSD’s voice as a refugee community and build awareness for refugee relief?
SOLUTION
Enhance KOSD's website for better user experience and information accessibility.
Our goal was to design an engaging, content-rich website with enhanced navigation and information organization. Creating a design system and a comprehensive branding guide would establish a clear image for KOSD.
.png)
UNDERSTAND
Learning our stakeholder's needs & concerns.
During the first week, I met with my stakeholders and uncovered concerns of their current online presence. They asked for quality control across their pages and and new content to increase KOSD community engagement. Below were three of their initial action items.
🖇
Scattered broken links
🖼
Hidden Facebook image thumbnails
📅
Need for News & Events calendar
USER RESEARCH
Gathering insights from KOSD's core audience.
To empathize with the refugees that KOSD serves, I worked alongside my team to collect 41 Google Form responses. When conducting A/B testing with 5 KOSD community members and 2 community leaders, I translated our high-fidelity prototype to Burmese to overcome the language barrier present.
Testimonials used for insights and website content.
Language accessibility for Burmese A/B testers.
FROM A/B TESTING
Key Takeaways
-
Members wanted their logo to stay the same
-
Suggested replacement of the KOSD video trailer with a more recent image gallery
-
Incorporate specific event details for the calendar implementation
-
They liked the visuals
-
Liked the new calendar option and testimonial section added
USER PERSONAS
Looking for direct support & third-party making a donation.
Based on community member profiles, the user personas highlighted educational program outreach and support system accessibility. It demonstrates the need for intuitive navigation on the site to improve findability of case management services.
PRIMARY USER
SECONDARY USER
COMPETITIVE ANALYSIS
Elements of other websites that KOSD was lacking.
Researching other non-profit humanitarian organizations allowed us to gain more insight on how their usage of emotional language and overall visual presentation.
Elements As Mentioned
-
Personal and empathetic words as header titles
-
Poignant picture on the front page
-
Shorter length paragraphs and a greater emphasis on visuals
-
Statistics section providing further details on allocation of donations
-
Testimonies from community members who received assistance from the organization
DEVELOP
Site Map.
Our initial design process started with brainstorming ideas which was visually represented in this site map. The red boxes are represent additional pages to be implemented based on our stakeholders’ feedback. The green boxes represent the interfaces that were already established on the KOSD website.
SKETCHES & WIREFRAMING
First step in the design process on the main website pages.
Our primary focus was to enhance the website with user-friendly features for easier information retrieval and ensure seamless usability to facilitate information consumption on each page.
LO-FI PROTOTYPE
New layout, more distinct sections & a few extra pages.
I was in charge of creating wireframes for a news & events calendar (an initial action item requested by stakeholders) and a testimonial section to highlight anecdotes by KOSD community members. These sections did not previously exist on the site.
EVENTS & NEWS CALENDAR
TESTIMONIALS
HI-FI PROTOTYPE | FINAL DELIVERABLE
Incorporate KOSD’s colors & improve readability.
After countless feedback from our stakeholders and mentors, we finished our redesign of the website and completed a comprehensive hand-off document that entailed a marketing & content creation plan as well. We kept KOSD’s original color scheme as it pertains to the different iterations of the Myanmar Flag. Some of the layout was changed for better usability and pages were also merged together for similar content.
Check Out the Difference
BEFORE
AFTER
Feel free to play around with our prototype on Figma!
DESIGN SYSTEM | FINAL DELIVERABLE
Establish clear information hierarchy for consistency.
Created KOSD’s first design system, closely adhering to their current website theme. The color palette is compliant with WCAG 2.1 guidelines.
.png)
LIVE WEBSITE REVISIONS v1
Reflected on the previous wireframe I took charge of.
In order to increase the credibility and impact of the organization, we decided to incorporate testimonials from community members who responded on our Google Form onto the website. For privacy reasons, KOSD had requested that their names should not be included. Using the low-fidelity prototype, we developed the envisioned testimonials section and accommodated it to the fixed layouts on WordPress.
ADDED TESTIMONIALS
LIVE WEBSITE REVISIONS v2
Solutions to requested action items.
As mentioned, KOSD had provided us with a list of action items during our first stakeholder meeting. The broken links were a quick fix. The Facebook feed and calendar challenged us to gain the a more technical understanding of Wordpress plugins while corresponding with KOSD for any account information needed.
BROKEN LINKS
New: Functional “Useful Links” & hyperlinked cards with KOSD’s partners.
FACEBOOK IMAGE THUMBNAILS
Upgraded to Smash Balloon's Facebook Feed PRO, granting users seamless access to the full KOSD Facebook feed.
NEWS & EVENTS CALENDARS
Installation of the GCal on the website was a tricky process, due to fixed privacy arrangements.
IMPACT
Helping to build awareness for refugee relief organization.
Previously, KOSD was not being discovered enough, with an average of 10 daily visitors. We increased the number of impressions by 45%. Through this project, we were able to redesign their website to optimize navigation, flow, and organization of information.
REFLECTION