Technical and UX Writing

Writing samples and my thought process with applying strategic thinking to language and design.

More samples available on request.

1. Technical Writing (Budget Form)

This was a challenge via a quick start guide on LinkedIn Learning.

I improved instructions for a budget form by:

  • Adding clear headings to break up the information
  • Incorporating notes directly into the instructions
  • Beginning each step with a verb
  • Simplifying and repeating phrases for consistency
instructions_before
BEFORE: No clear headings and rambling phrases
AFTER: Clear headings and concise instructions

2. Contact Form

I was asked to suggest 2-5 improvements to this existing contact form.

The right image shows the “after” version. I edited text, moved the organization field, and put a notice about the asterisk for better flow and readability.

The original contact form was quite busy in the “What can we help you with?” section. The user had to toggle between two options and two different text boxes appearing under these options.

To make it less distracting and overwhelming, I changed that section to a drop down menu with 3 clear options:

  1. Report a problem
  2. Ask a question
  3. Publish API (internal use only)

This would streamline the options and corresponding description box that would appear below.

I created the form in Figma, and the dropdown component was made by @Design XStream (used under a CC license).

BEFORE

AFTER


3. Offboarding Sequence

I received a forum notification from an online course I had signed up for many years ago.

I wanted to delete my account, but couldn’t find a button to do so. Fellow students who wanted to delete their profiles were posting in the forums to request that their accounts be manually removed by the admin.

The original dropdown menu was very busy, and clicking through all of the links did not turn up a “delete account” option.

To improve the flow, I would propose adding a clear “Settings” option in the top dropdown menu beside the avatar. I would then group the settings according to:

Account / Course / Calendar / Notifications / Projects

“Account” would include the first three options in the original user account section, while “Projects” would include the portfolios and blogs sections.

The improved flow helps a user have a smoother, less frustrating offboarding experience. The confirmation screen is also a chance for the organization to get feedback on how to improve.

BEFORE (no delete account option and ungrouped links)
AFTER (flow for grouped settings and delete option)
AFTER (offboarding confirmation ending on a good note)

4. Search Results

While doing a search for academic articles on EBSCO Brightspace, I noticed that the wall of text in the abstract section made the paragraphs difficult to read.

In this revised version on mobile view, I simplified the text and layout for increased readability.

The abstract would feature a summary or the first line only. Another option would be to show the first xx words of the abstract, if users preferred to view slightly more text than just the first line.

BEFORE

AFTER

5. Microcopy (Voice)

To explore voice, I worked on the microcopy in a luxury travel vs. budget travel app.

The luxury voice connotates exclusivity, while the other is more budget-conscious.


6. Site Map Visual (Additional)

I greatly enjoy defining information architecture through site maps.

This site map shows the website structure for The High Road, a fictional micro-mentoring app to instill healthy habits.

Sitemap: The High Road app