Skip to content
UX Writing

product content and microcopy

The headline and subheader tells us what you're offering and the form header closes the deal. Over here you can explain why your offer is so great.

user research

collaboration

plain language

agile

The original cookie notice content:

My plain language cookie notice:

cookie rex

a very important modal

 UCalgary’s cookie notice was repetitive and full of legal jargon, making it hard to understand. The notice is one of the most interacted with elements on the site and is an important legal disclosure, so it was critical to get it right.

  • I simplified the language, selecting words for brevity and clarity
  • The UX designer replaced the alarming red with a neutral grey 
  • The Front-end developer created a cute gif of the uni’s mascot Rex for a delightful moment
ucalgary news

enabling campus storytelling

News is UCalgary's publishing and sharing product for storytelling content. It was designed to create and manage four different content types, share them widely, and generate embeddable feeds for web pages. 

As the UX writer on the product team (and an end user of the product), I worked with the product designer to conduct user interviews and design the workflow logic. I labelled the fields in each stage of content production. This was an early project in my career, so I've created a prototype of how I would approach this project now (with the same system constraints), and provided a detailed description under "more about this project".

more about the project
Overview

The News system is UCalgary's storytelling content publishing and sharing product. It was designed to create and manage four different content types, share them widely, and embed news feeds into web pages. 

As the UX writer on the product team, I helped the product designer create the order of the workflow, and label each stage in content production.

The hero

News articles started with a hero, and so I chose to create the hero settings as step one. 

 This was one of my first UX writing projects on this team, and there are a number of decisions I would make differently today. 

settings for a news hero section

First, the heading case (all caps) isn't accessible, so I would have chosen sentence case instead. 

Second, the section contained a combination of mandatory and optional settings, so I wouldn't have chosen to have "(Optional)" and the asterisks indicating mandatory in the heading. I would label it "Choose a hero image and theme colour" instead.

Under "Choose a format" I would have the instructional text "select one of the hero formats" directly following the heading for improved accessibility. Same with the instructional text for the image selection section.

Finally, the theme colour determines the colour of the dividers and icons in the article, so I would include that information as instructional text below the heading.

 

The headings

The next section was for the article headline, subhead, and byline. 

settings for headline

As with the hero section, I would choose sentence case for the heading instead of all caps. The instructional text would go under the "subheading" title rather than below the text input.

Instead of using the hint text to repeat the character count, I would provide a brief description of what elements would make for a good subheading.

For example, 500 characters are allowed but the story preview in the newsfeed only shows about 85 characters. I would change the hint text to "Add an optional, brief subheading giving the reader more context to your story (100 characters or less)."

The body

Now it's time for the author to add the body copy to their article. The News system was component-based, so authors could build their articles with the content components they needed. Before this, they used to have to structure their articles, headings, and images in one WYSIWYG input. The new system was a vast improvement, but the different build logic took some time for authors to master. With this section, I also have some choices I would make differently. 

News-contentFirst, I would have the "Add at least one content block to your article" instruction a the top of the editing interface, with the buttons for the components. 

This screenshot shows the editing interface of the News Paragraph component. I would add some hint text in the input field to describe some of the functionality. For example, the quotation marks icon allows users to add a block quote to the story. They can also use the formatting options to break the story into progressive headings. 

The "order" section is where the author can determine the order each element appears by changing the weight of the component. The lower the weight, the higher the component will appear, and vice versa. I would remove the option to hide the weights, and include a tooltip describing how to use weighting to re-order components. 

The workflow

Once the content for the article is populated, the author (depending on their user role) has the option to save the article as a draft, mark it ready for review, and/or publish the article. Some users can only create and edit drafts and need a reviewer to publish them, others can publish with no review.  options to save or publish drafts

This part of the workflow was critical for editorial control over the content published. It was also confusing for authors, and many didn't know what the limitations of their user role were at first. To this end, I would add some context to this step, with guide text that states the user role, and what their available options are. 


For example, "You're an author. You can create and edit articles. You can save this draft, or keep working on it. When you're done, change it to 'ready for review,' and the Approver on your team will publish it."

learnings

in summary

I've evolved my approaches to UI copy as I developed my understanding of practices like user-centred design, accessibility, and usability testing. 

Join me over at my portfolio for more case studies