Alexander Wen
It's Alexander, not Alex :)
Frame 7 (12).jpg

Content design playground

Role

Personal learning project focused on applying content design to products that I use and interact with.

TIMELINE

Ongoing starting in jun 2022

 

TL;DR - In order to make content design a constant learning point, I’ve compiled some brief case studies for products that I’ve come across in my own life. These cover topics such as microcopy, tone, style, and the business impact + objectives these can drive. Note: each item in the table of contents is a separate project/case study.

Table of contents 📚 :

 

PROBLEM

It’s unclear what 1x, 2x, etc. means in Figma exports.

When learning how to use Figma and subsequently exporting projects, I was met with an unlabeled dropdown of multiples, no tooltip to find. At first I thought it was amount of copies. Nope. I ended up searching the internet and forums for a solid 20 minutes to see what it meant. Finally, I discovered it was pixel density. How could I make this more clear to the user?

 

PRIMARY USER RESEARCH

88% of Figma users I asked didn’t know what it was.

I interviewed Figma users (designers + amateurs) and asked if they knew what this field meant in the export section. It was surprising how many people didn’t know, even people who use Figma often/professionally. I could safely assume it wasn’t just a me issue now.

 

SOLUTION

Using a hover over tooltip to denote what the field is.

I used a hover over tooltip (designed to mimic Figma’s existing design language) to label the pixel density feature. I chose a hover over tooltip instead of a static label to keep UI clutter down.

Why this drives business impact for Figma:

Figma is no longer just used by a niche audience of professionals and designers. It’s becoming a widely used tool with incredible new user growth. Figma should implement changes like this to define terminology in order to be inclusive and clear to new and seasoned users alike. Improving new user experiences = ease of use + happier users —> more signups for Figma paid subscription 💰

 

PROBLEM

There’s no option to seek further assistance when DoorDash’s algorithm denies a user of a refund/compensation.

I recently had an issue with my DoorDash order not being delivered despite the app saying it was delivered. I attempted to reach out to the driver and received no response.

In the 1 year I’ve been using DoorDash, I’ve only had 2 delivery issues which have coincidentally happened twice in the past month. I swiftly got a refund for my last order that had issues. But this time, I was met with this in app error message, with no clear option to seek support. Essentially, I was left without my order and no clear option to seek support. A dead end.

I first messaged an agent in DoorDash’s app, where I was told they couldn’t authorize a refund. Then I called DoorDash’s customer service and spoke with 2 customer service reps to find that the algorithm had flagged me for receiving too many refund credits in recent orders. The rep who finally authorized a re-delivery candidly told me that these cases have to be taken care over the phone and require further investigation.

This begs the question: how can this page better equip DoorDash customers to seek support and defend their case, irregardless of if their refund request will be accepted by an agent?

 

SOLUTION

Offering a clear way for the user to seek support + try to resolve their issue.

Why link to a call instead of DoorDash’s messaging system? Since DoorDash agents cannot authorize refunds for flagged accounts, funneling users directly to an agent who can resolve the issue saves the user time and headache.

 

BUSINESS IMPACT

I was on the brink of canceling my DashPass account because of how this was handled.

Having issues with an order is already frustrating enough as a customer. Having no clear way to remedy the situation is even more frustrating. While I understand DoorDash’s algorithm is meant to combat fraudulent order issue claims (keeping costs down), giving customers a clear avenue to defend their case and speak to an agent makes an already frustrating experience somewhat better.

By reducing compounding frustration and confusion for customers, DoorDash can keep loyal customers like me, which is business impact.

 

PROBLEM

When users aren’t signed in, “My account” makes it seems like they are. 🤔

When navigating to the front page of Atlassian’s website as someone who does not have an account or is signed in. I was met with the working “My account”, which automatically made me ask the question: “Do I have an account, how?” Usually, users are shown “My account” when they are logged in, which confused me. Could Atlassian make word or design this differently to make it more clear if someone is signed in vs. needs to sign up/log in?

 

