MtGoPortfolio

Leveraging AI for a Rapid Weather App

Project Case Study

Target

Role: UX Designer
Tools: Lovable, ChatGPT, GA4, Met Office API
Focus: AI-assisted design, rapid iteration, accessibility, and analytics-driven UX

Creating an AI-Assisted designed weather app using the Lean UX framework and APIs.

Development with AI

AI-assisted app builders enable rapid development, but without a UX structure, they can lead to inefficient iteration, unclear requirements, and wasted resources.

The challenge was to design and build a functional, accessible weather app using Lovable while maintaining UX rigour, minimising credit usage, and ensuring the product was measurable, usable, and scalable.

Co-designing with Lovable

I treated Lovable as a co-designer rather than a code generator, applying a standard UX framework: planning, validation, iteration, and analysis, throughout the build.

Planning Mode

Started in Planning Mode to reduce credit usage and prevent premature execution.

Used Lovable’s scoping questions (audience, location, purpose, visual direction) as a lightweight discovery phase.

Reviewed and refined the autogenerated plan before approving it, treating it as a design specification rather than a final solution.

Evaluated data-layer options and selected the appropriate database approach.

Validated external API requirements by confirming the Met Office API did not require a client ID, unblocking integration early.

Using the planning mode

  • Started in Planning Mode to reduce credit usage and prevent premature execution.
  • Used Lovable’s scoping questions (audience, location, purpose, visual direction) as a lightweight discovery phase.
  • Reviewed and refined the autogenerated plan before approving it, treating it as a design specification rather than a final solution.
  • Evaluated data-layer options and selected the appropriate database approach.
  • Validated external API requirements by confirming the Met Office API did not require a client ID, unblocking integration early.

Prototyping with Lovable

  • Updated the background imagery post-render to better align with the product tone.
  • Added a hero icon to the title screen to strengthen visual hierarchy and branding.
  • Introduced a persistent header and footer to improve navigation and structure.

Establishing the core functionality

  • Added a 7-day weather forecast to increase the depth of information.
  • Implemented a location search feature to support multiple cities and user control.
  • Inspected the backend structure to better understand how Lovable assembled the app, enabling more intentional edits.

Accessibility & SEO

  • Applied ARIA roles and descriptive labels to ensure screen-reader compatibility.
  • Added structured data markup to improve search engine understanding.
  • Validated schema using Google’s Rich Results Test.

Analytics

  • Delivered a fully functional, accessible weather app with:
    • Dynamic location search
    • Extended forecasting
    • Analytics instrumentation
    • SEO and accessibility best practices
  • Achieved rapid iteration without unnecessary credit usage by separating planning, rendering, and post-render edits.
  • Maintained UX control in an AI-driven environment by validating assumptions before execution.
  • Added a llms.txt file to guide LLM indexing and interaction.
  • Explicitly excluded sensitive infrastructure details to reduce risk exposure

Key Learnings

Delivered a fully functional, accessible weather app with:

  • Dynamic location search
  • Extended forecasting
  • Analytics instrumentation
  • SEO and accessibility best practices

Achieved rapid iteration without unnecessary credit usage by separating planning, rendering, and post-render edits.

Maintained UX control in an AI-driven environment by validating assumptions before execution.

Final Outcome

  • AI tools are most effective when constrained by UX thinking, planning, and validation, which significantly reduces rework.
  • Treating AI-generated outputs as drafts, not decisions, preserves design intent.
  • Free post-render edits enable a true iterate-and-refine workflow that mirrors traditional UX processes.
  • Accessibility, analytics, and SEO can and should be integrated into AI-assisted builds from the start.

MtGo Design