Skip to main content
UI Coach Logo
Back to challenges
Easy

Learn to Publish a First Blog Post

Design a tutorial path that guides a beginner through setting up a blog and publishing one useful article.

Responsive web

The brief

Understand the problem

Background

How-to sites often collect many loosely related articles. Beginners need a clear sequence, practical checkpoints, and a way to resume without searching for the next lesson.

User context

Dev wants to start a cooking blog. He has chosen a topic but does not understand hosting, post structure, or what must be ready before publishing.

Product problem

A long index of tutorials does not show dependencies or progress. Learners can follow outdated advice or skip a foundational step without realizing it.

Objective

Create a guided learning path from initial setup to a published first post.

What to design

Define the experience

Required experience

  • Learning path overview with prerequisites
  • Readable lesson with an applied task
  • Progress and resume state
  • Completion checklist for first publication

Screens and states

  • Course overview
  • Lesson page
  • Task checklist
  • Progress summary

Core user flow

Follow the critical path

  1. 01

    Dev reviews the path and checks the required tools

  2. 02

    He opens the lesson on structuring a useful post

  3. 03

    He completes a small drafting task and marks it done

  4. 04

    He returns later and resumes at the next lesson

  5. 05

    He uses the final checklist to publish his first post

Product rules

Requirements and constraints

Requirements

  • Show lesson order and prerequisites
  • Separate explanation from the task the learner should complete
  • Record progress without making completion feel punitive
  • Display when technical guidance was last reviewed
  • Provide a path back to prerequisite material

Constraints

  • Learners may use different publishing platforms
  • Technical instructions can become outdated

Reality check

States worth considering

A learner skips several lessons
Progress is not synchronized across devices
A linked external tool changes its interface

Finish line

What to deliver

  • Design four responsive screens for path selection, learning, applied practice, and progress.

Optional direction

Visual resources

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

Color palette
#1C1B19
#C7B89F
#649853
#735D5F
#87759D
Font pairing
Julius Sans OneCrimson Text

Julius Sans One & Crimson Text

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

Icons
Illustrations