Mobile App - Complete Mobile Interaction Guide

HOME SCREEN

How to Navigate Here

From app launch:

1. Locate the app icon on your mobile device home screen
   
    
2. Tap once on the icon with your finger or thumb
   
    
3. Wait for the app to launch
   
    
4. The home screen automatically appears as the first screen
   
    

From any other screen within the app:

Method 1 - Via Hamburger Menu:

1. Look at the top-left corner of your screen
   
    
2. Tap the three horizontal lines (≡) once
   
    
3. A navigation drawer slides in from the left, covering about 75% of the screen
   
    
4. The remaining right side appears darkened
   
    
5. Tap "Home" (first option with house icon 🏠)
   
    
6. The drawer slides closed and you navigate to the home screen
   
    

Method 2 - Via Logo Tap:

1. Tap the text at the top center of most screens
   
    
2. The screen navigates back to the home screen
   
    
3. Note: This only works when you're NOT already on the home screen
   
    

Visual confirmation you're on home:

• Hamburger menu icon (≡) visible in top-left
  
   
• Logo centered at top
  
   
• Four colorful rectangular cards stacked vertically
  
   
• White/light background with no tabs
  
   

Page Elements & Detailed Mobile Interactions

Top Bar Controls

Hamburger Menu Icon (≡)

Location: Top-left corner, about 16-20 pixels from edges

Visual appearance:

• Three horizontal lines, evenly spaced, dark gray
  
   
• Each line approximately 20-24 pixels long
  
   
• Touch target is larger than visible icon (48x48 pixels minimum)
  
   

How to tap on mobile:

1. Hold your device comfortably with one or both hands
   
    
2. Position your thumb or index finger over the icon
   
    
3. Tap once with a quick press-and-release
   
    
4. The tappable area extends beyond the visible lines for easier tapping
   
    

What happens:

• A semi-transparent dark overlay covers the current screen
  
   
• A white panel slides in from the left edge
  
   
• The drawer covers about 75% of screen width
  
   
• Drawer shows: logo at top, menu options vertically, Settings at bottom
  
   
• Right side remains darkened and non-interactive
  
   

Navigation drawer contents:

• logo - Top, branding only
  
   
• Home - House icon, returns to dashboard
  
   
• Inbox - Envelope icon, opens reviews/messages/social
  
   
• Publish - Layers icon, opens post management
  
   
• Location - Pin icon, opens locations list
  
   
• Settings - Gear icon at bottom, opens settings
  
   

Alternative gesture (swipe from edge):

1. Place your finger on the far left edge of the screen (within 20 pixels)
   
    
2. Swipe right across the screen with a quick motion
   
    
3. The drawer follows your finger as you swipe
   
    
4. Lift when drawer is fully visible
   
    

To close the drawer:

• Tap the darkened area on the right side
  
   
• Swipe left across the drawer
  
   
• Tap any menu option (automatically closes after navigating)
  
   
• Press Android back button
  
   

"App" Logo

Location: Top center, about 40-60 pixels from top edge

Visual appearance:

• Text: Name
  
   
• Color: Medium to dark gray
  
   
• Font size: 16-20 pixels, all lowercase
  
   
• May include a small icon to the left
  
   

How to interact:

1. Tap once directly on the logo text
   
    
2. Tappable area includes text plus about 10 pixels padding
   
    
3. Text may briefly darken when tapped
   
    

What happens:

• If already on home screen: Nothing happens
  
   
• If on another screen: Screen transitions back to home dashboard
  
   

Use case: Quick return to main screen without opening menu

Quick Actions Section

Layout on mobile:

• Four rectangular cards stacked vertically
  
   
• Each card spans nearly full screen width (16-20 pixel margins)
  
   
• 12-16 pixels vertical spacing between cards
  
   
• Scrollable if screen height is limited
  
   
• Rounded corners (8-12 pixel radius)
  
   
• Subtle shadow or border
  
   

Each card structure:

