-
Notifications
You must be signed in to change notification settings - Fork 17
Design Values
iyanski edited this page Sep 29, 2025
·
1 revision
A Manifesto for Thoughtful, Purposeful, and Accessible Civic Websites
Kapwa is more than a design system. It is a civic commitment.
The word kapwa expresses a uniquely Filipino idea: that we are deeply interconnected, that the self is always shared with others. In the digital space, this means every website we build reflects not only information, but also dignity, respect, ingenuity, and user experience.
Kapwa Design System is created by a civictech community that believes websites can set the standard for clarity, accessibility, and trustworthiness. We shy away from bureaucracy and transactions. Instead, we show what is possible: websites that empower citizens through thoughtful, purposeful, user-friendly, and accessible design.
This document is our guide. These are the values we uphold.
Every Filipino deserves equal access to information.
- Build for all devices: Websites should adapt fluidly to any screen size and resolution, whether accessed through low-cost Android smartphones, shared community computers, or high-end devices. Responsive design ensures content is never cut off or distorted, making it usable for everyone.
- Design for low bandwidth: Many Filipinos rely on prepaid mobile data and experience poor connectivity. Optimize images, compress assets, and minimize scripts so websites load quickly on 2G or 3G connections without draining data.
- Meet accessibility standards: Follow WCAG 2.1 AA guidelines to ensure color contrast, font size, and interactive elements are perceivable and operable for all, including persons with visual, auditory, or cognitive impairments.
- Support assistive tech: Semantic HTML and ARIA roles allow screen readers to interpret pages accurately. Keyboard navigation and voice command support must be tested to ensure usability beyond a mouse or touchscreen.
- Alternative formats: Videos should include captions and transcripts; images should have descriptive alt text; and downloadable documents should have simplified, text-based versions. These practices ensure no one is excluded due to format barriers.
- Language inclusivity: Provide bilingual content (English and Tagalog) and consider regional translations. This recognizes linguistic diversity and respects citizens who are more comfortable in local languages.
- Test with real users: Accessibility should not be theoretical. Conduct usability sessions with seniors, PWDs, and people with low digital literacy to uncover barriers and refine solutions.
- UX connection: Accessibility directly impacts user experience. A site that is easy to navigate for someone with disabilities is also easier and more enjoyable for everyone.
Clear communication reduces stress and empowers citizens.
- Plain language first: Replace bureaucratic terms with everyday words. For example, instead of “submit documentary requirements for validation,” use “submit your ID.” This makes content easier to digest across literacy levels.
- Front-load essentials: Put time-sensitive or crucial information at the top of the page. Citizens should know “What, When, Where, and How” without scrolling.
- Scannable layouts: Use short paragraphs, bold key phrases, and bullet points so people can skim quickly and still understand the core message.
- Step-by-step flows: Break complicated tasks into smaller steps with progress indicators. This reduces intimidation and helps citizens feel progress with each click.
- Visual calm: Keep layouts clean with whitespace and clear divisions between sections. This lowers cognitive load and improves focus.
- Action-driven CTAs: Use clear, descriptive labels like “Download the Form” or “Report an Issue.” This helps citizens know exactly what will happen when they click.
- Error clarity: Provide specific and helpful error messages. Instead of “Invalid input,” say “Please enter a valid 11-digit phone number.” Clear instructions reduce frustration and wasted effort.
- UX connection: Clarity improves usability by reducing confusion. A clear interface makes the citizen’s journey smoother, more intuitive, and more satisfying.
Predictability reassures citizens that they are on reliable ground.
- Standardized components: A button should look and behave the same across all Kapwa sites. This predictability means users don’t waste time guessing how something works.
- Unified design tokens: Centralize colors, typography, and spacing so visual identity remains stable across platforms and agencies. This avoids mismatched branding and builds recognition.
- Shared page structure: Pages that serve similar purposes — like announcements, events, or news — should follow a common template, so citizens know exactly where to look.
- Cross-agency alignment: Different institutions should adopt the same patterns. A person who has learned how to navigate one Kapwa-standard site should find the next site familiar.
- Mobile + desktop parity: A service should work equally well on mobile as it does on desktop. Mobile users shouldn’t face stripped-down or incomplete experiences.
- Predictable feedback: Success, error, and warning states should always be styled and worded consistently, so users recognize outcomes immediately.
- Brand signals: Subtle but consistent cues — such as logos, typography, and color palette — remind citizens that they are in a trusted digital environment.
- UX connection: Consistency reduces friction in the user journey, allowing citizens to transfer knowledge from one page or site to another, enhancing confidence and ease of use.
Designing with respect means designing with empathy and dignity.
- Human-first language: Speak directly to people, not to “users.” Say “you can” instead of “the user must.” This makes websites feel more human and approachable.
- Inclusive imagery: Use visuals that represent the Philippines in its diversity — urban and rural, indigenous and modern, seniors and youth, PWDs and LGBTQ+. This ensures citizens see themselves reflected online.
- Respect privacy: Only ask for information that is truly necessary, and clearly explain why it’s required. Protecting personal data is part of showing respect.
- Empathetic microcopy: Replace harsh error messages with supportive guidance. For example: “We couldn’t process your payment right now. Please try again or contact support.”
- Consider literacy levels: Keep sentences simple and support text with diagrams or icons to help explain concepts. This ensures inclusivity for varying literacy levels.
- Respectful timing: Avoid disruptive pop-ups or auto-refreshes that interrupt tasks. Respect people’s time and focus.
- Test for dignity: Always ask, “Would this make someone feel respected if it were my family member using this?” If not, refine the design.
- UX connection: Respect is central to UX. A respectful design reduces frustration, builds positive emotions, and makes citizens feel valued in every interaction.
We show Filipino creativity by making things simple, efficient, and elegant.
- Purposeful design: Eliminate unnecessary elements. Every button, link, or block of text must have a reason to exist and serve a citizen’s need.
- Lightweight builds: Build lean pages with optimized code and assets to keep load times fast and affordable for data-conscious users.
- Minimal clicks: Map out user journeys and reduce redundant steps so tasks can be finished faster.
- Reusable solutions: Develop flexible components that can be applied across multiple contexts, saving resources while maintaining consistency.
- Local ingenuity: Draw inspiration from the Filipino ability to innovate with limited resources. Build solutions that are practical and adaptable to local realities.
- Simple visuals: Use icons, typography, and layout to highlight meaning and avoid overwhelming citizens with decoration.
- Simplicity ≠ plainness: Simplicity should feel intentional and elegant — a design that is beautiful because it works flawlessly and respects the citizen’s time.
- UX connection: Simplicity enhances UX by removing distractions, shortening tasks, and ensuring that every interaction feels intuitive and efficient.
Trust grows when information is open, current, and verifiable.
- Visible dates: Show when content was published and last updated, so citizens can gauge freshness.
- Content ownership: Make it clear who authored or published a piece of content, giving it accountability.
- Clear sources: Always cite and link back to official data or legal bases so citizens can verify the truth themselves.
- Honest errors: Be transparent about what went wrong, avoiding vague terms. Provide actionable next steps to help users recover.
- Confirmation and proof: Give receipts, reference numbers, or downloadable confirmations so people know their interaction succeeded.
- Versioning: Track and display changes to guidelines or content so citizens can see history and evolution.
- Update discipline: Regularly audit and archive outdated material, marking it clearly so people don’t rely on stale information.
- UX connection: Transparency makes the user experience trustworthy. Citizens feel confident that what they see is current, reliable, and backed by accountability.
Websites must evolve with citizens’ needs and technology shifts.
- Token-driven flexibility: Store design attributes like colors, spacing, and typography in tokens so updates cascade system-wide without breaking layouts.
- Modular components: Build small, self-contained blocks that can be reassembled for new needs, preventing reinvention of the wheel.
- Feedback loops: Actively collect feedback from citizens and continuously improve based on their experiences. Public input is a key design resource.
- Iterative improvement: Release improvements in small, frequent updates rather than waiting for rare, large-scale redesigns.
- Multi-platform readiness: Anticipate the need to deliver content across mobile, desktop, kiosks, and emerging platforms like voice assistants.
- Cultural adaptability: Refresh tone, visuals, and examples to reflect evolving Filipino culture and values.
- Continuous learning: Study international civic design systems and adapt proven ideas to local contexts, ensuring Kapwa stays globally relevant but locally grounded.
- UX connection: Adaptability in UX ensures services remain intuitive, relevant, and enjoyable even as technology and citizen expectations evolve.
Kapwa Design System embodies Filipino ingenuity through:
- Accessibility that guarantees no one is left behind by ensuring inclusivity across devices, abilities, and contexts.
- Clarity that reduces stress and empowers citizens by making information easy to understand.
- Consistency that fosters trust by creating reliability across websites and services.
- Respect that honors human dignity by treating every citizen as kapwa.
- Simplicity that reveals resourcefulness and creativity by designing elegantly with purpose.
- Transparency that holds information accountable by being open and verifiable.
- Adaptability that ensures resilience by evolving with citizens’ needs and technologies.
This is our design manifesto. This is the standard for civic websites in the Philippines. This is Kapwa.