Projects
Project 2
I met with the founder and CEO of Wellcova.com to learn how I could help improve the website's product page. I gained familiarity with the brand while working with them on a few freelance marketing projects before this one.
Goals:
Maximize the value of the screen 'real estate' above the fold (red dotted line)
Edit the content for conciseness and clarity while maintaining company voice and tone
Create a product page template and style guide in Figma
Included a more compact, visually descriptive photo, added the product's weight alongside the price to make the value scannable, grouped the quantity input field with the 'add to cart' button so that they all fit above the fold on mobile view
Decreased the page length by 30% and reduced scrolling time
Increased helpful content and context
Introduced a strategy for standardizing content hierarchy
Project 2a
This fictional software company offers B2B data security software. The company needs guidelines to improve consistency across channels.
Under ideal circumstances, I would ask other stakeholders to complete this exercise. Then, I would host a meeting to ensure alignment with all stakeholders before determining a final version.
I collaborated with a UX designer on this guide. I referenced MailChimp, Yahoo, and U of Dundee style guides for inspiration.
"Our clients trust us to keep their data safe. We understand that there are severe implications for data breaches and we are here to prevent those from happening. We save time and prevent headaches. We use language that is clear, concise, and actionable. We prioritize simplicity, and also provide enough detail when it's necessary."
Our voice is:
Reliable
We give consistent feedback and confirmation of the action.
Helpful
Our error messages always provide suggestions for resolving errors.
Expert
Beyond simply making the task possible, we also provide best practices.
Because we are entrusted with sensitive information, our tone is typically formal to demonstrate that we take our job seriously.
We use active voice, where the subject of the sentence does the action. We avoid passive voice, where the subject of a sentence has an action done to it.
Active voice:
Sarah connected the data.
Passive voice:
The data was connected by Sarah.
This is a test project based on a real SAAS company. I've removed the company's branding and replaced it with "_______".
I worked on the microcopy for a modal to help users to understand the prompts that encourage them to complete a task. Because this is a separate task from what they've already completed, users may not see the connection or understand the value of performing this task urgently. The helper text microcopy I worked on is located below the heading and above the form field.
Reduce the number of overall steps and decrease cognitive load
Focus on automation without the use of a wizard in order to maintain system flexibility
Communicate the function and necessity of a data crawler at this stage of the process
Ease the transition from the previous step
Provide users with enough detail and encourage them to complete the task
Keep their data private
Abide by data regulations
Use the software properly and efficiently
I distilled ideas from dense content drafts into one clear, concise line of microcopy. Considering what was truly necessary at this step in the flow was a pivotal moment during this project.
The product manager, technical writer, and UX designer all wrote what they thought should be included in this modal.
All of the content they shared with me was intelligent but also verbose.
My hypothesis is that most of the content I received was not necessary for this specific interaction and would likely slow the user down or cause them to abandon the task.
Before you can grant access to your data, ___ needs to discover the data in the source connection. A crawler is an automated job that finds the data in your source. The tables in your databases are displayed as datasets on the ___ Databases page. After the crawler runs, you must register the datasets in ___ so ___ can be used to dynamically control access to the data. You can register the datasets on the Registration page.
Before you can grant access to your data, ___ needs to discover the data in the source connection. A crawler is an automated job that finds the data in your source. After the crawler runs, register the datasets so ___ can be used to dynamically control access to the data.
Before you can grant access to data from your source connection it needs to be discovered by a crawler.
A crawler is an automated job that finds the data in your source connection. After the crawler runs you can register the datasets in ___.
I gleaned the main ideas from each team member's contribution and came up with a clear, concise, and useful piece of microcopy.
"This job allows ___ to discover and categorize your data."
I wanted the microcopy to be scannable. All of the previous drafts were highly technical and would likely slow down the user while they were trying to complete the task.
This is a test project based on a real SAAS company that governs data access. I've removed the company's branding and replaced it with "_______".
During the installation process, users may question whether or not the product is working properly because there can be a delay of up to 20 minutes. The engineers determined that it won't be possible to display a determinate loading bar to provide visual feedback, so the right word choice is especially crucial.
Reassure users that the length of time is routine and that they have used the product properly
Convey a voice & tone that is capable, concise, and professional
Build the user's confidence in the software
Error prevention
Keep their data private
Abide by data regulation
Work efficiently
I applied heuristics to the existing message to create four new iterations. Under ideal circumstances, I would conduct an a/b test with the existing design and my final iteration to find out if users had an improved understanding or if further changes are needed.
Initially, when the UX designer sent over this project I didn't feel like I had enough context to complete the project properly. So, I asked for more context! I learned that before the user arrives at this modal, they've just seen information about the data that they are connecting and have just clicked a button to "sync" this data.
The apologetic tone in the existing message attempts to empathize with the user. However, it doesn't properly communicate the system status and may incite resentment in the user.
'Sorry' is commonly associated with error messages, but this is a normal loading state, not an error so it's important to make that distinction clear.
There is currently a lack of clarity and an opportunity to inform the user of what is happening in the product.
I introduced the word "we" which brings a human quality and reassurance to the interaction. Using "we" builds the voice of the brand by establishing how the company refers to itself using plain language that is easy to understand.
I reduced the number of words to make it easier for users to understand the system status.
I continued to edit the first line for conciseness.
I also add a line break to make the content more scannable.
For the final iteration, I decided to use "We are processing your ____ connection." As the header. At under 50 characters, it aligns with a recognized standard.
This version is scannable and follows an "F" pattern. Research shows that this type of pattern is the most natural for users and most likely for them to read completely.
While other versions were more concise, I feel that this option offers the user the most clarity and represents the company's voice.
Research shows that people tend to remember the first thing they read within a message, followed by the last. Since one of the main goals of this modal is to reassure the user that the length of time is normal, I decided to put, "This may take some time." at the end.
Project 2a
This social app needs guidelines to increase clarity and make it easier for users to interact and complete flows.
The company hired me as an early user to create content for their app. The following is an unpaid test project.
Under ideal circumstances, I would ask other stakeholders to complete this exercise. Then, I would host a meeting to ensure alignment with all stakeholders before determining a final version.
I referenced Torrey Podmajersky's book Strategic Writing for UX. I identified three main product principles: inspiring, fun & playful, and mingle.
App users can browse and interact with food-related content created by other users or share their own. My role is to audit the content and provide recommendations for improvements based on heuristics.
Provide a niche product to food lovers
Get users to sign up for the paid version of the app
Keep users engaged so that they continue to subscribe
Reduce the potential for errors
Avoid violations of terms and inappropriate content
Have a creative outlet for food
Find food inspiration
Have fun and compete with other users to stand out
Build community
I provided recommendations to improve consistency, clarity, scannability and make navigation more intuitive
The company could employ usability testing such as task analysis, and/or five-second testing to determine which of their various layouts is most user-friendly
The following recommendations are listed in terms of my suggested priority
This onboarding screen exemplifies how the existing product uses fonts and font sizes inconsistently.
Some of the text is too small or lacks adherence to accessibility standards in color and contrast.
The text in the upper right-hand corner is essentially invisible regardless of a user's vision impairment level.
A label disappears from the button in the lower right-hand corner when it is tapped. This violates the heuristic to promote recognition over recall. It also violates the heuristic to clearly provide visibility of system status.
Minimize the complexity by reducing the number of fonts and font sizes.
Analyze the design system the ensure consistency of style across the application.
Increase color contrast and font size to meet WCAG standards.
Redesign the selected state of navigation buttons to include a label.
Increase the contrast of style between button states.
Some of the phrases used throughout the app may not make sense to users of all backgrounds and age groups. Many of these phrases are unlikely to translate well into other languages.
Some of the content in the app is too verbose and may lose users' attention, cause confusion, or slow them down. There are many opportunities to shorten the text without losing representation of voice.
Use clear, concise language to increase scannability, especially in onboarding situations
Identify the most impactful methods and moments to represent the brand's voice throughout the experience
Increase color contrast and font size to meet WCAG standards
Example of existing content to re-write (shown in the teal header):
Got a snack that raps? Get a snap and brag! Filter or not, cold or hot, as long as it's yumm in the pot! And get the world craving to get a bite of that luscious, sinful, delicious delicacy on your plate!
First, I determined the essence of the message:
Share your food discoveries with the community.
Next, I edited the existing content while keeping in mind the message's essence and incorporating the company's voice:
Show off your foodie finds with a Food Snaps Card! Get the community craving for a bite of that delicious food on your plate!
There are opportunities to make navigation and onboarding more intuitive. Right now there is an inconsistency in the icon used to navigate to the profile and the back button is difficult to spot.
Use consistent icons and/or add labels
Create, clear navigation pathways from each page
On this dashboard screen, a labeled icon is shown for profile navigation. This icon and label never show up on any other screens within the product experience, leading to inconsistency in navigation and violating the heuristic of recognition over recall.
On this advertisement screen for the premium/paid version of the product, the user's profile image is used to navigate to the profile. This button is unlabeled and may take users a while to figure out that it is clickable and where it will take them.
The center icon on top navigates to friends and messaging, and is too similar to the icon used in the dashboard screen that is labeled "profile."
In this onboarding screen there is no immediate navigation to the profile, and the back button is currently obscured by the background image.
Project 3
My city released a new design for its parking meters to add neighborhood branding. A clever idea was prioritized over usability.
The low-contrast text superimposed behind the space number violates accessibility standards, making both sets of text more difficult to read and understand.
My suggestion is to utilize some of the blank blue space at the top or bottom. Add the neighborhood branding in either of these sections, write it horizontally, and make it high contrast.