S
J
S

Waypoints

Waypoints

Define

Define
Brainstorming

I met with the developer who originally built the testimonials system to explore how we could convert the existing code into a WordPress Plugin using Vibe Coding instead of traditional development methods. We reviewed the existing setup, discussed its limitations, and identified opportunities to improve both the admin experience and how testimonials appear on the website.

Based on this discussion, I created a user flow for the admin interface which was used to help write the Product Requirements Document.

Admin User Flow
Project Scope
Functionality
  • Convert legacy code for existing testimonials system into a WordPress plugin.
  • Simplify the generated code for readability and maintainability.
  • Display a random testimonial through a WordPress shortcode.
  • Cycle through all testimonials before repeating within a session.
  • Allow display of a static testimonial by specifying its ID in the shortcode.
  • Prevent duplication of static and dynamic testimonials on the same page.
  • Store testimonial data in a JSON file with unique IDs for easy updates.
Admin Interface
  • Add a new top-level menu titled “MK Testimonials” in the WordPress dashboard.
  • Display a table of all testimonials.
  • Include options to add, edit, delete and copy the shortcode.
UX Considerations
  • Ensure every visitor sees a balanced mix of testimonials, improving perceived authenticity.
  • The style of the testimonials should be consistent with the brand.
Timeline

Prototype and implement the conversion within a short weekend sprint.

Prompt Engineering

Prompt Engineering
To reduce complexity and avoid errors from AI hallucination, we split the project into two stages:
Stage 1: Display Functionality
  • Created a Product Requirements Document with ChatGPT, then imported it into Cursor.
  • Used Cursor to generate the initial WordPress plugin code for random and static testimonial display.
  • Reviewed the generated code and identified unnecessary complexity.
  • Wrote a refined prompt instructing Cursor to simplify and DRY up the code.
  • Cursor generated the updated, clean version of the plugin.
Stage 2: Admin Interface
  • Followed the same process as above to generate the admin interface code.
  • Adjusted CSS styling manually for simple changes (e.g., font sizes) instead of prompting AI.
  • Ensured the admin interface maintained consistency and usability.
Initial prompt
Prototype

Testing

Testing
We installed the plugin on a staging site and simulated multiple sessions. We evaluated loading consistency, content readability, and perceived randomness.
Problem
We noticed that when a static testimonial was being used the dynamic testimonial would show the same testimonial.
Solution

We investigated the code and discovered the check for detecting the static testimonials on the page to exclude them from being displayed by dynamic testimonials on the same page was flawed. We corrected this code and tested it again to confirm it was working correctly.

Previous
Next