Project

Redesign a small business's booking flow

Beginner

The brief

Goal

Choose a real small business that takes bookings, such as a salon, clinic, gym, tutor or restaurant, and redesign its booking flow so customers can book quickly and confidently on a phone. Base every decision on research and testing, and hand the result over as you would to developers.

Steps

  1. Choose the business. Pick one whose booking process has clear problems: bookings by phone or message only, a form that is hard to use on a phone, or a booking page that confuses people. Record the current process with screenshots and annotate the problems.
  2. Research. Interview at least three people who book this kind of service. They don't have to be this business's customers. Read the business's public reviews for comments about booking.
  3. Define. Write a problem statement and three to five job stories, each backed by your research.
  4. Structure. Map the current flow and your proposed flow, including at least three unhappy paths.
  5. Wireframe every screen of the proposed flow on a phone-sized frame, with real content.
  6. Visual design. Design the key screens at high fidelity with a small design system: colours, a type scale, a spacing scale and components with their states. Check every text and button colour pair against WCAG AA contrast.
  7. Prototype and test. Build a clickable prototype and test it with at least three people, ideally five. Record the problems, fix the most serious ones and note what you changed.
  8. Hand over. Prepare a handover package as described in the lesson "Handing designs to developers".

Rules

  • Use only public information about the business. Don't present your work to the business as if it had been commissioned, and don't contact its customers without the owner's agreement.
  • Anonymise everyone you interview or test with, and ask for consent before recording.
  • Use real content from the business's public site, or realistic drafts clearly marked as drafts.
  • Any design tool is fine, and so is paper for the early stages. Photograph paper work clearly.

How to submit

Put everything in one shared folder, design file or document, give Skillhancer Labs staff view access, and submit the link below with any notes for the reviewer.

What reviewers look for

  • Design decisions trace back to research, not personal taste
  • The new flow is shorter or clearer than the original, and unhappy paths are handled
  • Screens have a clear hierarchy, consistent spacing and readable type
  • Text and controls meet WCAG AA contrast, and forms have visible labels and helpful errors
  • Testing was real, problems are reported honestly, and the changes follow from them
  • The handover package would let a developer build the flow without guessing

What to hand in

  • Annotated screenshots of the current booking process
  • A research summary from at least three interviews, with a problem statement and job stories
  • Current and proposed user flows, including at least three unhappy paths
  • Phone wireframes for every screen of the proposed flow
  • High-fidelity designs of the key screens, with a small design system and contrast checks
  • A clickable prototype, and a test report from at least three participants with the changes you made
  • A handover package for developers
Redesign a small business's booking flow · UI/UX design foundations · Skillhancer Labs