UI-Only Design for Zyper (GMB AI Optimization & Ads Platform) We're building a UI-only, no-backend prototype for a new SaaS tool called Zyper, designed for small businesses and local service providers to optimize and grow their Google My Business (GMB) profiles using AI. 🖌️ Design Guidelines Use the light-mode UI theme shown in the attached screenshots. Maintain the same design language: soft shadows, clean rounded containers, blue and grey color accents, pill buttons, and side navigation. All flows should be desktop-first, responsive, and cleanly spaced. 🧭 Sidebar Tabs Tab 1: Dashboard This is the main landing screen with the following 2 core containers: a. Business Profile Summary Progress bar indicating profile completion Short summary with business name, category, and logo Button: [View Full Profile] OR [Complete Profile Setup] if missing fields If [Complete Profile] is selected, show form inputs for: Full address (with Google Maps pin drop) Owner name & contact details Business email & phone number Business category & sub-category Business description (free text) Customer persona (free text) Services offered Business hours Business logo upload Current revenue (optional field) Business goals (free text) Media uploads (photos, videos) b. Optimize Profile (Free Feature) Show all editable fields of GMB listing AI-generated suggestions for each incomplete or poorly written field Option to auto-fill all fields with AI Optimization rating: Show as a visual gauge or circular progress indicator Formula: (Passed Fields / Total Fields) * 100 Tab 2: Performance Insights (Free Feature) a. Business Impressions Over Time Line graph with selectable time filters (Last 7 days, 30 days, Custom) Pie chart: Impressions split into: Calls Directions Website visits (Use data from GMB Insights API) b. Review Summary Number of new reviews in the selected period % increase/decrease (green/red indicator) CTA Button: [Manage Reviews] c. Post Activity Show last posted content and date AI-generated recommendation for next post Toggle for “Auto Post to Boost Engagement” Locked unless user is a premium subscriber Tab 3: Review Management (Premium Feature) a. Review Segmentation Pie chart dividing reviews: Positive, Neutral, Negative Show % change vs previous period (colored red/green) Tabs or filters to switch between sentiments b. Review List with AI Reply Features For each review: Reviewer info, rating, review content Status: AI Replied, Manual Reply, Unreplied Buttons: [Edit], [View Original Review] Toggle on top: “Auto AI Reply ON/OFF” AI tone selector: Friendly / Apologetic / Professional Tab 4: Ads (Premium Feature) a. View Ads Tabs: Running, Pending Approval, Completed Each ad shows: Campaign name, goal, budget Status (active, paused, rejected, pending) Metrics: Views, Clicks, CTR “View Details” button b. Create New Ad (AI-Enhanced Flow) Choose Target Audience Age, Gender, Income level, Family status Select Location & Radius Map pin or address Radius selector Set Budget & Duration AI-Generated Creatives Automatically generate: Keywords Headlines Descriptions Select Ad Goal Call, Website Click, Direction Upload Media Assets Or auto-generate via AI Review & Confirm Summary view showing: Objective (e.g. LOCAL_STORE_VISITS) Campaign type (PERFORMANCE_MAX) Budget, targeting, content Visual preview Launch & Redirect Payment will be made directly to Google via redirect Zyper just facilitates creation Final screen: 🎉 Confetti + “Ad Sent for Review” Tab 5: Settings (Bottom Placement in Sidebar) This tab contains general account management features for the SaaS: a. Account Info Email, phone, password change Profile image/logo b. Linked Accounts Google Ads Google My Business Google Tag Manager Show status: Linked / Not linked [Link / Reauthorize] buttons c. Subscription Management Current plan (Free or Pro) Plan expiry/renewal date [Upgrade to Pro] or [Cancel Subscription] d. Preferences Notification settings (email/SMS toggle) Language & Timezone Auto-posting preferences e. Security Reset password Two-factor auth toggle f. Legal & Help Privacy Policy Terms of Use FAQs Contact Support g. Logout Button

Please ensure that the UI you generate is not just a collection of static screens, but a fully connected and interactive front-end prototype, where every tab, button, toggle, and input field is part of a seamless, guided user flow. This should simulate the real experience of a SaaS dashboard, even though no backend is involved.

🔁 Key Expectations: Working Flow, Not Static Screens State Retention & Progression

Data input on one screen (e.g., in the Business Profile form) should reflect in summary views or completion indicators elsewhere (e.g., Dashboard progress bar).

For toggles like “Auto Reply ON/OFF,” ensure that their state persists when the user navigates between tabs or refreshes the tab within the prototype.

Inter-screen Linking

All buttons should lead to the correct functional views. For example:

[Complete Profile Setup] → navigates to the full profile form.

[Manage Reviews] → takes the user directly to the Review tab with applied filters.

[Create New Ad] → starts a guided, step-by-step ad creation flow with real transitions.

Realistic UI Transitions

Clicking “Optimize with AI” should trigger a visual update to fill in form fields with dummy AI content (simulate autofill).

On ad creation, once the “Launch” button is clicked, show a confetti screen, then direct the user to the Running Ads tab automatically.

Dynamic Components

Filters (e.g., time range in performance insights, sentiment in review tabs) should apply and visually update the relevant data displays like charts or review lists.

Progress bars, pie charts, and other visuals must change based on mock data or previous user interaction (e.g., selecting a date range alters the impressions graph and pie chart values).

Multi-Step Flows

The ad creation flow should behave like a wizard:

Step-by-step navigation

Step indicator (e.g., 1 of 6)

[Back], [Next], and [Cancel] options

Disabled [Next] if mandatory fields are incomplete

Final step includes a full summary + dummy asset upload interaction

Locked/Premium Features Simulation

For features that are only for premium users, include:

A locked visual indicator (greyed-out toggle or blurred section)

A tooltip or modal popup explaining “Upgrade to Pro to unlock this feature”

An [Upgrade Now] button that routes to the Settings → Subscription tab

Redirect Simulation

Simulate redirect-based flows:

When an ad is ready for launch and payment, show a “Proceed to Google Payment” button that mimics redirect behavior with a dummy confirmation screen afterward.

🔗 User Journey Continuity Ensure the user journey feels uninterrupted, intuitive, and role-appropriate:

Onboarding-style first-time use: If business profile is incomplete, prompt the user and redirect to form fill with visual hints.

Post-ad creation: After confetti, CTA options should include:

[Go to Ad Dashboard]

[Create Another Ad]

From dashboard to any tool: All CTA buttons on the dashboard should correctly deep-link to the corresponding section with state/mode preloaded (e.g., clicking “Manage Reviews” with “Negative Reviews” already filtered).

Consistent breadcrumbs or tab highlight state: The sidebar tab should always reflect where the user is currently.

🛠️ Additional Details to Simulate: Form validations: Required field prompts, visual cues for incomplete inputs

Dynamic visuals: Changing optimization score when profile fields are filled

Loading or success states: Brief loaders or checkmarks to show feedback

Scroll behavior: Sections with expandable/collapsible behavior or scroll-to-focus for long forms

The final result should be an interactive and connected UI prototype that can:

Simulate a real SaaS app experience from first login to ad creation

Serve as a development-ready reference for front-end handoff

Make user flow testing possible for both free and premium journeys