Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Choose a Compatible WordPress Theme

Design a marketplace purchase flow that helps site owners evaluate compatibility, licensing, support, and update history.

Responsive web

The brief

Understand the problem

Background

Themes and plugins can conflict with WordPress versions, page builders, hosting environments, and each other. Attractive demos rarely expose long-term maintenance risk.

User context

Farid is rebuilding a small hotel website. He needs a theme that works with his booking plugin, supports two languages, and includes updates for at least one year.

Product problem

Buyers need to evaluate technical fit before payment and understand what a license includes after the refund window closes.

Objective

Create search, compatibility evaluation, license selection, and post-purchase setup for a WordPress theme.

What to design

Define the experience

Required experience

  • Marketplace search with technical compatibility filters
  • Theme detail with update and support evidence
  • Environment compatibility check
  • License and checkout review
  • Post-purchase download and update guidance

Screens and states

  • Marketplace results
  • Theme detail
  • Compatibility check
  • Checkout
  • Purchase library

Core user flow

Follow the critical path

  1. 01

    Farid filters themes by booking integration and multilingual support

  2. 02

    He inspects update history, documentation, and support policy

  3. 03

    He checks the theme against his WordPress and plugin versions

  4. 04

    He selects a single-site license and reviews renewal terms

  5. 05

    After purchase, he downloads the theme and setup guide

Product rules

Requirements and constraints

Requirements

  • Make verified compatibility distinct from seller claims
  • Show last update, supported versions, and change history
  • Explain site limits, support period, updates, and renewal pricing
  • Surface known conflicts and required dependencies
  • Keep purchased versions and license keys accessible
  • Provide a security notice when an installed version becomes vulnerable

Constraints

  • Compatibility data becomes outdated quickly
  • Sellers define licenses differently
  • A demo may use extensions not included in the purchase

Reality check

States worth considering

The compatibility check cannot identify a custom plugin
A required dependency costs extra
The product is removed after purchase
A refund request falls outside the stated policy
A critical security update is released

Finish line

What to deliver

  • Design five responsive screens for technical comparison, transparent licensing, and post-purchase ownership.

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#1B1A1A
#E9C5B7
#716561
#8B8C8A
#8C848C
Font pairing
Merriweather SansOswald

Merriweather Sans & Oswald

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations