Skip to content

Clínica Dr. Cimó · Interactive landing page

An Interactive Landing Page for Clínica Dr. Cimó

  • UX/UI
  • Building with AI
  • SEO

From defining the questions to building a guided contact flow

I defined the questions, scoring, and messages, then built the landing page with Lovable and ChatGPT. The project brings content, interaction rules, and interface design together in a three-step flow leading to a contact form.

Explore the screens
Client
Clínica Dr. Cimó
Type
Interactive landing page
My role
  • Flow and rule design
  • Copy and UX/UI
  • Landing page development
  • SEO
Tools
Lovable, ChatGPT
Project credit
Agência Q.Com

§ 01

Context

The clinic needed to introduce its dental implant services and collect information from people interested in getting in touch. I organized the experience into an introduction, three question stages, and a contact form.

My work included deciding what to ask, how each choice would affect the score, and which message would appear at the end. Content and interface behavior were designed together.

  1. § 02

    UX/UI decisions

    01

    Give the questions a clear sequence

    I grouped the questions by topic: the initial situation, expectations and area of interest, then additional questions. Each stage has a heading, guidance, and controls to continue or go back.

    On desktop, the clinic's identity and a progress summary sit alongside the questions. The main content changes while those reference points stay in place.

    Expectations and treatment area in separate groups. Fictional 20-point demonstration; the section continues below the frame.
  2. 02

    Make selected answers visible

    I used changes in card borders and backgrounds to distinguish selected answers. The score also updates as answers change.

    The answer cards and controls stay in the same positions before and after selection. The interaction pattern stays consistent as the summary updates.

    Selected answer styles and an updated summary. Fictional answers totaling 10 points.
  3. 03

    Guide the next step and allow changes

    When a required answer is missing, the interface explains what needs to be selected before continuing. A back button lets visitors review their choices.

    In the documented scenarios, previous answers were preserved when returning to an earlier stage. The mobile gallery also shows the state after going back.

    Fictional test of continuing without an answer. The message appears at the bottom of the emulated tablet capture.
  4. 04

    Connect the answers to the contact step

    I proposed the answer weights and score-based messages. After the questions, the interface asks for a name, WhatsApp number, neighborhood, preferred contact time, and consent.

    The score shapes this contact experience; it is not a diagnosis. The summary remains on the final screen, where 100% marks arrival at the form, before submission.

    Contact screen in a fictional 25-point scenario. Fields are empty and nothing was submitted; 100% marks arrival at this screen.
  5. 05

    Rearrange the content for smaller screens

    On tablet and mobile, the side panel moves below the questions. Choices arranged in columns on tablet become a single column on mobile.

    I kept the visual identity and selection states consistent while adapting the content layout to the available width.

    Full-page capture in tablet emulation. Fictional choices from a separate scenario, with the panel below the questions.

§ 03

AI-assisted development

I used Lovable and ChatGPT to develop the project around the flow, copy, and rules I had defined.

Content and interaction
Questions, answer options, and messages belong to the same experience, with rules reflected in the interface states.
Checking the flow
The documentation covers selection, attempts to continue without an answer, back navigation, and arrival at the contact form. These states show how the implementation behaves.

§ 04

SEO

The landing page also includes SEO foundations tied to the clinic's services and its location in Assis, Brazil.

Search presentation
A specific page title and description, canonical URL, declared language, and image alt text.
Page structure
Section headings and structured data for the clinic, website, and FAQ.

§ 05

Use and response

The landing page was used, and from the updates I received, people did get in touch. I was not given counts or a reporting period, so this is a qualitative account of use rather than a measured conversion result.

§ 06

Screens

Selected answers and scores are fictional demonstrations. Tablet and mobile views were captured using viewport emulation; the scenarios are not one continuous session.

Desktop · 03

FIG. 01An additional question before the contact step. Fictional 25-point demonstration; the percentage indicates the interface stage.
FIG. 02Opening screen with no answers entered.
FIG. 03Expanded FAQ in a demonstrative interface state, with a side summary. It does not represent care, diagnosis, or a clinical outcome.

Tablet · 03

FIG. 04Fictional 80-point scenario. The message does not establish clinical priority, availability, or a reserved appointment.
FIG. 05Initial demonstration state. No patient response, diagnosis, or actual clinical assessment is shown.
FIG. 06Demonstrative state in tablet emulation: FAQ answer and summary in sequence. It contains no real patient responses and does not establish a clinical outcome.

Mobile · 03

FIG. 07Introduction and entry point in mobile emulation, before any answers.
FIG. 08State after returning to the first stage, with fictional answers preserved. Captured in mobile emulation.
FIG. 09Summary below the form. Fictional 25-point scenario before any submission; mobile emulation.

§ 07

Credits

Project credit: Agência Q.Com.

Matheus Barros: questions, scoring, and message design; copy, UX/UI, development, and SEO. Photographs supplied by the client.

Contact

Have an experience you want to build?

Tell me what you have in mind. We can talk through the flow, content, and interface your project needs.

Let's talk

Team opportunities

WhatsApp