Didion Masa/Arepa Landing Page — UX & Design Specifications
Overview
This article captures the approved UX and design changes for the Didion Masa/Arepa product landing page, as reviewed and finalized in a marketing call between Diana Henry (Didion) and the Asymmetric team. The page was near-complete at time of review; the items below represent the final round of changes before leadership sign-off.
See also: [1] | [2]
Approved Changes
Image Transitions
- Change: Replace the "flash" transition between hero/slideshow images with a fade transition.
- Rationale: Diana noted the flash looks like a mistake; a fade reads as intentional and professional.
Product Section Header
- Change: Add a subheading above the product list (Traditional / Non-GMO section).
- Approved text: "Customized for you"
- Rationale: Provides context for the product list and adds an SEO-relevant phrase to the page.
Product List Formatting
- Change: Replace comma-separated product names with bullet separators.
- Rationale: Comma-delimited lists in this layout are hard to scan; bullets improve readability without requiring a full list element.
Custom Blend — Restore "Additives"
- Change: Re-add "Additives" to the Custom Blend product description (full label: Custom Blend Additives & Fortifications).
- Rationale: The word was dropped in a prior iteration; restoring it improves SEO alignment with sell sheet terminology.
CTA Button Reduction
Too many "Request a Sample" buttons were creating visual clutter. The following placements were removed:
| Location | Decision |
|---|---|
| Testimonial banners (both) | Remove |
| Transportation section | Remove |
| Customization section | Remove |
| Just above the form | Remove |
Retained placements: Hero section, product-level CTAs (one per product in the carousel/list area). Approximate remaining count: 3–4.
- Rationale: Users who have scrolled to the form don't need another CTA immediately above it. Reducing button density makes each remaining CTA more prominent.
Product Carousel — Pluralization
- Change: Pluralize all product names in the scrolling carousel for consistency.
- Examples: "Arepa Buzz" → "Arepa Buzzes", "Tamale" → "Tamales", confirm "Corn Chips", "Tortillas" are already plural.
- Reference: The lower section of the page already uses plural forms; the carousel should match.
Responsive Layout Review
- Change: Developer to review layout at desktop, tablet, and mobile breakpoints.
- Known issue: Large blank spaces appear between sections at certain viewport widths, likely caused by fixed-size images that do not scale down responsively.
- Note: The circle/product image on the right side may need a re-cropped asset if more of the image needs to be visible at smaller sizes. Diana noted mobile and desktop are the primary targets; tablet is secondary.
SEO — Image Alt Text
- Change: Ensure all images have descriptive alt text (not auto-generated filenames like "group-121").
- Owner: SEO specialist to audit after page changes are finalized. Divi's image naming behavior requires manual override.
Page Status
| Item | Status |
|---|---|
| UI/UX changes listed above | Pending implementation (Melissa / dev team) |
| Leadership review | Pending — Diana to send to leadership after changes applied |
| Navigation / Milling Products page listing | Separate task — see [3] |
| Homepage hero graphic linking to this page | Separate task — approved graphic ready |
| Form → Google Sheet integration | Broken — under investigation (Zapier/WP issue) |
Related Issues Discovered During Review
Form Integration Broken
During a live form test, Diana confirmed that email notifications fired correctly (submitter confirmation + internal alert), but the submission did not populate the tracking Google Sheet. Separately, the sheet was found to contain approximately 1,500 spam submissions.
Root cause investigation pointed to two deactivated WordPress plugins:
- WP Mail SMTP Pro — manages email delivery routing; found deactivated, license expired/missing
- Akismet Anti-Spam Protection — blocks spam form submissions; found deactivated, API key not configured
Hypothesis: Both plugins were connected to a prior agency's license/account. When the site was transferred, the licenses were not migrated, causing silent deactivation.
Resolution path: Melissa to contact Eshak and Mark (web dev team) with findings and request investigation. Zapier connection between Gravity Forms and Google Sheet also needs to be verified.
See [2] for broader notes on SMTP and spam protection plugin standards.
Key Contacts
| Person | Role | Notes |
|---|---|---|
| Diana Henry | Didion Marketing | Page reviewer, sends to leadership for final approval |
| Melissa Cusumano | Asymmetric PM | Coordinates dev changes, owns action items |
| Michal Bielerzewski | Asymmetric | Email/content work |
| Eshak / Mark | Web dev team | Responsible for plugin and form fixes |
Action Items
- [ ] Melissa — Implement all UX changes listed above on the landing page
- [ ] Melissa — Contact Eshak and Mark re: WP Mail SMTP Pro license, Akismet API key, and Zapier/Google Sheet connection
- [ ] Melissa — Test form submission end-to-end (email notification + Google Sheet population) after plugin fix
- [ ] Diana — Send updated landing page to leadership for final approval
- [ ] SEO specialist — Add descriptive alt text to all page images post-launch