Skip to main content
UI Coach Logo
Beginner

Publish a Personal Story With Confidence

Design a simple blog editor that helps a new writer draft, preview, choose visibility, and publish a personal post.

Responsive web1 to 2 hours

The brief

Understand the problem

Background

First-time writers need a calm place to focus on their words while still understanding how the post will appear, who can see it, and whether changes are saved.

User context

Mila wants to publish a short travel reflection with three photos. She is comfortable writing in a document but has never managed a blog.

Product problem

Publishing controls and formatting options can distract from writing. An accidental public post or lost draft would quickly damage confidence.

Objective

Create a focused draft-to-publish flow for a personal blog post.

What to design

Define the experience

Required experience

  • Distraction-light post editor
  • Image insertion and alt text
  • Responsive preview and visibility review
  • Clear published state

Screens and states

  • Post editor
  • Image details
  • Preview
  • Publish review

Core user flow

Follow the critical path

  1. 01

    Mila starts a draft and adds a title and body

  2. 02

    She inserts photos and writes alternative text

  3. 03

    She previews the post on desktop and mobile

  4. 04

    She chooses public visibility and publishes

  5. 05

    She opens the live post and sees how to edit it

Product rules

Requirements and constraints

Requirements

  • Show save status without interrupting writing
  • Keep formatting choices small and predictable
  • Prompt for useful image alternative text
  • Make draft, scheduled, private, and public visibility distinct
  • Provide a final review before first publication

Constraints

  • The writer may lose connectivity while editing
  • Images may be much larger than needed

Reality check

States worth considering

An image upload fails
The title is missing at publish time
The browser contains a newer draft than the server

Finish line

What to deliver

  • Design four responsive screens covering writing, media details, preview, and publication.

Optional direction

Visual resources

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

Font pairing
Josefin SansPlayfair

Josefin Sans & Playfair

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

Icons
Illustrations

Keep practicing

Intermediate
Creator tools

Release a Novel as a Serial

Design a publishing workspace for scheduling chapters, sharing previews, and keeping readers oriented across a continuing story.

Responsive web2 to 4 hours
Information ArchitectureContent Design
Intermediate
Creator tools

Distraction Free Writing Session

Design a focused writing mode that protects a chosen draft, blocks selected distractions, and recovers safely after interruption.

Desktop web2 to 4 hours
Interaction DesignError Handling
Beginner
Creator tools

Build a Capsule Wardrobe Guide

Design an editorial fashion guide that helps readers combine a limited set of garments for different situations.

Responsive web1 to 2 hours
Visual DesignContent Design
Beginner
Creator tools

Present a Design Case Study

Design a portfolio case study that explains the problem, decisions, contribution, evidence, and outcome without exposing confidential work.

Responsive web1 to 2 hours
Content DesignVisual Design
Beginner
Creator tools

Publish an Original Poem or Short Story

Design a literary publishing flow that preserves formatting, supports thoughtful presentation, and gives writers control over feedback.

Responsive web1 to 2 hours
Content DesignResponsive Design
Intermediate
Creator tools

Build a Trustworthy Industry News Briefing

Design a news dashboard that helps professionals follow a specific industry, compare sources, and catch important updates.

Responsive web2 to 4 hours
Information ArchitectureContent Design