A run by SkillLift on an invented brief (fictional shop, fictional town). Skill: critique-visual-hierarchy, designer-skills at 9a6930c. The screen below was built by SkillLift as the input; the critique is the skill's output, unedited.

Input screen

invented current booking page

Visual hierarchy critique: Saltmere Spokes booking page (390 x 844 phone screen)

Entry Point — major issue

Observation. The first element the eye lands on is the hero block: a large sage-green slab with the 30px white serif line "Community bicycle repair, Saltmere". It is the biggest, highest-contrast area on the screen.

Problem. The entry point is a shop description, not the primary user goal for a booking page, which is to book a slot. The dominant element has no action attached to it, so attention is spent before the user has been offered anything to do.

Fix. Make the booking action the entry point. Cut the hero to a short band and put one solid, full-width "Book a slot" button inside it, so the most dominant thing on the screen is the thing the shop wants people to press.

Eye Flow — major issue

Observation. Flow runs top to bottom through six same-looking sections: About, Prices, Opening hours, Bring your own parts, Ready?, Find us. The "Book a slot" control is the fifth item, at about y=774 of an 844px screen, directly under a paragraph.

Problem. The path never leads to the call-to-action. It arrives there only by reading everything above it, and three underlined links in the parts paragraph (parts policy, volunteer roster, FAQ) pull the eye sideways, away from the booking path. Those links are the loudest interactive elements on the page.

Fix. Put the action at the start of the flow and repeat it where the user's reading ends. Move the button above the first section, and keep the three links but set them as quiet secondary text below the booking area.

Weight — major issue

Observation. Every section heading is the same 20px bold green serif, so the six headings carry equal weight. The "Book a slot" label is 13px sans-serif in pale green (#7fa090) on a near-white fill (#f3f6f4), with a 1px pale border. The price tiles use the same pale fill and border as the button.

Problem. The most important element has the lowest weight on the screen, smaller than the body text (15px) and smaller than the headings, which breaks the 1.5x step between hierarchy levels. Headings are all equally heavy, so bold stops carrying signal. The button is also styled like the price tiles, so it reads as another information box.

Fix. Give the button the highest weight on the page: solid dark green fill (#2f5d50), white 18px semibold label, full width, at least 52px tall. Reduce the section headings to a lighter step so the button outranks them.

Emphasis — major issue

Observation. Emphasis is spread over the hero image block, the green headings, the bold underlined links, and the price tiles. The button has none: no filled colour, no shadow, no contrast.

Problem. There are several competing emphases and the one that matters has none. False emphasis (decorative hero, underlined links) outweighs the functional element. This is the "Buried CTA" failure pattern: the action is visually quieter than the content around it, which is why phone users miss it.

Fix. Allow exactly one primary emphasis zone: the booking button, in the only solid-filled colour block besides the hero. Strip underline and bold from the three secondary links and take the border off the price tiles.

Ratings

  • Entry Point: major issue
  • Eye Flow: major issue
  • Weight: major issue
  • Emphasis: major issue
  • Strongest recommendation: make "Book a slot" a solid, full-width, high-contrast button at the top of the screen, the single heaviest element on the page, and demote everything else around it.