Below is how Atlassian’s current drop down works. Both “Find my team” and “Log in” link to the same page.

 

SOLUTION

Updating language + design to make it more clear whether a user is signed in or not. 😃

For the “not logged in” state, I changed the buttons to reduce confusion for the users of the site and make it clear they aren’t logged in (or have a preexisting account), but have the option to log in or to log in their team.

I chose to leave “Try now” as the primary CTA and make “Log in” a secondary CTA (aka the more neutral color), because I made the assumption that most visitors of this site are coming to learn more about what Atlassian products can do for them, rather than to login/sign in.

I did not design the “logged in” state for this homepage because when users log into Atlassian, they are directed to a completely different looking page. I made an account with Atlassian to check this.

 

Below, see how both links would send the user to the next page in the flow: logging in.

 

ITERATIONS + REASONING

I considered different layouts to experiment while also referencing Atlassian’s guidelines on buttons.

Above are a few iterations I tried to find the correct solution, I referenced and followed Atlassian’s guide on button usage to stay consistent with their design language. Atlassian states that their buttons should convey action, be concise, and use color to differentiate importance.

 

TESTING + NEXT STEPS

Performing user research and interviewing subject matter experts to validate my design decision.

If I were working at Atlassian and had more resources, I’d love to dive deeper into supporting this change with data + insights.

Here are some things I’d like to explore/test:

  • I’d like to know how many visitors of the site use the landing page to log in to Atlassian. This data would help give context on what types of users (existing customers or prospective customers) are visiting the landing page.

    • If more existing users are visiting, I would consider making “Log in” a primary CTA button. If more are prospective users, I would make “Log in” a secondary CTA to put more focus on driving more leads + funneling customers to learning about/trying the product.

    • A note: as someone who’s used confluence before, I don’t remember a time logging in through the landing page. Rather, I often followed links within company resources to access/log into Atlassian products.

  • I would also love to talk with the sales and marketing team (subject matter experts/stakeholders) to understand why they designed the front page the way it is as well as clarify what types of actions they want to drive according to their business objectives.

 

PROBLEM

Users of Google Maps have no ability to sort gas stations by price.

Google Maps’ feature of including gas prices in search is one of my favorite product features out right now. It proactively addresses users’ needs by considering what people want when searching gas stations on Google Maps (proximity, hours, prices).

As a power user of this feature, one day when I was looking for gas (which circa July 2022 is very pertinent), I wanted to sort my results by gas price, but there was no ability to do that. Enter the problem. How could I integrate gas price sorting into Google Maps? What other tradeoffs + considerations would come with the addition of this?

 

EXISTING COMPETITORS + SOLUTIONS

GasBuddy processes 1.7 million gas price reports every day.

Every single second, 5 GasBuddy users visit the app to search for fuel + convenience. People user GasBuddy to find and sort gas stations + convenience stores for prices and location. While Google Maps has gas prices, where GasBuddy still wins/holds users is its ability to sort/filter gas prices. I believe that Google Maps has an opportunity to win by including price sorting and filtering to leapfrog GasBuddy.

 

USER INTERVIEWS

80% of GasBuddy users said they would switch over to Google Maps if they could filter/sort by price.

I polled a group of GasBuddy users and found that most GasBuddy users still use GasBuddy purely because of its ability to find the cheapest prices. Multiple interviewees know that Google Maps has price data, but those users stated that they don’t have time to scroll around and “guesstimate” what station has the lowest price. The majority of people who use GasBuddy would prefer to use Google Maps due to its expansive features and ecosystem. The gap to convert users is clear.

 

SOLUTION

Introducing sorting/filtering by price for gas stations.

 

Current interface

 

Adding price filter

 

I introduced price filtering in the form of a one click filter. I chose to have 3 primary options because of the understanding that people consider 3 things when they search for gas stations: distance, hours, and price. Having those as the primary buttons people can filter/sort their search results by gives them all the options to make their decision + navigate.

Why is the price filter one click rather than a drop down with more options? I chose to make the price filter a simple one click button because when people filter gas prices, it is safe to assume that they want to see the cheapest prices first. It’s simple and intuitive.

 

ASSUMPTIONS MADE

I assumed that Google Maps has enough confidence in + accuracy of price data to make introduce a filter.

One assumption is that Google Maps has enough data to consistently give gas price info on gas prices wherever they are (rural, urban, international). This was an important thing to consider because there’s no way that Google Maps, as a global product, can introduce a price filter without the confidence that it will be able to work in all different kinds of places.

I tested this by searching for prices in the US, Canada, and internationally. The US, Canada, and Europe had readily available gas price information, but most countries have little to no gas price info. Would this be a reason that Google Maps hasn’t integrated price filters? This is something to keep in mind if this feature gets built out. A solution to this would be only showing the price filter when price data is available/in certain locations and countries such as the USA, Europe, and Canada (to name a few).

 
 
 

BUSINESS IMPACT

Gas price filtering not only helps user experience but provides important user data for ads.

Adding gas price filters/sorting allows users to find what they want faster and with more efficiency. That creates a stickier product + makes users happier, which is one aspect of business impact.

The major way it drives business impact for Google Maps is how filtering can give more insights + data on how users act. By seeing how users interact with pricing data and sort through gas stations, it’s same to assume that Google can better understand how sensitive a user is to price, or how to recommend them gas stations and other things on Google’s products in the future. The more data to characterize how a user acts, the more accurate Google can be in feeding them targeting ads + services.

 

CONCLUDING THOUGHTS + MORE QUESTIONS

The idea in itself could be valuable, but adding it to a global product such as Google Maps could be tricky.

I do wholeheartedly believe that a filter by price could work brilliantly for users in areas that Google has readily available + accurate information on gas prices. I do wonder if implementing it only in select markets/locations around the world could be a workaround to lack of price data in other places in the world. Here are some closing questions + ideas to research/marinate on:

  • Is it possible to launch this filter or only show it to users in certain geographical areas?

    • If it had to be implemented globally, how could Google design an empty state message when a user filters by price when there is not enough price information for Google Maps to aggregate a result?

  • I would also consider doing research to understand exactly how people make decisions on where to go for gas, both in the US and other countries. This could be done with questions/research such as:

    • How do you go about finding gas in general? If you use Google Maps or other platforms, what info is important?

    • Looking at heat maps + user data in the Google Maps app to see how people make decisions when searching for, browsing, selecting, and navigating to a gas station.

 

PROBLEM

ESPN Fantasy forces users to enter unclear fields like “location” and “nickname” to create a team name.

 

SOLUTION

Simplifying both form fields into a single “team name” 🏆.

Those who play fantasy football and team names know…fantasy team names are all about humor and one liners. Embrace that.

 

SUPPORTING DATA

100% of people in my ESPN Fantasy league rather have 1 form field and do not name their teams using location and nickname.

Being that my sample size was small, I decided to do research on a broader spectrum. I looked at open leagues within fantasy across multiple platforms such as Yahoo, NFL Fantasy, and Sleeper. A middling 4% (out of 300+ teams) used the classic location + mascot structure for their fantasy names (e.g. Cleveland Browns). Meaning a whopping 96% of users opted for custom one liner names such as “Lights Cam Action” or “Patty Cakes” that don’t split into two parts. This proves through user data + trends that ESPN should opt for a simple “team name” field.

 

FEEDBACK

I send a cold email to revered ESPN Fantasy analyst, Eric Karabell, to see what he thought. He responded (omg).

 

As one does, I was browsing the internet and came across one of Elon Musk’s tweets. After scrolling, twitter froze the screen and prompted me to sign up or log in to continue browsing.

 

PROBLEM

Twitter’s can use active voice instead of passive voice to inspire action.

Twitter should consider using active voice to inspire action. Writing copy that tells a user what they can do is much more powerful than telling them what they will get when they perform an action. Tell them what they can do first and then tell them why.

