An independently developed digital resource platform created in memory of Luke Andrew Rogers, helping children, teens, and concerned adults navigate difficult situations and connect with established support services. Designed with a focus on accessibility, privacy awareness, responsible communication, and reliable user experiences.
Design decisions backed by technical responsibility.
01 —
Human-Centered Design
Designed understandable support pathways for users navigating potentially stressful circumstances.
02 —
Technical Implementation
Built and refined a responsive React-based platform with reusable interface components.
03 —
Responsible Quality Assurance
Prioritized functional clarity, accessibility, privacy awareness, and safety-critical navigation.
04 —
Continuous Improvement
Refined the visual system and user experience through iterative development, testing, and technical verification.
01CONTEXT
The Challenge
Children and teenagers experiencing unsafe situations at home may struggle to identify trustworthy resources, understand their options, or find the words to ask for help.
Traditional information websites can be intimidating, overly complicated, difficult to navigate on mobile devices, or unclear about the assistance they actually provide.
The challenge was to develop a digital experience that balanced emotional sensitivity with technical reliability, transparent communication, accessibility, and intuitive navigation.
02RESPONSIBILITY
My Role
Independent Product Designer, Developer & Quality Assurance Lead
I directed the product concept, information architecture, interface refinement, technical implementation, usability evaluation, and iterative quality improvement.
The project combined front-end development with AI-assisted workflows, manual review, interface testing, and risk-aware design decisions.
03PRODUCT
The Solution
Luke’s Light is a responsive, resource-oriented website designed to help users navigate toward appropriate information and professional support.
Its interface prioritizes understandable choices, calm visual communication, minimal barriers to accessing information, and clear explanations of the platform’s limitations.
CORE FUNCTIONALITY
Guided support pathways for children, teens, and adults.
A dedicated Help Now page with emergency and support resources.
Clear explanations of what may happen when someone asks for help.
A support directory with resource details and contact options.
Printable educational resources.
Privacy and device-safety information.
Responsive navigation for mobile and desktop visitors.
A prominently accessible Leave Site function.
04VISUAL SYSTEM
Design System & Visual Refinement
The latest redesign introduced a more cohesive, professional visual identity.
The design combines deep navy, warm ivory, muted blue-green, and restrained gold accents to communicate stability, trust, and reassurance. The lighthouse remains the defining brand element, representing guidance and hope.
REFINEMENTS
Refined editorial typography and more readable body text.
A sophisticated navy homepage presentation.
Clearer visual hierarchy and content organization.
Stronger contrast between navigation, content, and primary actions.
More consistent cards, buttons, spacing, and component styling.
Improved responsive layouts.
The visual goal was to make the platform feel credible and established without sacrificing warmth or approachability.
05ENGINEERING
Technical Implementation
The platform was developed using a modern JavaScript and React-based application architecture with Base44.
IMPLEMENTATION SCOPE
React component development and refinement.
JavaScript, CSS, and Tailwind-based styling.
Responsive layout implementation.
Component-level design consistency.
Client-side navigation and routing.
Structured content organization.
Interactive support tools and resource navigation.
Iterative debugging and interface corrections.
Production build verification and versioned changes.
06QUALITY PRACTICES
Quality Assurance & Risk-Aware UX
Quality considerations were integrated into the design and development process rather than treated solely as a final step.
Functional reliability
Ensuring primary navigation and user actions have clear, intended destinations.
Preserving clear access to support resources and the Leave Site function without creating misleading promises of confidentiality or emergency intervention.
Transparent communication
Explaining that the website provides educational information and resource links rather than emergency dispatch, clinical care, or direct intervention.
Responsive quality
Reviewing component layouts and visual hierarchy for smaller screens.
Change validation
Checking that visual refinements preserve existing functionality and that the production build completes successfully.
These practices are not a formal third-party accessibility certification, penetration test, independent clinical review, or guarantee of safety. Systematic real-device, assistive-technology, and external-service checks require separate verification.
07TECHNICAL EVIDENCE
Technical Skills Applied
Technologies and methods connected to this project, rather than a general résumé skills inventory.
Information Architecture · Human-Centered Design · Interaction Design · Design Systems · Safety-Conscious UX
Tools & Workflow
Base44 · AI-Assisted Development · Iterative Prompting · Build Verification · Version Control
PUBLISHED INTERFACE / VISUAL EVIDENCE
The website in practice.
Actual captures of the public Luke’s Light website. Select any image to inspect the original screenshot at a larger size.
Help NowEmergency and support options, with clear information about what actions do.Before I TellPlain-language information about what asking for help may involve.Support directoryResource discovery and contact options oriented around user needs.Privacy & device safetyDevice-awareness guidance and honest communication about browsing privacy.
Screenshots document public pages at the time of capture and do not certify the behavior of external support services.
08OUTCOME
The Outcome
Luke’s Light demonstrates the development of a sensitive, mission-driven digital product where usability, technical quality, visual design, and responsible communication must work together.
The redesigned platform has a more unified visual identity and clearer presentation of its core support pathways.
The project also demonstrates an iterative product-development approach: identify usability concerns, implement targeted refinements, verify technical changes, and maintain a consistent user experience.
No traffic growth, conversion rates, user testimonials, independently verified performance results, or clinical outcomes are claimed.
EXPLORE THE LIVE PRODUCT
Technology built with people in mind.
See the published resource platform and the interface described in this case study.