Forem: Tracy Osborn

Hello Web Design’s Product Hunt launch recap

Tracy Osborn — Thu, 30 May 2019 18:09:54 +0000

On January 19th (after fretting for at least two weeks), I finally launched Hello Web Design on Product Hunt (You know, my book/video course teaching design for non-designers.

Video/vlog version of this post! Trying to get better at speaking on camera so I'm doing a video version of all my posts.

The post did way better than I hoped, becoming the #5 product of the day.

Here’s my recap of the process and what I learned from this go-around.

Hello Web Design on Product Hunt

Pre-launch

It’s been quite awhile since I launched on Product Hunt and the community has evolved quite a bit.

Thankfully Product Hunt has their own guide on launching on Product Hunt, which was super helpful (I recommend checking it out first) but even so, I was still confused by a couple major things.

On when to post

One of the questions I had was what time of the day (and what day) to post? Since your accumulate points throughout the day, you need to post early enough to start building momentum and traction.

The Product Hunt guide is very clear I shouldn't worry about this, but I still did (such like me). Other guides on the internet advocated for posting at ridiculously early times like 3am ET. I knew it didn’t matter too much about when I posted, but I also wanted to post it as early as possible just in case.

In the end, I set up my listing the night before and posted right when I woke up, at 7am ET/4am PT. It was a little worrisome since there were quite a few other posts with a bunch of points by the time I woke up but in the end I still did well.

Setting up the post and missing fields

It’s been so long since I did a PH listing so I was unfamiliar with the process.

I took a look at a few other successful Product Hunt pages (like Marketing for Developers) and worked on my content in Google Docs for a few days perfecting what I wanted the sub-title, description, and introduction post to look like.

A major point of confusion was that you can’t set the description when you’re going through the four application screens to submit your product. Turns out, after the application is submitted, the description field and a bunch others pop in (like social media, which I originally put in as links in the application). Not the best UX but I figured it out in the end.

The four pages to go through before submitting your product don't include a description field (seen on other listings), which confused me.

As soon as the post was up, I sent a newsletter to my ~5,000 newsletter subscribers.

I believe this is the reason why the post did so well — I'm lucky to have a small audience built up already over the years. In the post, I asked them to check out the listing and ask any questions they might have for me. I didn't ask for upvotes, but I'm sure anyone who knows Product Hunt read between the lines.

I also posted to Twitter several times during the day. I'm not the biggest fan of Twitter nowadays and the tweets didn't get that much traction, but it's one of those things that I might as well do.

I'm a member of a few communities for makers (like MegaMaker Club) and I shared the campaign in those Slack's as well

That was pretty much the extent of my sharing efforts — I mostly relied on my newsletter friends.

Post-launch

Woohoo, 5th most upvoted!

In the end, my post hit #5 for the day. I actually didn’t think it would, as in the list for the day, Hello Web Design was actually at #6 — I completely missed that one of the posts above mine was a sponsored post, and apparently ineligible for that ranking.

Traffic

Pretty good traffic bump.

Before I wrote this post, I was disappointed in the amount of traffic, but after looking at my old post on launching on Product Hunt, I realized it was just about normal. Phew.

Revenue

Direct sales (using Gumroad)

Made about $2,000 the first day, and kept up a bit of momentum afterwards.

The biggest surprise here is that I didn't sell as many video packages as I've done in the past for Product Hunt — the majority of the sales were for the paperback book. Not sure why. Maybe people have video/course fatigue? For Hello Web App, the majority of my sales was for the video product, and that listing didn't have photos (wasn't a feature then), whereas for the Hello Web Design listing, I had a ton of photos (gotta show off that gorgeous book, yo.) Who knows, but I found this interesting.

Indirect sales (Amazon paperbacks and Kindle sales)

The back-end of Seller Central, where I sell the paperback books.

The back-end of Kindle Direct Publishing, where the Kindle sales are.

Even though I didn't link to them directly from my Product Hunt page, my other sales channels thhrough Amazon got a small boost.

Unfortunately since then, Amazon has "temporarily removed" my paperback listing as "a customer reported details don't match the product" and that they're "investigating." Sigh. This is why I hate dealing with Amazon.

Conclusion and lessons learned

I'm glad I was able to get a little chunk of money through the PH launch because it's tax season and I'm going to owe a few thousand dollars (yeehah, #entrepreneurshiplife.) This launch was pretty crucial so I could buffer my bank account a bit and I'm glad it did as well as it did.

Some takeaways from this experience:

It's really great to have people who seem to be true fans and will support what I do without asking. I got a number of positive reviews on the post that were completely unexpected (and wonderful) and I am so grateful to have this community around me.
As usual, when these things are going on, it's impossible for me to do any other work. I refresh the page like every five minutes and can't stay concentrated on any other task.
Posting at 7am ET and on a Thursday seemed fine. I got lucky that there weren't any other huge launches that day to compete with mine.
Why did no one ask questions in the comment section? Still baffled by how quiet it was.

And a quick run-down of my suggestions for anyone else preparing for their PH launch:

Look at other successful Product Hunt pages in your space and use them to inspire your content and how you'll set up your own listing.
Work on your content and get it perfect. Especially your sub-headline.
Make sure your icon/photos/imagery looks great.
Post it as early in the day as you can but don't lose sleep over it.
Write a great introduction about yourself and your product as a comment.
Answer every comment you can to keep the comments section looking active (also, to be polite and all that).
Don't ask for upvotes , but share with your fans.

Any other questions? Ask me anything in the comments below!

Design for Non-Designers (Part 3)

Tracy Osborn — Tue, 14 May 2019 18:49:12 +0000

Part 1 of this design series dealt with the visual design, and Part 2 delved into user experience, content, and testing.

Here, we’re going to jump into a bit about theory and reassurances that will help you become a better designer.

Steal like an artist.

Imagine June—she’s a developer who needs to build a new personal homepage to showcase her open source design work. June sits down at her desk and wipes it clear, then pulls out some paper and pens and starts sketching her ideas.:e

Sounds great in theory, right?

It’s far more likely that June will sit and twiddle her fingers, sketch some ideas, get frustrated, try sketching again, then ball her paper up and throw it away.

I know this because I go through this process every time myself if I try to design without researching and finding inspiration first.

Simply put, sitting down to try to sketch ideas from scratch without using any sort of inspiration is a lot like trying to program without having Google or Stack Overflow at your fingertips.

Designing without inspiration is like programming without Google or Stack Overflow.

Think of inspiration like visual debugging. Looking at great design and inspiration will help you figure out solutions to problems you may run into when creating your own designs.

Where to find inspiration? For web design, there are tons of websites that simply collect and share good designs.

CSSMania, Unmatched Style, Awwwards, and Site Inspire are just a few options to find web design inspiration.

Of course, do not rip off designs. If you find something you like, you can do something similar but ripping off something verbatim is a very big no-no.

My Hello Web App books are inspired by the wonderful A Book Apart books:

The A Book Apart books have such a beautiful design, which inspired my typography and colors.

I’m particularly proud of the design I made for Hello Web App, but I sincerely don’t think they would have turned out as nice as they did without being heavily inspired by A Book Apart. Seeing those books helped me determine what I liked in terms of size and thickness, not to mention the flat wonderful colors inspired my own graphic treatment of the Hello Web App cover.

When you find something you love, something that you’d like to do yourself—whether it’s layout, colors, font choices, etc—use that as inspiration to build something similar but not exactly the same.

Train your design eye and intuition.

One of the most useful activities you can do to make yourself better at design is to look at other designs and think critically about what it’s doing well and what it’s doing poorly. Great process to practice while you’re looking for inspiration!

The more you do this (with good designs as well as bad), the more you’ll train your “design eye” and design intuition, making it easier for you to create good designs from scratch.

Let’s use the an old Slack homepage design as an example:

Slack consistently has great looking homepage designs, great for practicing picking out good design decisions.

Using the principles we went over above, what would you say they’re doing well? Some of the details I’ve picked out:

Lots of whitespace. It doesn’t feel like a lot since the background “fills in” the space, but check out the space between the headline and the top of the page — it’s actually quite an airy design.
Unique headline effect. In the live version of the site, the headline actually animates in. Even in the static version above, the“hand-drawn” underline effect is an unusual element which draws the eye.
Important words are bolded in the content. Both “NASA’s Jet Propulsion Laboratory” and “Slack” are bold, so you see them first which associates Slack with the prestigious organization.
Main button is a bright, stand-out color. The background is brown and the “Create a new team” button is a lovely contrasting light green. It’s complementary and yet eye-catching.
Main form has a dark background. This ensures the text on top is easy to read (since it’s smaller) as well as making the form more eye-catching.

What else can you see that are good design decisions?

Start browsing the web a bit more mindfully and think critically about what designs are doing and your design intuition will improve. Making this a practice will make it easier for you to make better designs naturally.

This is especially important when you’re actively working on a new design. Start out by looking for inspiration in examples of good design in your field as well as looking at your competitors. Pick out what they’re doing well and implement those ideas in your own design. Pick out what you think isn’t working well (especially in your competitor’s designs) and make sure you avoid those things in your own design.

Remember: Design will never feel easy.

I’ve been building websites since I was twelve (20 years of website development!) and I hold an Art & Design degree… and without fail, this is the thought process I have every time I start to work on a new design:

“crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap … yes!”

The first sketches, the first iterations of a design always feel terrible. I stress and worry about how bad my designs feel when I start, until the magical moment when something works and the design starts to come together. Sometimes it isn’t “yes!”, sometimes it can be “maybe?” But it’s never “yes!” right from the start.

If you’re new to design and you feel like your initial iterations are awful — it doesn’t mean you’re a bad designer. It means you’re a designer.

This is a three part series on design for non-designers. See Part 1 about design and clutter here and See Part 2 about user experience here.

You can get even more info and tips in my book! Hello Web Design will contain not only the above information but also theory and best-practices in down-to-earth and easy-to-understand terms aimed at programmers and non-designers.

Buy Hello Web Design

Prices start at $24.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

Thoughts? Questions? Let me know in the comments below!

Design for Non-Designers (Part 2)

Tracy Osborn — Wed, 08 May 2019 13:41:11 +0000

Part 1 of this article series focused on the visual (since that’s usually what folks are looking for help with when it comes to design), but it’s important to remember that usability trumps beauty.

The most gorgeous website in the world is useless if folks using that website can’t achieve what they want to do.

Don’t forget the user experience.

It’s more important that your design works well than how it looks. How to tell whether your design is working well?

To illustrate this, think of a form.

We can use design tricks like reducing clutter and better typefaces to make the form look nicer, but we also need to make sure it’s easy to read and fill out.

Technically the form on the left uses all the tactics we discussed in Part 1, but it’s a nightmare for usability. The one on the right is more usable, meaning our conversion rate should go up, which is more important than just design.

Of course, this tip really depends on what you’re designing, so here are some general thoughts to help you keep thinking about user experience.

Determine the purpose of your site.

For a personal website, perhaps you want folks to visit as many pages as possible. For a form, the number of submissions is probably the most important metric.

Make sure you’re thinking about that purpose when making your design.

Make decision decisions that make it easier for folks to fulfill that purpose you determined for what you’re designing. That’s why the most important buttons (the ones we want folks to see and click on) are bright, clickable colors.

Bright buttons or bright widgets catch the eye and tell the user “this is the thing I want you to see and use.”

Think about what you want people to do, and focus on building a design that helps, not hinders, folks from completing that purpose.

A lot has been written about improving usability and the number of visitors who achieve a goal (otherwise known as “conversion rate”). Here are some great articles:

8 Ways to Improve the Usability of Your Website on Quicksprout
5 Design Principles To Instantly Boost The Conversion Rate Of Your Website on VWO
5 Psychological Principles of High Converting Websites (+ 20 Case Studies) on Kissmetrics.

Content matters.

Your headlines, paragraphs, form labels, button text—your content matters just as much as your visual design. What you write can drastically affect whether your visitors understand what you’ve designed and whether they complete the purpose of your design.

Some basic rules of thumb:

Less is more. Cut down on text clutter.

In Part 1 of this series, we talked about design decisions we can make to reduce clutter. Guess what — clutter matters when it comes to content as well!

Big paragraphs of text are intimidating. Folks on the web primarily skim websites, so giant paragraphs of text are more likely to be completely skipped than read thoroughly.

This sentence is long and wordy:

Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.

Same sentence, rewritten for simplicity:

For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported.

(Thanks to Peachpit for the example.)

In a nutshell, shorten and simplify your writing. Avoid the temptation to use large words or wordy sentences to cover all the bases — the shorter and simpler your sentences, the more likely they’ll be read, understood, and even translated into different languages.

Rewrite your headlines to talk benefits, not details.

Improve the excitement and interest in what you’re “selling” by writing headlines that tell users why they should be excited.When you’re writing a headline, the first thing to pop in your head might be to explain what the product does. “So-and-so is a designer.” “This thing is a widget.”

Revamp that headline into talking benefits for the person reading it. “So-and-so designs usable and beautiful websites.” “This thing improves website conversions by 30%.”

Left, what the book is about. Right, what the book does for the reader. Benefits are more compelling than details!

Content changes like this can drastically improve conversions (the amount of people who hit your website that does what you want them to do), making what you design more effective.

For more reading about content, check out these resources:

How to check your design for usability problems.

The best way to find problems with the user experience and usability of your design is to run quick usability tests. This can be tough psychologically, because you’ll need to show what you’ve designed to others and get feedback, and sometimes that feedback might hurt.

Divorce your feelings from your design. It might be hard not to take negative feedback personally, but fixing the issues you might find with the usability of your site is more important. The more you reach out to others for feedback, the easier it’ll be.

My step-by-step process for finding usability errors in my designs:

1. Take a break and look at the design with fresh eyes.

Since you made your design, it’s going to be hard to see any usability issues — after all, you know where everything is and how to use everything because you’re the one who built it.

Taking a break from the design, a couple hours or, even better, overnight, means you can look at the design with fresh eyes and catch some problems you might have missed earlier.

2. Run your design by friends and family.

The least intimidating folks to ask for help will be your friends and family, but keep in mind they’ll also be resistant to giving you any sort of negative feedback. Make sure to remind them that you want more feedback than just, “Looks awesome, good job!”

3. Run your design by strangers and watch them use your site.

The most honest feedback will come from folks you don’t know, but this is also the hardest feedback to get. For small stuff like your personal website, you can probably skip this step, but if you’re working on a website for a project you want customers to use, this step can find crucial issues.

Here’s a great article on running quick and dirty usability tests.

In conclusion, make sure your design works as well as it looks.

The best looking design means nothing if your users can’t achieve what they or you want them to do.

Think about the purpose of your design , whether it’s getting someone to fill out a form, to find information, or something use.
Make sure your designs support that purpose and improve the user experience with that in mind.
Don’t forget about your content — simplify your words and write content and headlines that talk benefits, not details.
Show your designs to others and get feedback to find where user experience issues might be hiding.

This is a three part series on design for non-designers. See Part 1 about design and clutter here and Part 3 about training your design intuition here.

Buy Hello Web Design

Prices start at $24.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

Thoughts? Questions? Let me know in the comments below!

Design for Non-Designers (Part 1)

Tracy Osborn — Mon, 22 Apr 2019 13:50:22 +0000

Even if you’re not a designer, I’d bet that at some point in your career you’ll need to do something visual, whether it’s making a landing page for your project, designing a form, creating your personal website, or making slides.

So, part one — what’s the one main thing to remember when designing?

Reduce clutter.

That’s it. Focus on just this one thing. If you want your design to feel more beautiful, reduce visual clutter.

Our ugly widget that we’re going to apply design concepts to.

I made these little widget to help illustrate these clutter-busting tips. As we go through the concepts below, we’ll apply them to the widget and see how it starts to look more cohesive and visually appealing.

Let’s get started!

Reduce clutter by adding a grid to line things up.

Image via the Foundation front-end framework.

There’s an anecdote often told about the strife between designers and front-end developers: A designer gives a mockup to a developer, who implements the design in code. The designer then complains that so-and-so element is two pixels off, causing the developer to roll their eyes — two pixels? That’s so small it shouldn’t matter! Silly designers and their nitpicking!

However, small misalignments might be hard to see, but contribute to a feel of “clutter” within a design. Elements can feel randomly placed and not harmonious when they’re not aligned with each other.

Which looks more cohesive?

It’s easy to add accidental misalignments by accidentally adding extra padding and margins to headlines and content. In the example above, the screenshot on the right has even margins and padding, and all the elements are aligned to the same left grid, leading to a more cohesive and professional-looking design.

Lining up the left and right edges of everything makes the widget look a bit more cohesive.

In our example widget, the left and right margins were all over the place. Aligning those margins instantly makes the widget feel less chaotic.

In short, reduce the clutter-y feeling by lining things up.

For web work, use shortcuts by using front-end web frameworks that include a grid, such as Foundation, Bootstrap, Skeleton, and PureCSS, which’ll make it near-impossible to use random placement of HTML elements.

For non-web-design work and mockups, you can also use grids and guides within design programs like Sketch, Photoshop, and Gimp.

Reduce clutter by limiting the colors in your design.

It can be super tough to choose colors, one of the reasons why color theory is often a semester-long class at design schools.

Old GoDaddy site versus current.

One thing we can see in the old GoDaddy site above is the sheer numbers of colors used throughout the design. Red, green, orange, dark grey, light grey, yellow, and blue all are featured — and this rainbow display of colors contributes (along with other factors) to a severe feeling of clutter.

The current GoDaddy website is much cleaner, using the same shades of black, green, and orange throughout the design. The photo is also mostly gray, allowing it to fade to the background and let the green button on the form stand out.

There is a lot of theory and best practices behind choosing colors that would overwhelm this article, which is why here especially I advocate for using shortcuts.

The Adobe Color CC website has a great point-and-click interface to build complementary color palettes.

Choosing a color palette from scratch is a tricky business, which is why I like to rely on websites that showcase pre-built color palettes or help you build palettes from a base color, such as Colormind, Adobe Color CC, and Colorblendy. These sites will help you build a palette that contains a small number of colors that work well together.

Applying a color palette.

For our widget, we grabbed a palette and applied it to the widget. Note that not all colors have to be used, and the neither does the exact colors specified in the palette. The new “Download” button is not quite the same dark peach as in the palette, but the palette gave us a great starting point.

If you’d like to learn more about the process of building colors, I’d recommend this excellent article on Smashing Magazine: A Simple Web Developer’s Guide To Color.

Reduce clutter by reducing the number of fonts you use.

Thank goodness we have more fonts available to us now! Gone are the days of only having a few fonts to choose from.

Typography is another big subject that can be overwhelming. Serif, sans-serif, monospace, display, web-safe, and slab are all terms used to describe and categorize fonts and typefaces (terms which are generally used interchangeably for non-typographers).

There are a lot of guidelines when it comes to choosing a font but I like to recommend just two to start: Use only two fonts per design and avoid fancy/display fonts.

Using only two typefaces makes the widget look and feel cleaner.

Our original widget on the left uses four different fonts, and our refreshed widget on the right uses just two. The new widget uses styles like italics and all-caps which still lends a feeling of difference between different elements but overall feels more cohesive.

But choosing two fonts with all the options we have available can still be overwhelming. Sites like Typekit (free to $99/year) and Google Fonts (free) are great resources for professional, beautiful fonts, but contain hundreds of options to choose between them.

Use sites that curate free fonts like Typewolf, Beautiful Web Type, Font Pair, and Typ.io.

Reduce choice by using a font-curation site to see a more limited number of fonts and see them in action. A number of websites list the best Google Fonts available, including Typewolf, Beautiful Web Type, Font Pair, and Typ.io. No longer will you need to scroll through hundreds of fonts—simply browse these sites until a combination feels right for you and your situation.

For more about choosing typefaces, check out this excellent Smashing Magazine article: How To Choose A Typeface — A Step-By-Step Guide.

A Book Apart also has an excellent book that goes into web typography in detail: On Web Typography

Reduce the feeling of clutter by adding whitespace.

Whitespace is the ultimate clutter reducer.

We have a tendency as beginning designers to push too much information close together. Large, empty gaps feel uncomfortable and unnatural and beginners often have the urge to fill empty space (otherwise known as whitespace or negative space) with information and elements.

Before and after adding white-space to my personal website.

However, whitespace in design (the margins and padding around our elements as well as space between our text and letters) makes our words more readable, our interfaces less chaotic, and our designs feel more professional.

Adding whitespace (and normalizing the space between elements) makes the widget feel more professional.

By adding whitespace in a number of places in our widget — between the content and the edges of the green background, between the headline and the paragraph, between the individual lines of text, and within our form — our widget feels more professional and is easier to read.

There isn’t a good shortcut to use here, just a reminder: Use more whitespace than you think you need. Make sure your elements in whatever you’re designing has plenty of margins and space between them, that your text has plenty of space/line-height between the individual lines, and that your design has plenty of space between the content and the edges of the space.

For more, check out these excellent articles:

In conclusion, remember to reduce clutter for a better looking and feeling design.

Each of the clutter-reducing principles applied to this widget has vastly improved its looks.

Line things up and use a grid.
Limit the number of colors in your design and use a complementary color palette.
Reduce the number of fonts used.
Add whitespace.

In short, aim for a “clean” and orderly design.

Of course, design isn’t just how it looks — more importantly, it’s how it works. Stay tuned for part two and part three of this article series, going into user experience as well as looking into the design process and tactics on how you can train your design eye.

This is a three part series on design for non-designers. See Part 2 about user experience here and Part 3 about training your design intuition here.

Order Hello Web Design Prices start at $24.95 for the eBook.

Thanks everyone! For any questions, follow and message me on Twitter.

What do you think? Anything I missed? Let me know in the comments below!

The new Hello Web Books website has launched!

Tracy Osborn — Sat, 30 Mar 2019 17:49:37 +0000

Over the last few months, I've been slowly increasing the capabilities of this website with the ultimate goal of replacing several external services I was depending on. I'm excited to say that work has finally finished!

HelloWebBooks.com now has a full educational site back-end. You can order my book packages, which will prompt signing up for an account, and on this account you can access your downloadable files, and (new) the full book content online, split up by chapter. This will include embedded videos, if your package includes them.

The new book/course dashboard.

Previously, if you bought a video package for Hello Web Design, you would be prompted to create an account on Gumroad to access your files, which included a janky hack — a text file with the URL of a 100% coupon for Podia, where you would sign up for an account again, to access the video files hosted there. I liked the Podia experience, but Podia had no way of embedding a signup button or form on an external site, so this was my workaround. Blech.

Embedded videos with the content.

Books can be read online (and updated easily!)

Since I was in a mood to replace services, I also replaced Gumroad with a custom Stripe/Stripe Checkout experience. If you don't mind me geeking out over details, this was a huge hullabaloo I didn't (but should have) expected. I started out thinking, "Oh, I'll just embed the Stripe Checkout form and I'll be done!" But of course, there were so many other details to consider. What about coupons? What about gifting? What about applying coupons automatically if someone is logged in? Gah! This was harder to figure out, with so many edge cases, but in the end it was a fun experience.

Stripe checkout for payments.

What's next?

Tracking down bugs! I'm sure there are more.
Everyone who owns a book/course already and is still on my newsletter list will be automatically imported into the system today. If you are a previous customer and unsubscribed (which is totally fine) or bought on Kindle, please forward me your receipt and I'll be happy to give you access. (I have purchases from almost all of my sale sites saved on customer data in the newsletter, which is why I am doing it this way.)
I will be updating the book landing pages / this website in general to promote this new feature.

I'm also looking into using print-on-demand for books moving forward (at least after an initial Kickstarter run.) Once this is completed, I will be considering a price-hike across all packages to reflect the additional functionality I added with this site. So if you're considering buying, do it now before the hike increase!

All packages include access to the educational site.

Thanks friends, excited that this is officially out!

Does your inbox feel too quiet? The hidden consequences for temporarily breaking your email.

Tracy Osborn — Fri, 29 Mar 2019 14:19:03 +0000

A month ago, an error with my business's email address caused it to bounce. Even after I discovered and fixed the issue, this led to a still-unknown amount of emails to silently be suppressed while I carried on unaware.

Email suppressions should be something everyone should be aware about but I've found over the last few weeks that no service provider was aware their mail API services (e.g., Mailgun, Sendgrid, and others) would suppress bounced emails.

I'm writing this article not only to share my experiences, but hopefully raise awareness for this sort of problem with both customers and service providers so no one will have to go through this very annoying mess like I have.

Making a dumb mistake and breaking my email, causing issues I didn't anticipate.

As I am a person who runs this web app, I wanted a personal email address using the domain — tracy@hellowebbooks.com.

Of course, setting up an email address requires some logistics, and I originally went the easy-but-pricey way of setting up Google Apps and paying $5/month. I set up my personal Gmail to receive emails sent from tracy@hellowebbooks.com and promptly moved onto other things. This was probably done in mid 2018.

In February 2019, I noticed the $5 monthly charge on my credit card and decided to kill my Google Apps account to save myself some pocket change, completely forgetting that that was what powered tracy@hellowebbooks.com. I have a bunch of other emails that were set up using a legacy, free, version of Google Apps that forward to my Gmail account, and in a short-sided moment, I failed to remember that this email address was not set up that way as well, nor that it wouldn't fall back to this behavior after cancelling the paid subscription.

All emails from any service that was using that email would now bounce, and of course, I had no idea this was happening.

