Skip to main content
UI Coach Logo
Back to challenges
Easy

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 web

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.

Color palette
#1B1A1A
#E9C5B7
#716561
#8B8C8A
#8C848C
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