Improve a local service business website

The brief

The problem to solve

Target users and assumptions

Users

• Homeowners with an urgent problem (a leak, no heating) who are stressed and on a phone.
• Homeowners planning work (a new boiler, a bathroom) who compare several companies over days.
• Landlords and letting agents who book repeat work for several properties.

Assumptions to test

• Urgent customers care most about how fast someone can come.
• Planned-work customers want price guidance before they contact anyone.
• Reviews and accreditations strongly influence trust.
• Most visitors use phones.
• The twelve-field form is a major reason people phone instead.

Business goals and user needs

Scope and constraints

In scope

• Home page, services overview, one service detail page (choose emergency repairs or boiler installation), about and trust content, booking request flow, confirmation.
• Mobile-first design with a desktop adaptation.
• Copy for all designed screens.

Constraints

• The business cannot promise exact prices online; it can give typical price ranges.
• Online payment is out of scope.
• The site will be built on a common website builder, so avoid custom interactions that need complex code.
• Emergency availability changes daily; the owner can update one short status message.

Research plan

1. Review the current site (or a real local equivalent) and note every question it leaves unanswered.
2. Analyse three to five competitor websites with the competitor matrix.
3. Interview five people who have hired a tradesperson in the last year, using the interview guide template.
4. If possible, speak to the business owner or front-desk staff about the most common phone questions.
5. Run a quick five-second test on the current home page with three people: what do they remember?

Competitor analysis worksheet

Copy this grid into a spreadsheet or your design file. Fill one row per competitor you choose.

Interview questions

1. Tell me about the last time you needed a plumber, electrician or similar. What happened?
2. How did you find and choose who to contact?
3. What did you need to know before you got in touch?
4. What made you trust, or distrust, a company?
5. How did you contact them, and why that way?
6. What, if anything, went wrong or was frustrating?
7. If it was urgent, what was going through your mind?

Synthesis

1. Write each observation on its own note, tagged with the participant number.
2. Group notes by similarity into themes on an affinity map.
3. For each theme write an insight: what it means for the design and why.
4. Rank insights by how often they appeared and how much they affect booking.
5. Separate urgent and planned-work findings if they differ.

Problem statement and success metrics

Homeowners with an urgent problem struggle to request help from Brightside on their phones because the website does not show whether the company covers their area, how soon an engineer can come, or a quick way to book, so they phone competitors who answer first.

A starting draft. Rewrite it from your own research.

Success metrics

• Booking requests submitted through the website per week (compare before and after launch).
• Task success in usability testing: request an emergency visit without help.
• Time to find the area covered and typical response time.
• Number of routine phone questions about price and area (ask the business to tally for two weeks).

Information architecture and user flow

1. Do a content inventory of the current site and mark each item keep, rewrite, merge or remove.
2. Group services into a small number of customer-facing categories (for example Emergency repairs, Heating and boilers, Bathrooms, Landlord services).
3. Draw a sitemap with no more than six primary pages.
4. Draw the booking request flow from home page to confirmation, including "area not covered" and "outside office hours" paths.

Sketching and wireframing

1. Sketch three different home page concepts in 15 minutes each: one led by emergency help, one by service categories, one by trust and reviews.
2. Pick one with reasons, and wireframe it on mobile at low fidelity.
3. Wireframe the service detail page and the booking request form (no more than five required fields).
4. Design empty, error and confirmation states for the form.
5. Review with the wireframe checklist template and get feedback from one person.

UI, components and prototype

UI and component requirements

• A small visual system: type scale, colour palette with semantic colours, spacing scale.
• Components: header with phone call button, service card, review snippet, availability banner, form fields, primary and secondary buttons, footer.
• All interactive states for buttons and fields.
• Real copy, including price ranges and a clear note that prices are estimates.
• Responsive desktop version of the home page and booking form.

Prototype requirements

• A clickable mobile prototype covering: home, a service page, the booking form, an error, and the confirmation.
• Realistic content in every screen.
• A tappable phone number link that is clearly labelled.

Usability testing and iteration

Testing plan

1. Write three tasks: request an emergency visit tonight; find the typical cost of a boiler service; check whether your area is covered.
2. Recruit five people who own or rent a home.
3. Run moderated sessions of about 20 minutes using the usability test plan template.
4. Record task success, hesitation points and quotes.
5. Summarise in the findings report template.

Iteration

• Fix every critical and serious issue and document what you changed.
• Retest the changed screens with at least two new people.
• Show before and after for at least two changes in your case study.

Accessibility checklist

Final deliverables

Portfolio case study outline

1. Summary: the business, the problem, your role, the outcome you can honestly claim.
2. What customers needed: two or three research insights with evidence.
3. Before: the main issues on the original site.
4. Structure: sitemap and booking flow decisions.
5. Exploration: the three home page concepts and why you chose one.
6. Design: annotated mobile screens.
7. Testing: tasks, results, changes made.
8. Reflection: what you would do next, for example measuring booking requests after launch.

Assessment rubric

Score yourself honestly, then ask a peer or mentor to score you. Aim for Competent on every row before calling the project finished.

Milestones

Tick tasks as you finish them. Progress is saved in this browser.

Optional extension challenges

• Design a simple availability status the owner can update from a phone in under a minute.
• Design a review request email sent after a job.
• Write the content for three service pages using plain language guidelines.
• Plan how you would measure the impact for the first two months after launch.

Hints and worked example

Try the project yourself first. The worked example shows one way through, with illustrative content that is not real research.