Skip to main content
UI Coach Logo
Back to challenges
Intermediate

First DIY Project Coach

Design a beginner-friendly project guide that helps someone choose, prepare, and safely finish one home repair.

Mobile, Responsive web

The brief

Understand the problem

Background

Many do-it-yourself tutorials assume tools, vocabulary, and confidence that beginners do not have. A focused coach can make small repairs approachable while clearly identifying work that requires a professional.

User context

Ari wants to repair a loose cabinet hinge. They have basic tools, a limited budget, and no previous repair experience.

Product problem

Beginners need realistic preparation, paced instructions, and safety checkpoints rather than an endless feed of polished project videos.

Objective

Create a project selection and step guide for completing a small repair with confidence and appropriate stop conditions.

What to design

Define the experience

Required experience

  • Assess tools, time, budget, and confidence
  • Choose a suitable beginner project
  • Follow one step at a time with checkpoints
  • Record the result or ask for help

Screens and states

  • Readiness check
  • Project overview
  • Guided step
  • Completion review

Core user flow

Follow the critical path

  1. 01

    Ari confirms the hinge type and available screwdriver

  2. 02

    The overview lists parts, cost, time, and likely difficulty

  3. 03

    Ari follows each step and pauses at a stripped screw warning

  4. 04

    They choose a recovery tip and finish the repair

Product rules

Requirements and constraints

Requirements

  • Define unfamiliar terms beside the instruction
  • Keep materials and expected cost visible before starting
  • Mark hazards and professional-only work clearly
  • Preserve progress when the user pauses

Constraints

  • The flow should cover one small repair, not every trade
  • Safety warnings cannot be hidden behind optional content
  • Completion should not require posting a photo

Reality check

States worth considering

A required tool is unavailable
The material is damaged
The repair differs from the tutorial
The user decides to call a professional

Finish line

What to deliver

  • Four responsive screens covering preparation through completion

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Color palette
#A9A4CE
#05623B
#1F1109
#79829C
#6CBCB4
Font pairing
OswaldEB Garamond

Oswald & EB Garamond

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations