IDEATION
Competitive Analysis
Through our competitive analysis, we sought common features shared by other competitors' websites in comparison to the KOSD website. Additionally, we identified aspects of their sites that could serve as inspiration for enhancing web presence.
Relevant logos and icons
Consistent Color Brand
Clear & Concise mission statement
Sufficient information on context
UNDERSTANDING THE PROBLEM
Usability & web presence
We initiated discussions with our clients at KOSD to gain insights into their organization, mission, and current website-related challenges. Though KOSD had a loyal member base, they lacked a strong online presence and faced a disconnect with their online community.
Issues with quality control access across several web-pages that affects usability
Difficulty informing the community of the services and support that they offer
Low content engagement and community outreach for volunteers, refugees, and sponsors
OVERVIEW
1 UX Researcher
2 Web Developers
1 Marketing Strategist
1 Content Strategist
1 UX Designer
TEAM
Karen Organization of San Diego
Karen Organization of San Diego (KOSD), an ethnic community-based nonprofit aiding refugees from Burma in San Diego. I worked with a team to re-design the website and marketing strategies, aiming to establish a more inviting online space, enhance community engagement, and amplify the voices of Burmese refugees in San Diego.
ROLE
TIMELINE
PROJECT
UX/UI Designer
12 weeks
Internship
Non-profit
THE GOAL
Discover, Redesign, Implement
Our primary project is the redesign and rebranding of the website. We have segmented this task into three key objectives, informed by our initial research findings and the desires of our stakeholders.
1. Create a more engaging, interactive, and content-rich website for KOSD that optimizes navigation flow and information.
2. Implement a visual design system to establish a comprehensive and cohesive branded website.
3. Introduce a content + marketing strategy to guide and standardize a consistent informative branding for their online presence.
An avid supporter of the Burmese Refugees
An aspiring Burmese refugee student in San Diego
RESEARCH
Let's take a closer look
To further understand the problem, we conducted a detailed analysis of the current website and comparable platforms, and gaining insights into the audience and their challenges. Here's how we approached each aspect:
Site Map
Our initial focus was on grasping the information architecture of the current website. To achieve this, we crafted a site map outlining the navigation structure of the existing site as well as incorporating potential pages.
Returning to the sitemap, we navigated through it using the personas we created to envision how our stakeholders might interact with the current website. This hands-on exploration allowed us to identify areas for improvement and gain a deeper understanding of the user experience.
Target Audience
Because Karen Organization of San Diego stated they wanted to appeal to individuals supporting their cause, we created user personas for Burma refugees and potential supportors.
How might we create a more intuitive and informative website to amplify KOSD's voice as a refugee community organization and build awareness for immigrant and refugee relief?
AND SO WE ASK. . .
WIREFRAMES & LO-FI
Design Goals
The main thing that we wanted to address was the need for additional information and pages on the website, highlighting features that can help users find information easier, and an overall smoother usability in order to help users read and digest information on each page, we designed organized layouts that don't cluster information on each page.
1. Rebrand KOSD's main visual system to better represent
2. Providing usability features and intuitiveness to optimize efficiency
3. Enhancing readability of page layouts through content reorganization
At this stage, we sought feedback from our mentors by having them directly critique our low-fi prototypes within Figma. Given additional time, we would've conducted user testing with several more users to explore the prototype.
IMPACT
Results & Feedback
During user testing, we involved 5 community members and 2 leaders to assess our high-fi prototype. Recognizing the language barrier, we aimed for a localized experience, translating the prototype into Burmese. Our approach included A/B testing to gather feedback and insights from users who primarily communicated in Karen and other Burmese languages. Here are some given feedback:
💡 "Definitely a lot more improvement compared to the first iteration!"
💡 "I'd love to incorporate some of these features onto our existing website."
💡 "It really captures the needs of the Burmese community and what we stand for."
In collaboration with one of the web-developers
VISUALS & BRANDING
Design System
We created KOSD's first visual system, closely adhering to their current website theme. The color palette is compliant with WCAG 2.1 guidelines. The main point to highlight is that we kept the four colors, as they are essential to the Myanmar flags represented in the KOSD community.
Revised the content and implemented further information on existing partners and opportunities for people to support.
Lending a Hand
A calendar to portray past and future events, keeping users up to date on the news.
News & Events
Through user interviews, we incorporated testimonials to share the stories of Burmese refugees, integrating personalized content.
Testimonials
Clear mission and stats
Clear mission statement featured as the initial element users encounter, accompanied by highlighted statistics showcasing KOSD's impactful contributions to their community.
High-Fidelity Prototype
We garnered valuable feedback on the visual design and received insightful suggestions to enhance the intuitiveness and engagement of KOSD's content. Moving forward with the feedback, we will:
-
Revisions to paragraphs and send to the stakeholders for review
-
Peer reviewing, keeping tracking of spacing and text size
-
Incorporating sections that could connect with users (Example: Written stories or testimonials)
REFLECTION
What did I learn?
Stepping out of my comfort zone
I regret not being more adventurous in design exploration during the prototyping stage. The design constraints of our project made it somewhat intimidating, and a possible remedy for this could have been conducting a more thorough competitive analysis.
Expressing my own perspective
Throughout most of the project, I mainly adhered to what the developers could handle and hesitated to provide my own perspective, worried it might clash with their work. I believe more frequent discussions and an open-table approach would have allowed improvement.
Collaboration is key!
While each team member had an assigned role, we cultivated a collaborative environment where everyone supported one another and shared the workload to prevent it from becoming overwhelming. We were flexible with each other's schedules and ensured to cover for one another in case of any absences.
This was a valuable opportunity to help KOSD with their website redesign. A heartfelt thank you to my team for sticking together and supporting each other throughout the project. Also, gratitude to KOSD's staff and members for their valuable support.