The challenge
Users need to understand which path applies, what documents are required, what information is missing, and what should happen next without relying on disconnected tools.
AI Legal-Tech - Product Design - Mobile App Development
App Lawyer
Designing an AI-guided immigration platform that turns complex IRCC processes into clear, manageable steps.
App Lawyer helps users organize Canadian immigration cases, understand requirements, prepare documents, track deadlines, and receive personalized support from a case-aware AI assistant. It provides information and preparation support, not a replacement for a licensed lawyer or authorized immigration representative.
Role
Product Designer and Front-End Developer
Platform
iOS and Android
Stack
React Native, Expo, TypeScript, Expo Router, Zustand, Supabase-ready
Focus
UX strategy, AI workflows, mobile UI, product architecture
Status
Product in development
Project summary
Immigration information exists, but the experience is fragmented.
Canadian immigration applications can involve unfamiliar terminology, multiple documents, changing deadlines, government sources, personal notes, online forums, and case-specific uncertainty. App Lawyer brings those pieces into one structured mobile experience.
The solution
The app connects case intake, requirements, documents, deadlines, risk review, and AI support around an active immigration matter.
My role
I connected product strategy, UX design, mobile UI, and front-end implementation.
I designed App Lawyer from product concept through mobile implementation, defining the workflow, interface system, AI experience, and technical foundation.
01
Defined the product vision and MVP scope
02
Mapped the immigration case journey and information architecture
03
Designed onboarding, authentication, case creation, intake, document, deadline, review, and AI flows
04
Built a reusable mobile interface system for legal-tech workflows
05
Developed the app foundation with React Native, Expo, TypeScript, Expo Router, and Zustand
06
Prepared the architecture for Supabase authentication, database records, file storage, and future AI orchestration
Product flow
Experience the complete product flow.
The first product video shows how the mobile experience moves through case setup, navigation, AI support, and task-oriented legal-tech workflows.
1User profile
2Case intake
3Personalized case workspace
1Documents
2Deadlines
3Case-aware AI guidance
APP WORKFLOW
A complete journey through the App Lawyer experience.
This section presents the app flow from launch and onboarding to case creation, document organization, deadlines, and case-aware AI support, showing how each feature connects into one guided immigration preparation experience.
01
Launch and trust
A focused opening moment gives the product a clear legal-tech identity.
The splash screen introduces App Lawyer with a friendly brand signal while keeping the product grounded in immigration support and case preparation.
Brand launchMobile-first framingApproachable tone
02
Onboarding
The first-run experience explains the product promise in small, clear steps.
The onboarding sequence introduces immigration pathfinding, specialized IRCC AI agents, and document preparation without overwhelming the user before sign-in.
Value propositionProgressive disclosureLower cognitive load
03
Authentication
Sign-in is designed as a calm gateway into a personal case workspace.
The authentication screen supports email and social sign-in paths while reinforcing that case information belongs inside a structured, private product experience.
Account accessPrivacy framingFast entry
04
Case workspace
Returning users see active cases, progress, deadlines, and next actions.
The home and case continuation screens create a case-first experience. Users can start a new matter, resume an existing one, and understand what requires attention.
Active casesProgress visibilityNext recommended steps
05
Document organization
Documents are treated as part of the workflow, not a detached file cabinet.
The product gives users a place to upload, categorize, review, and connect evidence to their immigration case while the AI assistant can explain missing or relevant documentation.
Document uploadStatus reviewEvidence support
06
Case setup and intake
Structured intake turns a complex legal path into a guided product flow.
Users choose an immigration goal, decide whether to start or continue a case, and answer structured intake questions that can later inform documents, deadlines, review, and AI guidance.
Goal selectionIndependent case setupStructured answers
07
Deadlines and forms
Dates and intake details become visible, editable parts of the case.
Deadline selection and detailed form fields help users move from vague uncertainty into concrete data that the workspace can track and review.
Deadline trackingDetailed intakeSave-and-continue behavior
08
CASE INTAKE
Users add their case details so the AI can understand their situation.
This workflow collects the user’s personal information, immigration history, goals, documents, and concerns so the AI assistant can give more relevant guidance based on their own case, not a generic answer.
Case intakePersonalized AIUser profileImmigration historyCase context
09
Case-aware AI
AI is designed as a workflow layer, not a standalone chat tab.
The assistant can answer questions in the context of the active case, then connect guidance to checklists, documents, missing information, and next actions.
Case contextActionable responsesDocument checklist
Product goals
The product is designed to make a complex process feel clear, connected, and responsible.
Simplify complexity
Break Canadian immigration workflows into clear tasks, understandable language, and manageable next steps.
Centralize case information
Keep intake answers, documents, deadlines, risk notes, and progress in one connected case workspace.
Make AI context-aware
Use case details to support more relevant answers instead of treating every question as isolated chat.
Support user action
Move users from questions into checklists, document review, deadlines, and preparation tasks.
Maintain responsible boundaries
Position the product as information and preparation support, not a replacement for authorized legal advice.
AI experience
From a generic chatbot to a case-aware assistant.
The assistant is designed to work with the rest of the product. It can use the active case, intake answers, uploaded documents, deadlines, and previous chat context to provide more relevant support while keeping legal boundaries visible.
Immigration questions and case-specific explanations
Designed as part of the product workflow rather than isolated from case progress.
Intake clarification and missing-context prompts
Designed as part of the product workflow rather than isolated from case progress.
Personalized document checklist generation
Designed as part of the product workflow rather than isolated from case progress.
Missing-document explanations and preparation guidance
Designed as part of the product workflow rather than isolated from case progress.
Refusal-letter and risk review support
Designed as part of the product workflow rather than isolated from case progress.
Deadline explanations and suggested next steps
Designed as part of the product workflow rather than isolated from case progress.
AI architecture
Case-aware AI in action.
The AI layer should separate known facts from assumptions, identify missing context, avoid guaranteeing outcomes, reference official sources when available, and recommend professional help for high-risk situations.
01
User question
02
Active case selected
03
Case data gathered from profile, intake, documents, deadlines, and chat history
04
Relevant immigration information considered
05
AI response generated with safety and boundary checks
06
Personalized response returns with next actions
UX workflow
The core workflow connects onboarding, case intake, documents, AI, deadlines, and review.
01
Onboarding
02
Account creation
03
Create a case
04
Complete intake
05
Generate requirements
06
Upload documents
07
Ask case-specific questions
08
Track deadlines and tasks
09
Review missing items and risks
10
Prepare the case package
Information architecture
Global tools and case-specific spaces work together.
The architecture supports quick access to important tools while keeping case-specific information connected to the active immigration matter.
App Lawyer
|-- Home
|-- Cases
| |-- Case overview
| |-- Intake
| |-- Documents
| |-- Deadlines
| |-- AI chat
| |-- Review
|-- Ask AI
|-- Documents
|-- Profile
Design system
A mobile interface system for clarity, trust, and support.
The visual system uses soft lavender surfaces, strong purple action states, concise cards, progress indicators, document states, deadline cards, AI message modules, and friendly brand illustration moments to make a serious workflow feel approachable.
Typography
Color palette
Buttons
Form fields
Status tags
Progress indicators
AI messages
Document cards
Palette
Trust purple#6166F5
Soft lavender#EEF2FF
Deep ink#151824
Slate text#626B7C
Signal amber#F59E0B
Success green#22C55E
Development
Designing the interface and building the product.
The product was implemented as a mobile application foundation, not only a static prototype. The architecture separates navigation, screens, reusable components, application state, AI orchestration, and future backend integration.
React Native
Expo
TypeScript
Expo Router
Zustand
Reusable mobile components
Supabase-ready authentication
Supabase-ready database and file storage
Secure storage planning
Notification planning
Document upload integration
Separated AI service layer
Product decisions
Key decisions that shaped the product experience.
Case-first architecture
AI conversations, documents, deadlines, and review states are attached to a specific immigration matter.
Structured intake before guidance
The product gathers relevant facts before relying on AI support, reducing generic or under-contextual responses.
Action-oriented AI
AI responses are designed to lead into tasks, checklists, documents, drafts, or follow-up questions.
Progressive disclosure
Complex immigration details are introduced gradually so users can keep moving without reading dense legal content first.
Clear legal boundaries
The interface separates preparation support from advice that should come from a licensed lawyer or authorized representative.
Challenges and learnings
Designing for complexity, trust, and uncertainty.
The hardest design work was balancing useful AI support with responsible boundaries, translating complex immigration language into user actions, and making structured workflows feel supportive for users who may be stressed or uncertain.
01
Create trust without positioning the AI as a licensed lawyer.
02
Connect conversational AI with structured case workflows.
03
Balance friendly branding with a serious legal context.
04
Maintain consistency across many document, deadline, and review states.
05
Design an architecture that can grow beyond mock data.
Results and status
A complete product foundation currently in development.
App Lawyer demonstrates how product thinking, UX design, interface systems, AI experience design, and front-end development can transform a highly complex service into a clearer and more actionable mobile product.
Complete mobile product concept and visual system
End-to-end immigration case workflow
Functional React Native and Expo application foundation
Reusable component architecture
Case-aware AI workflow design
Document, intake, deadline, and review experiences
Supabase-ready data and backend architecture
Product prepared for further validation and production integration
Final reflection