Skip to main content
UI Coach Logo
Beginner

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

The brief

Understand the problem

Background

Poetry and short fiction rely on spacing, line breaks, and reading rhythm. A generic rich-text editor can damage the work's intended form, especially on narrow screens.

User context

Iris wants to publish a poem with deliberate indentation and invite feedback from a small writing group before making it public.

Product problem

The writer needs confidence that formatting will survive across devices and that draft readers cannot share or comment beyond the chosen boundaries.

Objective

Create a draft, preview, limited-share, and public publication flow for an original literary work.

What to design

Define the experience

Required experience

  • Writing editor with preserved line and paragraph structure
  • Multi-device reading preview
  • Private review invitation and feedback settings
  • Public work page with comfortable typography

Screens and states

  • Writing editor
  • Reading preview
  • Review settings
  • Published work

Core user flow

Follow the critical path

  1. 01

    Iris pastes her poem and checks its line structure

  2. 02

    She previews it at phone and desktop widths

  3. 03

    She invites three readers with comment-only access

  4. 04

    She reviews feedback and publishes a revised version

  5. 05

    She updates whether public readers may comment

Product rules

Requirements and constraints

Requirements

  • Preserve intentional whitespace and line breaks
  • Show how narrow screens affect long lines
  • Let writers choose who can read, comment, or share a draft
  • Separate private feedback from public comments
  • Retain revision history after publication

Constraints

  • Some formatting cannot fit every viewport unchanged
  • Invited readers may not have an account

Reality check

States worth considering

A line exceeds the narrowest supported width
An invitation link is forwarded
Two reviewers comment on different revisions
The writer unpublishes the work after sharing its URL

Finish line

What to deliver

  • Design four responsive screens centered on formatting fidelity, private review, and the final reading experience.

Optional direction

Visual resources

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

Font pairing
Abril FatfaceLato

Abril Fatface & Lato

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

Icons
Illustrations

Keep practicing

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
Intermediate
Creator tools

Turn Photography Interest Into a Paid Booking

Design a service setup and inquiry flow that helps an emerging photographer present a specialty, price work, and qualify a client request.

Responsive web2 to 4 hours
Visual DesignContent Design
Beginner
Creator tools

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
Content DesignResponsive Design
Intermediate
Creator tools

Artist Portfolio and Print Shop

Design a creator-owned portfolio where an illustrator can share work and sell limited prints with clear rights.

Responsive web2 to 4 hours
Visual 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