Skip to content
Pinebox StudioStart a project
Back to our work

Studio Exercise / Website redesign

Juniper Home Repair

Same business idea. A more organized page.

A before-and-after exploration of hierarchy, typography, mobile layout, and a clear contact action for a fictional home-maintenance business.

Fictional business. Both versions created for this exercise. Pinebox built the dated layout and the redesign. This was not commissioned client work, and no measured results are claimed. The demo inquiry forms are disabled.

The desktop comparison

A different reading order.

Both pages describe the same repairs, assembly, and maintenance services. These are screenshots of the actual working layouts, shown at the same scale.

Before

Competing headings, dense service copy, and fixed desktop columns. The contact section sits near the bottom of the page.

Juniper’s dated webpage with repeated headings, a service sidebar, and compact text in two fixed columns.
Explore the before page

After

One introductory heading, three service groups, and an early inquiry button. Cream, pine, rust, and an original tool illustration give Juniper its own identity.

Juniper’s redesigned website with the heading Help with the jobs around home, an Ask about a job button, and a house-and-tools illustration.
Explore the after page

The same pages, on a phone

Room to read.
A place to start.

The before layout keeps its desktop proportions and shrinks the content. The redesign gives the introduction, inquiry button, and service cards their own space in a single column.

Before
The same dated page on a phone, with desktop columns scaled down and text made small.

Desktop columns, squeezed into a phone.

After
The responsive Juniper page on a phone, with a large readable heading, supporting text, and the Ask about a job button before the illustration.

A readable introduction and a clear next step.

The design decisions

Four things we reorganized.

01

Clearer hierarchy

One heading explains the offer. Repairs, assembly, and maintenance follow in three distinct groups.

02

Readable type

Serif headings and a consistent body-text scale give each piece of information a clear role.

03

Mobile layout

The content stacks into a single column instead of squeezing the desktop layout into a phone.

04

Clear next step

Ask about a job appears directly after the introduction and leads to the illustrative inquiry section.

Both demos request the same inquiry details: name, email, and the job. No messages are sent, and Juniper does not provide a real repair or booking service.

Open the full comparison

A page that needs a little order?

Tell us about your business and what you need your website to make clear.

Start a project