One Home Page, Three Ways

The communication problem

On a call, the founder said the home page felt cluttered. Will read it as a flow problem rather than a visuals problem: the page already carried the right words and images, in an order that made a first time visitor work to find a way in. Any proposal also had to keep the founder’s language exactly as written, so it could be approved without checking every line for changes.

The design approach

Change the order, not the brand. The live page was captured section by section on a computer and on a real phone profile, with every line of text inventoried. Three versions were built to choose from, each giving the visitor a different first step. The mockup builder took only the client’s exact text and image files. Every block maps to a section the theme already has, so whichever version is chosen can be built by drag and drop, with no developer and no custom code.

The work

Three home page versions in a ten page document set in the client’s own fonts and colours: the page as it is today on a computer and a phone, then each version on a computer and a phone with a list of the theme sections it is built from. The full phone pages also come as images to scroll on a phone, and each version has its own section by section build sheet.

• Version one, visitor first: it starts with the visitor’s own need, then where to get guidance, then the featured products.
• Version two, story first: the founder’s point of view opens the page in a split hero, then the founder, then where to start.
• Version three, products first: the featured products sit right under a single hero, with guidance close by.
• The same anchor in all three: one image and one button at the top, and one row of products.
• A script checked every line on every mockup against the live site. All three versions match word for word.
• A morning review by three reviewers, one reading for buildability, one as the client and one as a first time visitor on a phone. Every fix was applied.
• Will’s notes went in the same afternoon. In version one a text box that covered part of a photo moved aside. For version two, three split hero options were rendered and he picked one. His note on version three was two words: love it.
• A final check ran from 3:30 to 3:52 that afternoon. Three reviewers each read for something different: the house rules and the word for word match, Will’s notes and consistency, and the client reading on a phone. Then a separate skeptic re-checked each problem they reported. Thirteen AI agents took part in all.
• That check confirmed nine problems. All nine were fixed before Will saw the final. Among them: a caption that promised a button the picture did not show, phone pages with a large empty frame, and column breaks that sliced lines of text.
• The before shots were retaken so they show the page as a visitor first sees it.
• The first full pass was built and reviewed between 10:30 and 11:05 on the morning of the call, a day ahead of the deadline.
• Written into the system afterwards: show a fair before, make every caption match its picture, and cut columns only on plain background.