07 / Independent Editorial System / Commerce
Shortlist Picks
Measure first. Buy what fits.
Explore the website ↗
The task
A product photo alone does not explain whether it fits a buyer’s space.
My contribution
I designed and built the site and used AI to explore niche opportunities and product topics. The commercial goal was useful affiliate discovery through search-oriented content and stronger product presentation.
The approach
Specification-led guides organized around fit checks and reasons to skip a product.
What shipped
A component-based editorial website connecting specifications, fit checks and product alternatives.
Visual System
Color
#193E2EAction
#F8F7F3Paper
#202820Ink
#E5ECDAOrganize
#F1E4D4Kitchen
#E0E9EDDesk
Typeface
Georgia
AaBbCc Gg Qq 0123456789
Display headings: Georgia with Times New Roman and serif fallbacks.
Typeface
Arial
AaBbCc Gg Qq 0123456789
Body text: Arial with Helvetica and sans-serif fallbacks.
Actions & patterns
Editorial cards, fit-check sections and disclosed retailer actions.
Explore the actual work
Find the guide. Check the fit.
Open a guide and use the fit checks, specifications and reasons to skip before continuing to a retailer.
01
The task & my contribution
Context
Shortlist Picks is an independent affiliate editorial website. Its task is to help readers compare product specifications, check fit and choose whether to continue to a retailer.
Contribution
I designed and built the site and used AI to explore niche opportunities and product topics. The commercial goal was useful affiliate discovery through search-oriented content and stronger product presentation.
02
Editorial & commerce decisions
Fit before persuasion
Measurements, compatibility checks, Best for and Skip it if sections give readers practical reasons to choose or reject a product before the retailer handoff.
Images that explain context
A stronger visual presentation helps readers imagine where a product belongs. Listing specifications stay beside the imagery so the purchase decision has more than a picture behind it.
- 01
Find a category
- 02
Read a guide
- 03
Check specifications
- 04
Compare fit
- 05
Visit retailer
Check fit before checkout
03
Content & interaction review
Topic and specification research
I explored product niches and the specifications readers would need to compare. The guide structure turns that exploration into fit checks, relevant alternatives and reasons to skip.
04
Reusable systems
An editorial publishing system
Shared guide cards, category hubs, product-image treatments and affiliate actions connect the site. Markdown-based guides reuse the same structure across Organize, Kitchen and Desk topics.
05
Design through implementation
Content and components together
Astro, Markdown and reusable components support the publishing workflow. Category pages lead to guide details, then to clearly disclosed retailer links.
06
Accessibility
Practical guidance in a readable order
Clear headings, legible specifications and descriptive retailer actions keep the decision criteria easy to find. Disclosure and reasons to skip appear within the reading journey.
07
AI-assisted workflows
The input
I used AI to explore product niches, search-oriented topics and the specifications worth explaining in an affiliate guide.
My decision
I chose which products and questions to cover, and how to present them. Measurements, fit checks, reasons to skip and clearly labeled imagery turn topic ideas into a useful comparison.
The finished experience
Category hubs and reusable guides connect product discovery to a disclosed retailer handoff. The guide structure keeps practical decision criteria beside the product presentation.
08
The finished work
Delivered
A shipped affiliate editorial site with category hubs, reusable guides, fit checks and disclosed retailer handoffs.
Delivered work
Three categories. One publishing system.
