Shaley’s UX Writing and Content Design Portfolio
UX Upgrades for Billing, Email, and Document Upload
* The university name where these projects took place is hidden in these examples. On my resume, look for the following role: 08/2007 – 09/2016, UX Writer and Content Designer
Problem
Often, user experiences are created by engineers or subject-matter experts who are focused on getting all of the right elements onto the page, but who have little or no training to address user experience. They may want the thing that they’re creating to look nice and be useful, but they have no idea where to start.
Solution
Over the years, I have worked on projects of every type. It’s always good to be brought in at the start of a project, since UX baked in from the start can save thousands of dollars and staff hours in rework.
However, as shown in these examples, sometimes a product has to struggle or fail before a team reaches out for help. When they do, I am always thrilled to demonstrate how simple changes can make a phenomenal difference. Most of the time all we need is better word choices and organization on the page.
Once clients have benefited from the value of UX, they are more likely to bring me in at the start of future projects. This is the goal to provide the most value.
Example 1 – Making a Billing Interface Useful
This was the billing page for student Internet use. Students were billed monthly depending on how many megabytes they used. They were given a threshold that was included in tuition and anything over that number would incur a fee.
Before
In this example, an engineer had placed all of the “required elements” on the page and attempted to organize the space. Best efforts aside, students needed more information to be able to make decisions about if they should cut back their Internet usage or if it was okay to play video games for a few hours. (Most students who used more than their monthly MB threshold did so playing high-definition video games.)
In any case, students wanted to know four main things, none of which were easy to understand in the original layout.
- How much Internet can I use for free?
- What is my current usage?
- What will my Internet bill be this month?
- What is the most that I can be charged?
After
To address student needs, I rearranged the space to make it read more like a utility bill. At the top, we listed the critical things students checked their billing to find.
- Total Usage (MB)
- FREE Monthly Usage (MB) – For clarity, this replaced the previous label “Billing Threshold.”
- Billable Usage (MB)
- Billing Rate
- Total Charges
We also added the following language to set student expectations and provide some reassurance:
- An email notification will be sent when you’ve used 70% of your FREE Monthly Usage.
- There is a $100 monthly billing cap. This is the most you will ever be charged per month.
Finally, I worked with the engineering team to simplify the user flow to allow students to set a description for their devices. This way they could name things “game console” or “iPhone” to have a better idea of where their charges were coming from.
Example 2 – Simplifying and Organizing a Complex Business Email
This was an internal departmental email that was regularly sent out by the Procurement Office to document staff purchases.
Before
Employees complained that the email was difficult to use and looked unprofessional. A few notes:
- The subject line was long and complicated. Details that should have been included inside of the email were buried there.
- The numbered list started at six. This was a simple fix that, left unfixed, made the email look fraudulent.
- The questions that people needed to answer inline were long, making requirements hard to scan.
- Some of the directions were out of date and never used.
- Most employees need help understanding how to identify a safe email. New language needed to be added to offer security guidance.
Because the email was about spending money, and it asked for account numbers, it had to appear trustworthy, with a look and feel that people recognized.
After
The first thing we did, to minimize labor for the Procurement Office, was create a form that employees could use to submit their information. A button to go to the form was included in the new email.
The following were required:
- Fonts and styles needed to be as simple as possible to increase the odds of successful delivery to inboxes.
- Even though we created a form, employees needed the option to reply via email, so we had to include all of the original important information as well as the new form link.
Finally, for the email footer, I worked with the IT Security Office to develop brief explanations about how to do the following:
- Use the Verified Communications page. This is a password-protected system that I developed with the IT Security Office to list all emails sent from university departments that had been verified as legitimate and safe.
- Read URLs before clicking on them to decrease the odds of clicking on a fraudulent email. This wraps into the larger initiative that I managed for the IT Security Office to find every opportunity to educate employees about personal computer security, across multiple channels.
Example 3 – Streamlining an Upload Documents Form
This was the first page of a form where staff uploaded receipts for business purchases. I was brought in to help with the Pcard email (described in Example 1, above). After seeing my work for the email, the project manager asked me to quickly mock up changes that I would recommend to make the form more user friendly.
Before
Nothing big was particularly wrong with the original form. There were some extra words, misplaced labels, and missed opportunities to apply best practices. None of it would have necessarily stopped users from completing their tasks. Still, whenever someone asks me for feedback, I’m happy to help. I always encourage better user experience, whenever possible.
After
At first glance, so many UX improvements don’t seem like much… until you look closer. Comparing my mockup to the Before version, you’ll see the following:
- I removed the asterisk that implied cardholder details were required. This was ambiguous, but adding an asterisk to every label would have been unnecessarily distracting. Instead, I added a statement in the top right, reading “ALL fields required, except Organization Document Number” and relied on that if someone tried to submit the form without required information, an alert would appear explaining what was missing.
- I split the headings on the left into two groups, “Cardholder” and “Transaction” details.
- I removed the repetitive word “Cardholder” from 3 of the field names.
- I removed the “Drag N Drop or Browse…” language on the left of the upload box.
- I swapped out the upload box language and added a “Select Files” button with details about the maximum upload size.
- I added the “Attached Files” label next to the list of attached files and removed the “Queued file:” text from the front of each file name.
- I added a button to PREVIEW the PDF file, so that both files could be previewed.
- To make it less prominent, I changed the “REMOVE” button, which had been the same size and hierarchy as the PREVIEW button. I made it a link, instead of a button. And I changed the word from “Remove” to “Delete” to align with user experience in the majority of applications where you can delete things.
These kinds of assessments only take me a few hours of thinking and a few hours to mock up. For this kind of work, I always tell my clients to do what they can and definitely reach out to me with any questions, ideas, or other concerns. Over time, I build strong trust with my organization and clients. People know, I’m not here to make things flashy or complicated. My goal is always to help guide users to make their lives easier when using our products.
Do you need help with something like this? I'm happy to help! CONTACT SHALEY.