Active voice = walk the dog so it can get exercise.

Passive voice = When you walk the dog, it gets exercise.

I’d also like to shorten the supporting copy here, it could be more brief.

 

SOLUTION

Implemented active voice and simplified supporting copy.

Note: I chose to add “log in or sign up” which covers both new and existing users to reflect the CTA buttons below. An argument could be made against it for the sake of brevity or redundancy, but I chose to make the messaging consistent. I think it would look weird if the copy said “log in to see tweets” and an option to Sign up was shown below.

 

Revamped the copy to reduce confusion, improve clarity + utilize action-based wording.

 

PROBLEM

Clarifying who ordered what for Toast communal table QR ordering. 🍟

Communal QR table ordering is becoming a thing (thanks COVID). This means large groups of people are ordering food/drinks to assigned tables via their phone. In certain ways, this exacerbates the problem of knowing who ordered what, especially with large groups. I was caught in this situation, paid this tab, and got none of my money back, because I had no idea how to contact friends of friends who had ordered on the tab. How can Toast allow people who pay the tab to easily navigate their receipts to understand who ordered what?

 

SOLUTION

Itemized receipts organized by name and amount.

The first person who orders for a communal table in Toast Tab is required to put down a form of payment to open a tab. For subsequent people who scan the QR code + order, they are required to enter their name. That means the data to organize information on who ordered what item is available to use.

I propose that Toast Tab utilize the data they already have to organize receipts by name, items, and price as shown here. This way, people who pick up the tab have can spend less time micro managing the situation and have peace of mind. Toast can utilize technology to make a problem old as time a bit more bearable.

I chose this solution within receipts because it was simple and wouldn’t be technically difficult to code (which is a presumption). More integrated solutions could be done, but tradeoffs like time of development and coding would need to be considered.

CALCULATING TAB SPLITS

According to Inuit’s study, 41% of Americans split the tab, and 66% of people don’t split the tab evenly.

A possibility that Toast could explore to create an even more seamless experience is taking the calculator work out of users’ hands and into theirs.

The solution could act as a button sitting on top of the email receipt prompting the user to split the tab. It could take them to a breakdown of the costs of each person/order.

I thought about the possibility of integrating a P2P payment system (venmo, cash app), but the upkeep + development costs of that solution could be costly and complicated. This lower fidelity option will do the trick.

 

BUSINESS IMPACT

Utilizing the new technology of QR ordering to reduce the strain of splitting tabs.

Ordering via QR code is already a brilliant value add for businesses. This allows restaurants and employees to serve customers more efficiently and relieves the dreaded, “I need to flag this server down” issue. According to Intuit’s study, 43% of millennials ask for separate check when dining with friends. For the other 57% of people who combine the check, 66% of those people split the tab don’t split it evenly. That’s kind of wild!

Here’s how all stakeholders (restaurants, consumers, Toast) win by solving tab splitting 💰 :

  • Restaurants: This saves employees the hassle of splitting the check + swiping multiple cards (from my personal experience working in restaurants, this can be surprisingly time consuming). More importantly, the less cards a restaurant has to run, the less fees they pay.

    • Quick math:

      • Single check: ($10 total * 0.5% fee) + $0.2 flat fee = $0.25 fees paid by restaurant

      • Check split by 3: ($10 total * 0.5% fee) + 3*$0.2 flat fee = $0.65 fees paid by restaurant

  • Consumers: People get to stress less about splitting tabs because of the creation of a more intuitive, seamless process.

  • Toast: The company wins when they save restaurants time + money. They also win when consumers enjoy QR ordering more, making it commonplace/the preferred method of ordering (think consumer adoption curve). Both of these generate positive impact.

    • I’d like to know more about how much Toast makes per transaction made by restaurants vs a percentage of total sales. That would certainly effect the business decision behind the tab splitting feature.

 

UX writing challenge day 1

 

PROBLEM

A user’s flight gets canceled due to weather. Write a notification from the airline about the cancellation and what they can do.