Visual design · Intermediate · 1 h

Improve a mobile layout

A desktop product page squeezed onto a phone. Reorder and resize it for one-handed use.

Context

An online plant shop's product page was designed for desktop. On a phone, the image is tiny, the price is below three paragraphs of description, the size selector is a row of small buttons that wrap awkwardly, and "Add to basket" is at the very bottom.

Your prompt

Redesign the product page for a 375px-wide phone so a customer can see the plant, choose a size and add it to the basket comfortably.

Instructions

List the decisions a customer makes on this page, in order.
Reorder the content to follow that sequence.
Make touch targets at least 44 by 44px with space between them.
Decide whether the add-to-basket action should be sticky; justify your choice.
Collapse long content (care instructions, delivery) without hiding essential information such as price and delivery cost.
Show the page at 320px and 414px widths to check it adapts.

Expected deliverables

Before and after mobile screens
Notes on the reading order and touch targets

Completion checklist

Price and size are visible before the description.
Touch targets are 44px or larger.
The page works at 320px without horizontal scrolling.
Delivery cost is visible before checkout.

4 items

Evaluation criteria

Content order follows the decision sequence.
Comfortable thumb reach for the main action.
Nothing essential is hidden behind a collapsed section.

Hints and an illustrative solution

Show hints

Many shoppers decide based on the photo, price and size. Description supports the decision; it rarely starts it.
Sticky bars must not cover content or the on-screen keyboard.

Show one possible solution

This is one reasonable answer, not the only one. Compare reasoning, not pixels.

One answer: a full-width swipeable image gallery, then the plant name, price and a one-line summary. Size options become a segmented control with three full-width segments (Small, Medium, Large) showing the pot diameter. "Add to basket" sits directly below, with a sticky version appearing only after it scrolls out of view. Delivery cost and dispatch time appear in one line under the button. Care instructions and full description collapse into labelled sections below.

Back to the practice library