• Left side: Icon (48-64 pixels) - star, message, pin, or document icon
  
   
• Right side: Two text lines
  
  
  • Title: Bold, 18-20 pixel font
    
     
  • Description: Light gray, 14-16 pixel font
    
     
• Background: Very light gray
  
   
• Entire card is tappable - one unified touch target
  
   

1. "Reply to Reviews" Card

Visual identification:

• Position: First card at the top
  
   
• Icon: Star or review icon (yellow/gold color)
  
   
• Title: "Reply to Reviews" in bold
  
   
• Description: "Respond to customer feedback" or similar
  
   

How to tap:

1. Look for the first card directly below the header
   
    
2. Position your thumb or finger anywhere on the card
   
    
3. You can tap: the icon, title text, description, or empty space within card
   
    
4. Press down and release quickly (standard tap)
   
    

Visual feedback:

• Card background changes to slightly darker shade
  
   
• Card may press inward slightly (subtle scale animation to ~98%)
  
   
• Haptic vibration on supported devices
  
   
• Ripple effect may spread from tap point
  
   

Navigation sequence:

1. Card returns to normal after release
   
    
2. Home screen slides left or fades out
   
    
3. May see brief loading indicator or white screen
   
    
4. Inbox module loads
   
    
5. Reviews tab is automatically active
   
    

You arrive at:

• Header: Hamburger menu, logo
  
   
• Tabs: Reviews (active/bold), Messages, Social
  
   
• Search bar: "Search and filter your Reviews" with search and filter icons
  
   
• Content: Scrollable list of review cards showing:
  
  
  • Circular avatar with reviewer initial
    
     
  • Reviewer name
    
     
  • Star rating (1-5 stars)
    
     
  • Review text excerpt
    
     
  • Location name with pin icon
    
     
  • Timestamp (e.g., "1389 days ago")
    
     
  • Platform icon (Google, Facebook, etc.)
    
     

Use cases:

• Check review notifications on-the-go
  
   
• Respond to negative reviews quickly
  
   
• Monitor customer feedback during business hours
  
   

2. "Check Your Messages" Card

Visual identification:

• Position: Second card, below "Reply to Reviews"
  
   
• Icon: Speech bubble or envelope
  
   
• Title: "Check Your Messages" in bold
  
   
• Description: "View customer inquiries" or similar
  
   

If card is not visible:

1. Place finger in middle of screen
   
    
2. Swipe upward (flick motion)
   
    
3. Content scrolls down, revealing second card
   
    
4. First card scrolls up and off-screen
   
    

How to tap:

1. Ensure entire card is visible (not cut off at top/bottom)
   
    
2. Position finger anywhere on card surface
   
    
3. Best tap zones:
   
   
   • Center of card: Most reliable
     
      
   • Icon area: Good for right-handed users
     
      
   • Text area: Larger target
     
      
4. Tap once with firm, quick press
   
    
5. Avoid: Too light (may not register) or too long (may trigger long-press)
   
    

Touch feedback:

• Card highlights immediately
  
   
• Background shifts to pressed state
  
   
• Ripple animation spreads from tap point
  
   
• Card may scale slightly
  
   
• Haptic feedback pulse
  
   

Navigation sequence:

1. Card returns to normal color and size
   
    
2. Home screen exits (slide or fade)
   
    
3. May see loading indicator or skeleton screen
   
    
4. Inbox module loads with Messages tab active
   
    

You arrive at:

• Header: Hamburger menu, logo, three tabs
  
   
• Active tab: Messages (bold/underlined)
  
   
• Search bar: "Search and filter your Messages"
  
   
• Content: Scrollable list of message threads showing:
  
  
  • Circular avatar (customer initial or photo)
    
     
  • Customer name (bold)
    
     
  • Platform icon (Facebook, Google)
    
     
  • Message preview (2 lines, may truncate with "...")
    
     
  • Timestamp (e.g., "835 days ago" or "2:34 PM")
    
     
  • Location name with pin icon (if applicable)
    
     
  • Status indicators (green checkmark if replied)
    
     

Features available:

• Scroll up/down through messages
  
   
• Tap search bar (keyboard appears)
  
   
• Tap filter icon (opens filter panel)
  
   
• Tap message card (opens conversation)
  
   
• Pull down from top to refresh
  
   

Use cases:

• Respond to customer questions while mobile
  
   
• Check urgent inquiries during business hours
  
   
• Handle customer service on-the-go
  
   

3. "View Locations" Card

Visual identification:

• Position: Third card in vertical stack
  
   
• Icon: Location pin/marker (📍)
  
   
• Title: "View Locations" in bold
  
   
• Description: "Manage your business locations" or similar
  
   

Scrolling to view:

Standard scroll method:

1. Place finger on middle/lower screen area (avoid header)
   
    
2. Swipe upward with moderate speed
   
    
3. Content scrolls down smoothly
   
    
4. First and second cards scroll up
   
    
5. Third card scrolls into view
   
    
6. Lift finger when card is centered
   
    

Flick scroll method:

1. Quick upward flick motion
   
    
2. Screen continues scrolling after finger lifts (momentum)
   
    
3. Tap screen to stop scroll if it goes too far
   
    
4. Scroll back up slightly if needed
   
    

Scroll indicators:

• Thin vertical bar appears on right edge while scrolling
  
   
• Bar disappears after 1-2 seconds of no scrolling
  
   
• Content bounces slightly at top/bottom (elastic effect)
  
   

How to tap:

1. Confirm entire card is visible and centered
   
    
2. Place finger anywhere on card
   
    
3. Tap once firmly and quickly
   
    
4. Feel for haptic feedback
   
    

Touch feedback:

• Card background darkens
  
   
• Subtle press animation
  
   
• Ripple spreads from tap point
  
   
• Card scales slightly
  
   

Navigation sequence:

1. Home screen transitions out
   
    
2. Location module loads
   
    
3. Locations list screen appears
   
    

You arrive at:

• Header: Hamburger menu, logo
  
   
• Search bar: "Search location name or identifier..." with search icon
  
   
• Content: Scrollable list of location cards, each showing:
  
  
  • Circular image/logo (business logo or default icon)
    
     
  • Location name (bold, e.g., "[Business Name]")
    
     
  • Full address (e.g., "[Street], [Postal Code] [City], [Country]")
    
     

Location list features:

• Scroll through all locations (swipe up/down)
  
   
• Tap search bar to find specific location
  
   
• Tap any location card to open detailed profile
  
   
• Pull down from top to refresh list
  
   

Use cases:

• Browse all business locations
  
   
• Find specific location by name
  
   
• Access location details to update hours or address
  
   
• Check location information while traveling
  
   

4. "Create A Post" Card

Visual identification:

• Position: Fourth and last card in Quick Actions
  
   
• Icon: Document, layers, or post icon
  
   
• Title: "Create A Post" in bold
  
   
• Description: "Share updates with customers" or similar
  
   

Scrolling to view:

1. May need to scroll down further from third card
   
    
2. Swipe upward on screen
   
    
3. Third card scrolls up
   
    
4. Fourth card scrolls into view
   
    
5. May see bottom of screen (end of Quick Actions section)
   
    

How to tap:

1. Ensure card is fully visible
   
    
2. Tap anywhere on card surface
   
    
3. Standard quick tap (press and release)
   
    

Touch feedback:

• Card highlights
  
   
• Pressed state visual
  
   
• Ripple animation
  
   
• Haptic feedback
  
   

Navigation sequence:

1. Home screen transitions out
   
    
2. Publish module loads
   
    
3. Recent Posts tab appears by default
   
    

You arrive at:

• Header: Hamburger menu, logo
  
   
• Tabs: Recent Posts (active), Templates
  
   
• Content: List of existing posts with status indicators
  
   
• Floating Action Button (FAB): "+" button in bottom-right corner
  
   

Post list displays:
Each post card shows:

• Status indicator:
  
  
  • 🔴 Red circle with X: Ended/expired
    
     
  • ✅ Green checkmark: Published
    
     
  • 🕐 Clock icon: Approval needed/pending
    
     
• Post title/text
  
   
• Platform icon (Google, Facebook, etc.)
  
   
• Date/timestamp (e.g., "MM/DD/YYYY (GMT+XX:00)")
  
   
• Additional info:
  
  
  • Location pin icon for location-specific posts
    
     
  • Star icon for featured posts
    
     
  • "Posted to X locations" for multi-location posts
    
     

Available actions:

• Tap post card to view/edit details
  
   
• Tap "+" button to create new post
  
   
• Switch to Templates tab
  
   
• Scroll through posts list
  
   
• Pull down to refresh
  
   

Use cases:

• Create social media posts on-the-go
  
   
• Publish Google Posts quickly
  
   
• Check status of scheduled posts
  
   
• Use templates for consistent messaging
  
   

NAVIGATION MENU (Hamburger Drawer) - Detailed Mobile Interactions

Opening the Drawer

Method 1 - Tap icon:

1. Tap hamburger icon (≡) in top-left
   
    
2. Drawer slides in from left
   
    
3. Takes about half a second to fully open
   
    

Method 2 - Swipe from edge:

1. Place finger on far left edge of screen (within first 20 pixels)
   
    
2. Keep finger on screen
   
    
3. Swipe right with steady motion
   
    
4. Drawer follows your finger movement
   
    
5. Continue swiping until drawer is about 75% across screen
   
    
6. Lift finger
   
    
7. Drawer completes opening automatically
   
    

Drawer appearance when fully open:

• Left panel (75% width): White background with menu options
  
   
• Right panel (25% width): Darkened current screen, non-interactive
  
   
• Shadow/elevation: Dark shadow along right edge of drawer
  
   
• Content: Scrollable if many menu items exist
  
   

Menu Structure

From top to bottom:

1. Logo with circular icon - Branding, no tap action
   
    
2. Home - House icon 🏠
   
    
3. Inbox - Envelope icon ✉️
   
    
4. Publish - Layers/document icon
   
    
5. Location - Pin icon 📍
   
    
6. Settings - Gear icon ⚙️ (at bottom, may require scroll)
   
    

Each menu item appearance:

• Left side: Icon (24-32 pixels)
  
   
• Right side: Text label in dark gray
  
   
• Height: Each row about 48-56 pixels tall
  
   
• Full width: Entire row is tappable
  
   
• Spacing: 8-12 pixels between rows
  
   

Menu Item Interactions

How to tap any menu option:

1. With drawer fully open, locate desired menu item
   
    
2. Tap anywhere on the row (icon or text area both work)
   
    
3. The touch target spans full width of the drawer
   
    

Visual feedback when tapping:

• Row background changes to light gray or highlight color
  
   
• Brief press state visual
  
   
• Ripple animation may spread across row
  
   
• Haptic feedback on supported devices
  
   

What happens after tapping:

1. Row briefly stays highlighted
   
    
2. Drawer begins sliding closed (back to left)
   
    
3. Simultaneously, screen transitions to selected module
   
    
4. Drawer disappears completely
   
    
5. New screen fully loads
   
    

1. Home Menu Option

How to use:

1. Tap the "Home" row (first option, house icon)
   
    
2. Drawer closes
   
    
3. Screen transitions to home dashboard
   
    

Result:

• You see the four Quick Action cards
  
   
• Same view as app launch screen
  
   
• If already on home, screen may briefly refresh
  
   

Use case: Return to main dashboard from any section

2. Inbox Menu Option

How to use:

1. Tap the "Inbox" row (envelope icon)
   
    
2. Drawer closes smoothly
   
    
3. Inbox module loads
   
    

Result:

• Three tabs appear: Reviews, Messages, Social
  
   
• Last active tab opens by default (or Reviews if first visit)
  
   
• Search bar and filter options visible
  
   
• Content list populates
  
   

Use case: Access customer reviews, messages, or social comments

3. Publish Menu Option

How to use:

1. Tap the "Publish" row (layers/document icon)
   
    
2. Drawer slides closed to the left
   
    
3. Publish module loads and displays
   
    

Result:

• Two tabs appear: Recent Posts, Templates
  
   
• Recent Posts tab is active by default
  
   
• "+" floating action button visible in bottom-right corner
  
   
• List of posts with status indicators displays
  
   
• Scrollable content area
  
   

Use case: Manage social media posts, create new posts, or access post templates

4. Location Menu Option

How to use:

1. Tap the "Location" row (pin icon)
   
    
2. Drawer closes with slide animation
   
    
3. Location module begins loading
   
    
4. May see brief loading indicator
   
    

Result:

• Search bar appears: "Search location name or identifier..."
  
   
• Scrollable list of all business locations
  
   
• Each location card shows: logo, name, and full address
  
   
• All cards are tappable for detailed profile view
  
   

Use case: Browse locations, search for specific location, or access location profiles

5. Settings Menu Option

Location: Bottom of the menu (may need to scroll down in drawer)

How to use:

1. If menu has many items, scroll down within the drawer
   
    
2. Locate "Settings" at the bottom (gear icon)
   
    
3. Tap the Settings row
   
    
4. Drawer closes
   
    
5. Settings module loads
   
    

Result:

• User greeting displays: "Hello, [Username]"
  
   
• Five main options listed: Account, Language, Security, Notifications, Legal
  
   
• Logout button at bottom
  
   
• App version number shown (e.g., "2.4.0")
  
   

Use case: Manage account, change language, adjust notifications, view legal info, or log out

Closing the Drawer Without Navigating

Method 1 - Tap outside:

1. Look at the darkened right side (25% of screen)
   
    
2. Tap anywhere in this darkened area
   
    
3. Drawer immediately slides closed to the left
   
    
4. You remain on the current screen
   
    

Method 2 - Swipe to close:

1. Place finger on the open drawer panel
   
    
2. Swipe left toward the edge
   
    
3. Drawer follows your finger
   
    
4. Lift finger when drawer reaches left edge
   
    
5. Drawer completes closing animation
   
    

Method 3 - Back button (Android):

1. Press the system back button (triangle icon or gesture)
   
    
2. Drawer closes without changing screens
   
    

Method 4 - Tap hamburger icon again:

1. Tap the hamburger icon (now visible as three lines or X icon)
   
    
2. Drawer toggles closed
   
    

INBOX MODULE - Detailed Mobile Interactions

Navigating to Inbox

Method 1 - From Home Quick Actions:

• Tap "Reply to Reviews" → Opens Inbox with Reviews tab active
  
   
• Tap "Check Your Messages" → Opens Inbox with Messages tab active
  
   

Method 2 - From Hamburger Menu:

1. Open hamburger menu (≡)
   
    
2. Tap "Inbox"
   
    
3. Last active tab opens (or Reviews as default)
   
    

Tab Navigation (Reviews / Messages / Social)

Tab layout:

• Three tabs displayed horizontally at top
  
   
• Positioned below the header
  
   
• Each tab label is tappable
  
   
• Active tab shows visual distinction
  
   

Visual appearance:

• Active tab: Bold text, underline or highlight, darker color
  
   
• Inactive tabs: Regular weight, gray color, no underline
  
   
• Tab height: About 48 pixels (easy thumb reach)
  
   
• Tabs span full width of screen (each about 33% width)
  
   

How to switch tabs:

1. Locate the three tab labels at the top
   
    
2. Identify which tab is currently active (bold/underlined)
   
    
3. Tap directly on the desired tab label text
   
    
4. You can tap anywhere within the tab's rectangular area
   
    

What happens when switching:

• Tapped tab text becomes bold immediately
  
   
• Underline or highlight slides to new tab
  
   
• Previous tab returns to regular weight and gray
  
   
• Content area below instantly updates
  
   
• Old content fades out or slides away
  
   
• New content fades in or slides in
  
   
• Brief loading animation may appear if fetching data
  
   
• Scrollable list populates with new content
  
   

Touch feedback:

• Tab may briefly darken when tapped
  
   
• Smooth animation between tabs
  
   
• No full page reload (fast switching)
  
   

