Design for Target Audience

SisterShield’s design is not generic. Every visual choice, interaction pattern, and content decision is made with a specific user in mind: women and girls who may be experiencing or at risk of technology-facilitated violence. This page documents the principles behind those choices and the checks in place to ensure the platform does no harm.

Target User Profile

Attribute	Detail
Primary Users	Women and girls aged 13-25, particularly in Korean and English-speaking contexts
Context	May be currently experiencing TF-VAWG, at risk, or learning preventively
Emotional State	Potentially anxious, fearful, or in crisis; may also be curious and proactive
Tech Comfort	Moderate to high (digital natives), but may have reduced cognitive capacity under stress
Access Environment	May be using the platform while being monitored by an abuser
Key Need	Safety first, education second, empowerment always

Trauma-Informed Design Principles

SisterShield applies the five core principles of trauma-informed care to its digital experience:

1. Safety

The user must feel physically and emotionally safe at every moment.

• Quick Exit button is always visible — one click or Escape key press navigates to weather.com and clears the session.
• No alarming visuals — the calm color system uses low saturation, neutral tones.
• Predictable navigation — no surprise pop-ups, no auto-playing media, no sudden layout shifts.
• Crisis resources are always accessible, never hidden behind menus.

2. Trustworthiness

The platform must be transparent about what it does and does not do.

• Quick Exit tooltip explicitly states limitations: “This will navigate away from SisterShield and clear your session. It cannot erase browser history.”
• No data surprises — minimal data collection, clear privacy expectations.
• Consistent behavior — the same action always produces the same result.

3. Choice

Users must have control over their experience.

• Self-serve course selection — students choose what to learn, when to learn it.
• Language choice — switch between English and Korean at any time.
• Pace control — interactive stories allow users to proceed at their own speed.
• No forced completion — users can exit a course at any time without penalty.

4. Collaboration

The platform works with users, not on them.

• Learning Moments in stories explain why a choice was risky, rather than punishing the user.
• Teacher tools empower educators to create culturally relevant content.
• Feedback loops ensure the platform evolves based on real user needs.

5. Empowerment

Every interaction should leave the user feeling more capable, not more afraid.

• Skill-building narrative — courses build practical skills (recognizing manipulation, using reporting tools, finding help).
• Positive reinforcement for safe choices in interactive stories.
• Global Action steps connect learning to real-world tools (e.g., StopNCII.org for image removal).

The Calm Color System

Rationale

Traditional web design uses bold, saturated colors to grab attention. For users in crisis or under stress, this approach can increase anxiety and cognitive load. SisterShield uses a “priority-heavy” calm color system where:

• Neutrals dominate 85% of the visual field — backgrounds, text, borders, and secondary elements.
• Purple is reserved for the single primary CTA on any given screen — reducing visual noise and making the most important action unmistakable.
• Low saturation across the entire palette reduces sensory overwhelm.
• Warm neutrals (not cold grays) create a sense of warmth and safety.

Purple Reduction

The design evolved from a “brand-heavy” approach (purple used liberally for branding) to a “priority-heavy” approach (purple used only for the single most important action). This change was driven by:

• Feedback that too much purple created “visual fatigue” (TODO: Link to specific test cycle).
• Research on color psychology in trauma-informed design.
• The principle that in a safety-focused app, clarity of action hierarchy saves time and reduces confusion.

Design Evolution

The shift from brand-heavy to priority-heavy purple is documented as a Before/After case in the Growth & Perseverance page and as Decision B in Design Decisions for Rubric Mastery.

Avoid Harm Design Checklist

The following checklist is applied to every screen, feature, and piece of content in SisterShield:

Language

• All text is supportive and non-judgmental — no victim-blaming language.
• No diagnostic language (e.g., “You are a victim” replaced with “If this is happening to you”).
• Action-oriented phrasing (“Here’s what you can do” rather than “Here’s what happened to you”).
• Crisis resource text uses empowering framing (“Talk to someone who can help” not “Get help for your problem”).
• Korean translations reviewed for cultural sensitivity, not just linguistic accuracy.

Visuals

• Color palette is low saturation with calming neutrals.
• No alarming, graphic, or potentially triggering imagery.
• Illustrations and icons are abstract or positive — no depictions of violence or distress.
• DALL-E generated course covers follow safety content guidelines.

Interaction Flows

• Quick Exit is accessible from every screen (button + Escape key).
• No dead-end screens — every view has a clear path forward or back.
• Risky choices in interactive stories lead to Learning Moments (educational reframes), never punishment or graphic consequences.
• No forced data entry — users are never required to share personal experiences.
• No auto-playing audio or video that could attract unwanted attention.

Data & Privacy

• Minimal data collection — only what is needed for core functionality.
• Quick Exit clears the session — no lingering authenticated state.
• Quick Exit tooltip honestly discloses limitations (cannot clear browser history).
• No tracking pixels, third-party analytics, or advertising SDKs.
• Progress data is associated with accounts, not devices (so a shared device does not expose usage).

Quick Exit Specifics

• Quick Exit button is the most visually prominent safety control on every screen.
• Escape key triggers Quick Exit globally (with dialog guard to prevent accidental activation).
• Redirect destination (weather.com) is a plausibly innocent site.
• Session is cleared on exit.
• Sub-1-second reaction time from key press to navigation.

Accessibility Features

SisterShield is designed to meet WCAG 2.1 AA standards:

Feature	Standard	Implementation
Color contrast	WCAG AA (4.5:1 for text, 3:1 for large text)	All text/background combinations verified
Tap targets	44px minimum (WCAG best practice)	All interactive elements meet minimum size
Keyboard navigation	Full keyboard access	Tab order, focus indicators, Escape key for Quick Exit
ARIA labels	Screen reader support	All interactive elements and dynamic content labeled
Non-color cues	Information not conveyed by color alone	Icons, text labels, and patterns supplement color
Reduced motion	Respects prefers-reduced-motion	Animations disabled when user preference is set
Language attributes	Proper lang attribute	Set per locale for screen reader pronunciation

Testing Accessibility

Use automated tools (Lighthouse, axe-core) for baseline checks, but always supplement with manual keyboard navigation testing and, when possible, testing with screen reader users.

Rubric Mapping

Rubric Category	How This Page Contributes
User Experience	Demonstrates deep understanding of target audience and design tailored to their specific needs and context
Avoid Harm	Comprehensive checklist ensures every aspect of the platform is reviewed for potential harm
Technical	Accessibility implementation shows technical depth beyond basic functionality
Growth & Perseverance	Evolution of the color system (brand-heavy to priority-heavy) shows iterative refinement