Later, a kind soul emailed me to let me know my email address was bouncing, leading to a frantic few hours discovering that I broke my email when I disabled Google Apps, leading me to set up a temporary mail server, and then setting up Google Domains for future forwarding. Voila, tracy@hellowebbooks.com worked again! I moved forward with my life confident that I fixed the issue.

My inbox felt quieter, but some emails worked.

Weeks again later, I started to notice something weird. I received fewer emails than before, and I would wonder if the email was still working. But when sending myself an email from an outside source, the email would arrive successfully so I would put it out of my mind again.

It wasn't until I few days ago I realized that I wasn't receiving any emails from Gumroad, which was particularly worrying, as I needed to ship physical products after receiving a product payment notification.

(Yes, notifications are enabled. No, they’re not in spam. Yes, other emails from Gumroad are working.) pic.twitter.com/40TRaSaE7R

— Tracy Osborn (@tracymakes ) March 8, 2019

Gumroad responded that they were having issues with Gmail, so I blamed the whole thing on some disappearing Gmail email bug with Gumroad, and not my fault or responsibility, and put it out of my mind yet again.

Just to add: it's super weird because they don't effect all emails nor do they go into spam. They just don't show up (and then sometimes they do a while later).

— Sahil Lavingia (@shl) March 8, 2019

Then I noticed that mailing-list exports weren't arriving in my email from ConvertKit, nor password reset requests. And yet again I sent myself test emails, which arrived promptly, and I reassured myself that my email address was indeed working.

Fixing my own mail service led me to realize that mail API services were silently suppressing my email.

It wasn't until I was working on the new version of this web app when I finally discovered what was actually happening. I launched the new version, and in testing, ran into a 500 error. This should have emailed me a report, which never arrived (of course), so I hustled over to Mailgun to see if my web server actually sent the email.

It was there I discovered how mail API services will silently suppress bouncing emails, and I hadn't been receiving emails from my own mail service for about a month.

Suppressed emails over the last month.

Seeing tracy@hellowebbooks.com suppressed by my own mail service caused a big a ha moment: All web services I used with that email were silently suppressing my emails. It explained why I received some emails, but not others; why emailing from another email address worked fine while emails and notifications from services I used were silently failing.

And web services themselves weren't often aware of this issue, like Gumroad above, who blamed it on Gmail.

I now have the task of pinging every single service I signed up for with this email address to see if my emails are being suppressed.

Screenshot of my email featuring a convo with eFulfillment Service, who was suppressing my emails.

Web services and support forget that this is a feature offered by their mail API services.

For example, on Mailgun's features page:

The 2 Types of Email Bounces: (...) Hard bounce: messages may permanently fail because the email address doesn’t actually exist or is no longer valid. For this bounce type, bounce management software can automatically suppress these emails from your email lists. This will help you keep a clean email list and a positive email reputation.

On Mandrill's side:

After a bounce occurs for a recipient email address, Mandrill stops attempting delivery of the email. Further email to that address will be rejected temporarily.

Rejections shouldn't be removed in bulk, but if you know that a bounce was temporary or you've resolved an issue with the receiving server, you can remove individual rejections for a small hit to your account's reputation.

Increasing awareness that this is something someone should check out if they suspect email issues.

The original problem was solely my fault, for making a quick, silly decision to cancel a service I was using and not thinking through the consequences.

However, figuring out and fixing the issue has been made so much more difficult due to the services I used forgetting to check their email suppression lists when I emailed in asking for support.

I had also asked several very computer- and web-savvy friends for help figuring out my email issues and they also failed to remember that email suppression lists could have been the cause of my email issues

Fixes if this happens to you.

Of course, don't make changes to your email provider that could potentially cause bounces. Prevention is the best medicine.
Password resets are a great way to quickly trigger an email to test whether your email address is being suppressed.
If you're using an email provider like Gmail, you can add +WORD to your email address (for example, tracy+test@hellowebbooks.com will still go to tracy@hellowebbooks.com). You can switch out the email used on a website and trigger a password reset to see if an email will then arrive. If they do, that likely means your original email is suppressed by their system.
Ask support to remove your email address from their email suppression lists, and be prepared to walk them through the process as quite a few I conversed with weren't aware this could be an issue.

This has been a fun issue to diagnose and fix over the last few weeks and I've learned a lot in that time. Here's hoping it helps you as well!