UI/UX Design Explained in Simple Words for Beginners

Task: Recharge a mobile number

Poor UX (too many steps):
Home -> Services -> Mobile -> Prepaid -> Enter number
     -> Choose operator -> Choose circle -> Choose plan
     -> Confirm -> Pay

Better UX (fewer decisions):
Home -> 'Recharge' -> Enter number
     (operator and circle detected automatically)
     -> Suggested plans -> Pay

Same result, fewer steps, less thinking for the user.

UI choices that change how a screen feels:

- Visual hierarchy: the main action (Pay) is the
  biggest, most colourful button
- Spacing: related items grouped, enough white space
- Typography: 1-2 fonts, clear size differences for
  headings, body text and labels
- Colour: one main brand colour, red only for errors
- Consistency: same button style on every screen

Problem statement template

[User] needs a way to [do something]
because [reason / pain point].

Example:
College students need a way to split shared expenses
quickly because tracking who paid what in chat
groups leads to confusion and arguments.

Good problem statements describe the user's need,
not the solution.

Low-fidelity wireframe (text sketch)

+----------------------------------+
| Split Expenses           [ + ]   |
|----------------------------------|
| Hostel Trip        You owe 350   |
| Room Groceries     You get 120   |
| Movie Night        Settled       |
|----------------------------------|
|        [ Add new expense ]       |
+----------------------------------+

No colours yet - only structure and priority.

<!-- A button that gives clear feedback -->
<button id="pay" class="btn">Pay Rs 499</button>
<p id="status" role="status"></p>

<script>
  const btn = document.getElementById("pay");
  const status = document.getElementById("status");
  btn.addEventListener("click", () => {
    btn.disabled = true;               // prevent double payment
    btn.textContent = "Processing...";  // show progress
    setTimeout(() => {                  // simulate a server reply
      btn.textContent = "Paid";
      status.textContent = "Payment successful. Receipt sent to your email.";
    }, 1500);
  });
</script>

<!-- Labels, hints and clear errors help everyone -->
<label for="phone">Mobile number</label>
<input id="phone" type="tel" inputmode="numeric"
       aria-describedby="phone-hint" maxlength="10">
<p id="phone-hint">10 digits, without +91</p>

<style>
  label { font-weight: 600; }
  input { font-size: 16px; padding: 12px; min-height: 44px; }
  #phone-hint { color: #4a4a4a; } /* readable contrast, not light grey */
</style>

Week 1  Notice design: review 5 apps you use, note
        what feels easy or confusing and why
Week 2  Learn Figma basics: frames, shapes, text, auto layout
Week 3  Principles: hierarchy, spacing, typography, colour
Week 4  Mini project research: interview 3-5 people
Week 5  Sketch, wireframe and design 3-4 key screens
Week 6  Prototype, test with 5 people, improve, write
        a short case study

App review template

App: _______________   Task tried: _______________

Steps it took: ___
Where I hesitated: ______________________
What worked well: _______________________
Principle involved (hierarchy, feedback, etc.): ______
One improvement I would make: ____________

Do one review every day for a week.

Simple usability test script

Intro: "We are testing the design, not you. Please
think aloud as you go."

Task 1: "Add an expense of Rs 300 for groceries."
Task 2: "Find out how much you owe in total."
Task 3: "Mark the movie night as settled."

Note: where they pause, mis-tap or say 'hmm'.
After: "What was easiest? What was confusing?"