REVIEWS TAB - Detailed Mobile Interactions

Screen Layout

From top to bottom:

1. App header - Hamburger menu (left), logo (center)
   
    
2. Tab bar - Reviews (active), Messages, Social
   
    
3. Search bar - With search icon (left) and filter icon (right)
   
    
4. Review cards - Scrollable list filling remaining screen space
   
    

Search Bar Interactions

Visual appearance:

• Full-width rounded rectangle (with side margins)
  
   
• Light gray or white background
  
   
• Placeholder text: "Search and filter your Reviews" in gray
  
   
• Magnifying glass icon on left (inside bar)
  
   
• Filter/sliders icon on right (inside bar)
  
   
• Height: About 48 pixels
  
   
• Border or subtle shadow
  
   

How to activate search:

1. Tap anywhere on the search bar (except the filter icon)
   
    
2. The entire bar area is tappable except the right-most filter icon
   
    

What happens when tapped:

1. Keyboard slides up from bottom of screen
   
    
2. Takes about half the screen height
   
    
3. Cursor appears in search field, blinking
   
    
4. Placeholder text disappears
   
    
5. Keyboard type: Standard text keyboard with search/enter button
   
    
6. Search bar may expand or gain focus highlight
   
    

Typing a search:

1. Use keyboard to type search terms
   
    
2. Can search for:
   
   
   • Customer names
     
      
   • Location names
     
      
   • Keywords from review text
     
      
   • Partial words (typing "foo" finds "food")
     
      
3. As you type, results filter in real-time
   
    
4. Non-matching reviews fade out or hide
   
    
5. Matching reviews remain visible
   
    
6. Match count may display (e.g., "5 reviews found")
   
    

Completing the search:

1. Tap "Search" or "Enter" key on keyboard to finalize
   
    
2. OR tap anywhere outside search bar
   
    
3. Keyboard slides down and disappears
   
    
4. Filtered results remain displayed
   
    
5. Search term stays in the bar
   
    

Clearing the search:

1. Look for "X" or clear icon that appears in search bar when text exists
   
    
2. Tap the "X" icon once
   
    
3. Search text clears immediately
   
    
4. All reviews reappear in list
   
    
5. OR manually delete text using backspace key
   
    

Search bar in portrait vs landscape:

• Portrait: Full width with margins
  
   
• Landscape: May shrink slightly to accommodate wider screen
  
   

Filter Icon Interactions

Location: Right side of search bar (inside the bar boundary)

Visual appearance:

• Sliders icon (two or three horizontal lines with circular knobs)
  
   
• App theme color
  
   
• About 24-32 pixel icon
  
   
• Touch target: 48x48 pixels (extends beyond visible icon)
  
   

How to tap:

1. Look at right end of search bar
   
    
2. Tap directly on the sliders icon
   
    
3. Touch target is generous - slight misses still register
   
    

Visual feedback:

• Icon may darken or highlight briefly
  
   
• Ripple effect may emanate from icon
  
   
• Haptic feedback pulse
  
   

What happens:

1. Filter panel slides up from bottom of screen
   
    
2. OR slides in from right side
   
    
3. Animation takes about half a second
   
    
4. Main reviews list becomes darkened or blurred in background
   
    
5. Filter panel overlays the reviews list
   
    

Filter panel appearance:

• Takes up 60-80% of screen height (or full height)
  
   
• White or light background
  
   
• Rounded corners at top (if sliding from bottom)
  
   
• Shadow or elevation effect
  
   
• Header shows "REVIEWS" title with back arrow on left
  
   

Filter Panel Detailed Interactions

Panel structure from top to bottom:

1. Header: "REVIEWS" title with back arrow (←)
   
    
2. Filter options: Five rows with dropdowns
   
    
3. Bottom area: May have "Apply" or "Reset" buttons
   
    

Filter sections:

• Location
  
   
• Directories
  
   
• Ratings
  
   
• Answered
  
   
• Time frame
  
   

Each filter row appearance:

• Icon on left (pin, globe, star, checkmark, clock)
  
   
• Filter name label
  
   
• "Select a filter" text on right (if nothing selected)
  
   
• Down arrow (▼) indicating dropdown
  
   
• Full row is tappable
  
   
• Height: About 56-64 pixels
  
   

Closing the Filter Panel

Back arrow button:

1. Tap the back arrow (←) in top-left of filter panel
   
    
2. Panel slides down or out (reverse of opening animation)
   
    
3. Returns to main reviews list
   
    
4. Any applied filters remain active (not cleared by closing)
   
    

Use case: Exit filter panel after applying filters or if you decide not to filter

Location Filter

How to interact:

1. Tap anywhere on the "Location" row
   
    
2. Entire row is tappable (icon, text, or right side)
   
    

What happens:

1. Row highlights briefly
   
    
2. Dropdown menu appears below the row
   
    
3. OR full-screen picker slides up from bottom
   
    
4. List of all your business locations displays
   
    

Dropdown/picker appearance:

• Scrollable list if many locations
  
   
• Each location shows name and possibly address
  
   
• Checkbox or radio button on left or right
  
   
• Current selection may be checked or highlighted
  
   

Selecting a location:

1. Scroll through list by swiping up/down
   
    
2. Tap the desired location name
   
    
3. Location name becomes checked or highlighted
   
    
4. Dropdown closes and returns to filter panel
   
    
5. Location row now shows selected location name instead of "Select a filter"
   
    

Selecting multiple locations (if supported):

1. Tap first location - checkbox appears checked
   
    
2. Tap second location - second checkbox checks
   
    
3. Both remain selected
   
    
4. Can tap to uncheck
   
    

Clearing location filter:

1. Look for "Clear" or "X" button next to location name
   
    
2. Tap to clear
   
    
3. Returns to "Select a filter" state
   
    

Directories Filter

Purpose: Filter reviews by source platform (Google, Facebook, etc.)

How to interact:

1. Tap the "Directories" row in filter panel
   
    
2. Dropdown or picker appears
   
    

What displays:

• List of all connected platforms/directories
  
   
• Examples: Google, Facebook, Yelp, TripAdvisor
  
   
• Platform icons may display alongside names
  
   
• Checkboxes for multi-select
  
   

Selecting directories:

1. Scroll through available platforms
   
    
2. Tap to select one or multiple
   
    
3. Checkmarks appear on selected items
   
    
4. Close dropdown by tapping outside or "Done" button
   
    
5. Directories row updates to show selected platforms (e.g., "Google, Facebook")
   
    

Result after applying:

• Only reviews from selected platforms show in list
  
   
• Reviews from other platforms are hidden
  
   

Ratings Filter

Purpose: Filter reviews by star rating (1-5 stars)

How to interact:

1. Tap the "Ratings" row
   
    
2. A modal popup appears (overlaying filter panel)
   
    

Modal appearance:

• White background card/dialog
  
   
• Centered on screen or slides up from bottom
  
   
• Header: "Ratings" title with X close button in top-right
  
   
• "Clear all" link in top-right (next to or below X)
  
   
• Five checkbox options listed vertically
  
   
• "Apply Filters" button at bottom (purple, full-width)
  
   

Five checkbox options:

1. ⭐ (1 star)
   
    
2. ⭐⭐ (2 stars)
   
    
3. ⭐⭐⭐ (3 stars)
   
    
4. ⭐⭐⭐⭐ (4 stars)
   
    
5. ⭐⭐⭐⭐⭐ (5 stars)
   
    

How to select ratings:

1. Tap on any star rating row
   
    
2. Checkbox on the left or right becomes checked
   
    
3. Can select multiple ratings
   
    
4. Each tap toggles checkbox on/off
   
    
5. Visual: Checked boxes show checkmark or filled square
   
    

"Clear all" button:

1. Tap "Clear all" link in top-right
   
    
2. All checkboxes uncheck immediately
   
    
3. Allows quick reset without unchecking individually
   
    

"Apply Filters" button:

1. After selecting desired ratings, scroll to bottom of modal
   
    
2. Tap the "Apply Filters" button
   
    
3. Button spans almost full width of modal
   
    
4. Button may show how many filters applied (e.g., "Apply 2 Filters")
   
    

What happens after applying:

1. Modal closes and disappears
   
    
2. Returns to filter panel
   
    
3. Ratings row updates to show selected ratings (e.g., "1, 2, 3 stars")
   
    
4. Reviews list instantly filters to show only selected ratings
   
    

Closing without applying:

1. Tap the X button in top-right of modal
   
    
2. Modal closes
   
    
3. No filters are applied
   
    
4. Previous selections remain unchanged
   
    

Answered Filter

Purpose: Filter by response status (replied/not replied)

How to interact:

1. Tap the "Answered" row
   
    
2. Dropdown or picker appears
   
    

Options typically available:

• All reviews
  
   
• Answered (reviews with responses)
  
   
• Unanswered (reviews without responses)
  
   

Selecting an option:

1. Tap desired option
   
    
2. Option becomes selected/checked
   
    
3. Dropdown closes
   
    
4. Answered row updates to show selection
   
    

Result:

• List filters to show only reviews matching selected status
  
   

Time Frame Filter

Purpose: Filter reviews by date range

How to interact:

1. Tap the "Time frame" row
   
    
2. Date picker or preset options appear
   
    

Common preset options:

• Today
  
   
• Last 7 days
  
   
• Last 30 days
  
   
• Last 90 days
  
   
• Last year
  
   
• All time
  
   
• Custom range
  
   

Selecting a preset:

1. Tap desired time frame option
   
    
2. Option highlights or checks
   
    
3. Picker closes
   
    
4. Time frame row updates with selection (e.g., "Last 30 days")
   
    

Custom range (if available):

1. Tap "Custom range" option
   
    
2. Calendar picker appears
   
    
3. Tap start date on calendar
   
    
4. Tap end date on calendar
   
    
5. Confirm selection
   
    
6. Custom range displays (e.g., "Jan 1 - Jan 31")
   
    

Result:

• Only reviews within selected time frame appear in list
  
   
• Older/newer reviews are hidden
  
   

Applying Multiple Filters

How filters work together:

1. Select location filter (e.g., "Location A")
   
    
2. Select ratings filter (e.g., "1, 2 stars")
   
    
3. Select time frame (e.g., "Last 30 days")
   
    
4. All filters combine with AND logic
   
    
5. Result: Only shows 1-2 star reviews from Location A in last 30 days
   
    

Viewing active filters:

• Filter panel rows show selected values instead of "Select a filter"
  
   
• Filter icon on main screen may show badge (e.g., "3" indicating 3 active filters)
  
   
• Reviews list displays filtered results
  
   

Clearing all filters:

1. Return to filter panel
   
    
2. Look for "Reset All" or "Clear Filters" button (if available)
   
    
3. OR manually clear each filter individually
   
    
4. Reviews list returns to showing all reviews
   
    

Reviews List - Card Interactions

List behavior:

• Vertical scrolling list
  
   
• Each review is a distinct card
  
   
• Cards have spacing between them (8-16 pixels)
  
   
• Full width of screen (with side margins)
  
   

Each review card displays:

Left side:

• Circular avatar (48-64 pixels diameter)
  
   
• Contains reviewer's profile photo OR first initial of name
  
   
• Background color if using initial
  
   

Right side (main content area):

• Line 1: Reviewer name in bold (e.g., "[Customer Name]")
  
   
• Line 2: Star rating - 5 star icons, filled based on rating
  
  
  • 5 stars: All gold/yellow
    
     
  • 4 stars: 4 filled, 1 empty/gray
    
     
  • 1 star: 1 filled, 4 empty
    
     
• Line 3-5: Review text excerpt (may be truncated)
  
  
  • Shows first 2-3 lines
    
     
  • May end with "..." if longer
    
     
  • Full text visible after tapping
    
     
• Bottom line: Metadata row
  
  
  • Location pin icon + location name (e.g., "[Location Name]")
    
     
  • Timestamp