Visual design · Beginner · 45 min

Rebuild a visual hierarchy

A class booking card where everything shouts at once. Decide what matters and make the layout say so.

Context

A yoga studio's class card shows the class name, teacher, time, spaces left, price and a booking button. In the current design every element has the same size, weight and colour, so people scan the whole card to find the time and miss the "only 2 spaces left" message.

Your prompt

Redesign the class card so a regular member can tell, in under three seconds, what the class is, when it is, whether there is space and how to book.

Vinyasa Flow

With Priya

Tuesday

18:30 to 19:30

2 spaces left

Rs 800

Book

Before: every element has equal weight, so nothing stands out.

Instructions

Rank the seven pieces of information from most to least important for a regular member. Write the ranking down before designing.
Group related information: what (class, teacher), when (day, time), availability, and action (price, button).
Use at most three text sizes and two weights. Make the class name and time the strongest elements.
Make "2 spaces left" noticeable without relying on colour alone, for example with an icon or a label.
Make the button look clearly interactive and the only primary action on the card.
Produce two versions with different layouts, then pick one and write why.

Expected deliverables

Your ranking list
Two card variants
A short rationale (under 150 words) for the chosen variant

Completion checklist

I ranked the information before designing.
Related items are visually grouped.
I used no more than three text sizes.
Low availability is clear without colour.
The button is the only primary action.
I tested the three-second rule on someone else.

6 items

Evaluation criteria

The most important information is the most visually prominent.
Grouping uses spacing and alignment, not boxes around everything.
The design remains readable at a 320px phone width.
The rationale explains decisions with principles, not taste.

Hints and an illustrative solution

Show hints

Squint at your design or blur it. Whatever you can still see is what people notice first.
Day and time can share one line: "Tue 18:30" is faster to scan than two lines.
Price often belongs next to the button, because it is part of the decision to book.

Show one possible solution

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

One reasonable answer: the class name sits at the top in the largest size and medium weight, with "with Priya" underneath in a smaller, muted style. The time "Tue 18:30 to 19:30" sits on its own line in a bold, slightly smaller size than the title, because members usually choose by time. A small label with a clock icon reads "2 spaces left" in dark text on a pale amber background, so it is visible to people who cannot distinguish colours. The bottom row has the price on the left and a solid "Book" button on the right.

The rationale: members already know the studio, so time and availability decide the booking. Grouping price with the button makes the cost part of the decision without competing with the time.

Back to the practice library