PetFolio Wireframing¶

Project Overview¶

What is PetFolio?¶

PetFolio is a SaaS platform that serves as a one-stop shop for all aspects of pet care and companionship, connecting pet owners and pet professionals in a single, secure platform.

Key Value Propositions:

No more scattered notes, endless text chains, or missed reminders
Everything owners and care providers need in one seamless, organized platform

Target Audiences¶

Pet Owners (Personal Accounts)¶

New or experienced pet owners
Single or multi-pet households
Rescue pet owners
Primarily millennials who treat pets like family

Use Cases:

Store pet medical records, appointments, insurance, traits, and preferences
Track detailed medical and behavioral history
Integrate pet insurance/subscription accounts
Set reminders for policy renewals
Store important policy information

Pet Professionals (Business Accounts)¶

Vets, groomers, boarding facilities, pet sitters, trainers
Businesses open to using new technology for service delivery

Use Cases:

Easy, reliable access to pet data
Access to shared pet profiles for specific needs, preferences, or alerts
Communication with pet owners about medical needs, follow-ups, and prescriptions

Specialised Users (Business Accounts)¶

Breeders (licensed, ethical, responsible only)
Animal rescue and rehoming centers

Use Cases:

Manage records for multiple animals
Track lineage, vaccinations, health records, and behavior logs
Share detailed pet profiles with prospective buyers/adopters

Technical Decisions¶

Account Architecture¶

Decision: Separate Domains for Account Types

Personal Accounts: petfolio.com or app.petfolio.com
Business Accounts: Subdomain per business (e.g., thepositivepup.petfolio.com)

Rationale:

Eliminates need for account type selection during login
Better branding for business clients
Easier bookmarking and navigation
Enhanced security through account isolation
Follows B2B SaaS industry standard (Slack, Shopify, etc.)

Alternative Rejected: Account name/ID field (like AWS Console)

Adds friction to login flow
Requires users to remember account identifier
Potential for typos and confusion

Authentication Strategy¶

Identity Provider:

Planning to use OAuth providers or identity management platform
Keycloak or similar affordable alternative being considered

Personal Account Login Methods:

Email/password (managed by identity provider)
Social OAuth: Google, Facebook, Microsoft

Business Account Login Methods:

Work email/password (managed by identity provider)
Business SSO: Google Workspace, Microsoft 365
Facebook excluded (not typical for business use)

Security Benefits:

PetFolio does not store or manage passwords directly
OAuth providers handle authentication security
Identity provider manages email/password authentication securely

Design Decisions¶

Key Assumptions¶

Modern browser support (CSS3, Flexbox)
Mobile-first responsive approach
Semantic HTML for accessibility
Will integrate with external identity provider

Design Inspiration¶

Subdomain approach: Slack, Shopify, Zendesk
Clean login UX: Notion, Linear, Figma
Business SSO: Google Workspace, Microsoft 365

Visual Design Philosophy¶

Low-fidelity wireframes: Focus on structure and layout, not aesthetics
Placeholder elements: Logo, icons, and imagery represented as boxes with labels
Minimal styling: Basic borders, spacing, and typography only
Non-functional: Static HTML, no backend integration or validation

Layout / Responsiveness¶

Breakpoints:

xs (extra-small):  0px - 599px
sm (small):        600px - 899px
md (medium):       900px - 1199px
lg (large):        1200px - 1535px
xl (extra-large):  1536px+

Why Side-by-Side on Desktop:

Better use of horizontal screen space
Clear separation between login methods
Reduces page scrolling
Modern, professional appearance

Why Vertical Stack on Mobile:

Optimized for thumb reach
Prevents horizontal scrolling
Natural top-to-bottom reading flow
Maintains touch target sizes

User Experience Priorities¶

Personal Users:

Casual, welcoming tone
Multiple convenient login options
Clear path to account creation
Simple, friendly language

Business Users:

Professional tone and presentation
Business-focused authentication methods
Clear account context (subdomain display)
Admin support options
Sales-oriented CTA ("Request Demo / Sign Up")

Questions Answered During Design¶

Q: Should businesses have an account name field like AWS?

A: No, use subdomains instead (e.g., thepositivepup.petfolio.com)

Better UX, security, and branding
Industry standard for B2B SaaS

Q: Will email/password be secure if using OAuth?

A: Yes, identity provider (like Keycloak) handles password security

PetFolio never stores passwords
Can offer both OAuth social login AND email/password safely

Q: Should business accounts have Facebook login?

A: No, not typical for business use

Focus on Google Workspace and Microsoft 365
Better alignment with business workflows

Q: Same login page for personal and business?

A: No, separate pages accessed via different domains

Different branding, messaging, and auth options
Clear context for user about which system they're accessing

Q: Should business sign-up include OAuth (Google/Microsoft)?

A: No, not for MVP - only email/password

OAuth "Sign up with Google/Microsoft" creates confusion (users think it's enterprise SSO)
OAuth only creates one admin user - doesn't connect to organization directory
Still need to manually invite all team members
Enterprise SSO is a future feature (see below)

Future: Enterprise SSO vs OAuth

OAuth (Individual): "Continue with Google" - authenticates one person
Enterprise SSO: Connects to Google Workspace/Microsoft 365 organization directory
Admin configures SSO in settings, can auto-provision or control access
Requires SAML/OIDC integration with organization's identity provider

User Flows Implemented¶

graph TD
    A[Business Homepage] --> B[Sign Up Form]
    B --> C[Email Verification]
    C --> D[Dashboard]

    D --> E[Team Management]
    E --> F[Invite Team Member]
    F --> G[Team Member Email]
    G --> H[Team Member Sign Up]
    H --> D

    style B fill:#e8f4fd
    style C fill:#e8f4fd
    style D fill:#d4edda

Path: Business homepage → Sign up form → Email verification → Dashboard

Sign-up Form (business-signup-wireframe.html)
- Business name field
- Business type dropdown (Vet, Groomer, Trainer, Boarding, Sitter, Breeder, Rescue, Other)
- Subdomain field with real-time availability check (e.g., "happypaws.petfolio.com")
- Work email, password fields (email/password only for MVP)
- Password confirmation and requirements
- Terms of service acceptance
- Link back to login page
Email Verification (email-verification-wireframe.html)
- Confirmation message with email address displayed
- Resend verification email option
- Change email address option
- Help/support link
Dashboard Access (after verification)
- User lands on business home/dashboard

graph TD
    A[Login Page] --> B[Forgot Password Link]
    B --> C[Reset Request Form]
    C --> D[Check Email Message]
    D --> E[Email with Reset Link]
    E --> F[Set New Password]
    F --> G[Password Reset Confirmation]
    G --> H[Continue to Login]
    H --> A

    style C fill:#e8f4fd
    style F fill:#e8f4fd
    style G fill:#d4edda

Business Account Password Reset Flow¶

Path: Login page → Reset request → Set new password → Confirmation → Login

Reset Request (reset-request-wireframe.html)
- Email input field
- Clear messaging about receiving instructions
- Back to login link
- Admin contact option
Set New Password (set-new-password-wireframe.html)
- New password field with requirements
- Password confirmation field
- Clear password requirements display
- Account context (subdomain) shown
Reset Confirmation (reset-confirmation-wireframe.html)
- Success message
- Direct link to login page
- Visual success indicator

graph TD
    A[Visit Subdomain URL<br/>happypaws.petfolio.com] --> B{Has Account?}
    B -->|Yes| C[Login Page]
    B -->|No| D[Sign Up]
    C --> E[Enter Email/Password]
    E --> F[Dashboard]
    D --> F

    style C fill:#e8f4fd
    style F fill:#d4edda

Path: Subdomain URL → Login → Dashboard

Login Page (petfolio-business-login-wireframe.html)
- Business context clearly displayed (subdomain)
- Email/password login
- Alternative: OAuth login (Google Workspace, Microsoft 365)
- Forgot password link
- Sign up link
Business Dashboard (business-home-wireframe.html)
- Personalized greeting: "Hello, {User Name}"
- Header with business branding and user info
- Sidebar navigation with key sections:
  - Main: Dashboard, Appointments, Clients, Pets
  - Management: Team Members, Services, Reports
  - Settings: Business Profile, Integrations, Account Settings
- Main content area (placeholder for dashboard widgets)
- Responsive: Mobile menu toggle, collapsible sidebar

Not Yet Addressed (Future Work)¶

Business Account Verification (Future)¶

Approach: Automated Self-Service with Optional Verification

For initial launch, all business types can self-register without verification. Future iterations will add:

Breeder License Verification (Priority for ethical compliance)
- Upload business license/certification during or after signup
- Admin review workflow for approving uploaded documents
- Account status: Basic (unverified) vs Verified
- Feature gating: Premium features locked until verified
- Dashboard banner: "Complete verification to unlock all features"
Subdomain Conflict Prevention
- Real-time subdomain availability check (already in wireframe)
- Suggestions when subdomain is taken
- Validation before form submission
Sales-Led Onboarding (Optional path for enterprise clients)
- Request demo flow for multi-location businesses
- Manual provisioning by PetFolio team
- Not needed for MVP - all businesses use self-service

Authentication Features¶

Multi-factor authentication (MFA)
Session management and timeout behavior
Password strength requirements and validation
Error states and validation messaging
Loading states during authentication
"Remember me" / stay logged in functionality
Account lockout policies
Rate limiting for login attempts

User Flows¶

Sign-up/registration flow (business accounts - basic)
Email verification process (business accounts)
Password reset flow (business accounts - simplified)
Sign-up/registration flow (personal accounts)
Email verification process (personal accounts)
Password reset flow (personal accounts)
First-time user onboarding
Terms of service and privacy policy acknowledgment

Additional Pages Needed¶

Dashboard/home page (personal account)
Dashboard/home page (business account - basic with navigation)
Account selection (if user has multiple business accounts)
Profile settings
Pet profile management
Appointment scheduling
Communication/messaging interface

Business-Specific Features¶

Team member invitation and management
Role-based access control (RBAC)
Business settings and preferences
Integration management (calendars, payment systems, etc.)
Client/pet access requests and permissions

Enterprise SSO (Future Feature)¶

Planned Approach for Post-MVP:

Businesses will be able to configure enterprise SSO to connect PetFolio with their organization's identity provider:

Supported Providers:

Google Workspace (SAML/OIDC)
Microsoft 365/Azure AD (SAML/OIDC)
Okta, Auth0, OneLogin (SAML/OIDC)

Configuration Flow:

graph TD
    A[Admin Dashboard] --> B[Settings → SSO Configuration]
    B --> C{Select Provider}
    C -->|Google Workspace| D[Enter Workspace Domain]
    C -->|Microsoft 365| E[Enter Tenant ID]
    C -->|Other SAML| F[Upload Metadata XML]

    D --> G[Test Connection]
    E --> G
    F --> G

    G --> H{Test Successful?}
    H -->|Yes| I[Enable SSO]
    H -->|No| J[Show Error & Troubleshoot]

    I --> K[Choose Provisioning Mode]
    K --> L[Auto-provision all users<br/>from directory]
    K --> M[Manual invitation only<br/>SSO for login]

User Management Options:

Auto-provisioning: Sync all users from org directory → Automatic account creation
Manual + SSO Login: Admin invites users → Users log in via SSO (no password needed)
Hybrid: Combine both approaches with role mapping

Benefits:

No password management for team members
Centralized access control through org's IdP
Automatic offboarding when user removed from org
Single sign-on experience across all business tools

Database Schema Additions:

SSO configuration per business account
User identity mapping (SSO ID → PetFolio User)
Authentication method per user (email/password, SSO, OAuth)

Next Steps¶

Completed¶

✅ Design sign-up flows for business accounts (basic)
✅ Create dashboard wireframes for business accounts
✅ Map out user journeys for business account authentication flows

Immediate Priorities¶

Finalize authentication provider choice (Keycloak vs alternatives)
Design sign-up flows for personal accounts
Create dashboard wireframes for personal accounts
Add error states and validation to existing wireframes
Design first-time user onboarding experience

PetFolio Wireframing¶

Project Overview¶

What is PetFolio?¶

Target Audiences¶

Pet Owners (Personal Accounts)¶

Pet Professionals (Business Accounts)¶

Specialised Users (Business Accounts)¶

Technical Decisions¶

Account Architecture¶

Authentication Strategy¶

Design Decisions¶

Key Assumptions¶

Design Inspiration¶

Visual Design Philosophy¶

Layout / Responsiveness¶

User Experience Priorities¶

Questions Answered During Design¶

User Flows Implemented¶

Business Account Sign-Up Flow¶

Business Account Password Reset Flow¶

Business Account Login to Dashboard Flow¶

Not Yet Addressed (Future Work)¶

Business Account Verification (Future)¶

Authentication Features¶

User Flows¶

Additional Pages Needed¶

Business-Specific Features¶

Enterprise SSO (Future Feature)¶

Next Steps¶

Completed¶

Immediate Priorities¶