Extreme Makeover: SaaS Edition

by Matt Giovanisci | Last Updated: March 21, 2020
By entering your email address you agree to get email updates from Matt Giovanisci of Money Lab. I'll respect your privacy and unsubscribe at any time.

If you don’t know about my software project Lasso, you can read the original challenge and the MRR challenge. But you don’t have to. I’ll cut to the chase.

For the past year, I’ve been working on a SaaS product with Andrew Fiebert. He’s the lead developer and I’m the marketer.

It’s a $49/month WordPress plugin that manages affiliate links and lets you add them to posts as display boxes like this:

PageSpeed For Bloggers: Get Your Site to Load in 1 Second or Less [COURSE] Price: $199 You can gain a competitive advantage on Google just by increasing your site speed. I’ll show you how to crush your competitors by getting your WordPress site to load in less than a second. Buy Now PageSpeed For Bloggers: Get Your Site to Load in 1 Second or Less [COURSE] We earn a commission if you click this link and make a purchase at no additional cost to you.

It does a lot of other things that I’ll get into but that’s the gist.

The Problem(s)

The goal was to launch Lasso on June 1st, 2019 and reach $15,000 in monthly recurring revenue (MRR) by November 30th, 2019.

If you move the comma one number to the left, then WE HIT OUR GOAL!

Lasso All Time Baremetrics

Ok, we didn’t hit our goal. That’s fine. But why?

Our Marketing Plan Sucked

This was my fault. I wanted to:

  1. Build The Greatest Product Sales Page of All Time
  2. Create Six Ridiculously Epic Guides to The Most Important Online Business Topics
  3. Go on a Podcast Roadshow

All of those things failed miserably. What does “Build The Greatest Product Sales Page of All Time” even mean?

Great question; it means nothing.

I thought a unique sales page would get shared like crazy. And the page I built was completely interactive but no one knew it. This is foreshadowing.

And the guides? We gave up because it was too much work. We had a software company to run, not a media company.

Then, the roadshow was more of a shitshow. We hired a company to book us on podcasts. It technically worked. They put us in touch with podcasters looking for guests. But it was a lot more of a hassle than we thought.

The back and forth with a lot of these podcasters was painful. Most of them didn’t have their shit together. And some of the shows were just bad.

That said, there were a few podcasts that got us some traction like appearing on The Fizzle Show and Niche Pursuits. But those were ones I booked myself because I knew the hosts.

Our Scope Sucked

Before I go trashing everything we did, it was a good learning experience. We gained clarity. But what we originally built was a bit messy.

This was the first time our product had real users. And as expected, they had some problems. We spent a lot of time fixing bugs. But once we got it under control, things worked. But it wasn’t perfect.

By now, Andrew and I were just building features him and I wanted. But we had a “come-to-Jebus” moment after talking to customers.

Our customers like the display boxes I pointed out at the beginning of this post.

praise jebus

When I built my first crappy “plugin” back in 2015, people would reach out to me asking how I created the affiliate link display boxes. At the time I had to tell them it was custom.

Then a few years later, I turn it into a plugin called Earnist. You can read about it here.

This is what people wanted. So I built it with Earnist. And during that same time, Andrew was building his own plugin that was more advanced.

His plugin lets you convert any external link into an affiliate link with a single click. While Earnist lets you create display boxes for your affiliate links.

Now, Lasso is a combination of both plugins. It has a lot of great features and reports. But “feature creep” started to set in and things started to look and feel clusterfucky.

Our Design Sucked

And now my favorite part and the reason I’m writing this post. I’m not a UI/UX designer. But I figured I know how to make something look good.

I kept the original logo with just a little bit of cleanup.

I also kept the original interface inspired by Ahrefs. Which honestly doesn’t have the greatest UX/UI. The main element being the “row within a row” format.

Ahrefs Row

So we did the same thing. You could click any affiliate URL and it would show you where links were on your site.

While this makes sense, it actually doesn’t give you the best experience. Unless you’re into tables and rows and sub rows. Yikes!

Plus, the data was a bit confusing. A lot of education was required to use Lasso. It wasn’t intuitive and it limited us to the data points we wanted to add in the future.

Learning Interface Design

After my first design attempt, I took some time to actually learn interface design. It started with a Tweetstorm from Amy Hoy back in December 2019.

As a side note: I’m following the real-time SaaS growth project she’s running. It’s really good: https://nokotime.com/growth/

Understanding Users and Customers

She also recommended a book called About Face. I learned:

  • Users and customers are different. A customer could be an employer, but the user may be an employee.
  • Business goals and user goals are different. Both need to be addressed. A business goal might be to process invoices faster for an employer, but perhaps the employee’s personal goal is to appear competent and staying engaged.
  • Good design makes users more effective.
  • People don’t need to know all the details of how your software works.

I added that book as an Amazon affiliate link with a Lasso display box below:

About Face: The Essentials of Interaction Design Price: $32.06 This book revolutionized the way I design software. If you wanna learn UI/UX design, I highly recommend. Buy Now from Amazon About Face: The Essentials of Interaction Design We earn a commission if you click this link and make a purchase at no additional cost to you. Last Updated: March 30, 2020

Colors, Typography, and Layout

I also took a lot of inspiration and learning from Google’s Material Design. I learned:

  • How to pick colors wisely. Less is more. One primary color (purple), one secondary/button color (green), and the standard error color (red). And use more variants of those colors like dark purple and light green.
  • Simple typography. Consistent sizing and spacing.
  • Predictable and consistent layout. Instead of trying to be innovative and clever, keep it simple.

Language Lessons

And finally, I researched interface language. Between Amy’s tweets and this post, I came up with a few rules for the Lasso language:

  • NO ALL CAPS or exclamation marks. It feels like shouting!!!
  • No doom and gloom statements without offering a way to deal with it.
  • For every message, ask: does the user need to know this?
  • Short sentences (30 words or less). Use direct language that’s easy to understand.
  • Present tense for product behavior. “Message sent.”
  • Focus on what the user can do with your software rather than what your software is doing for the user.
  • Don’t brag. Your software is not super fucking amazing all the time.
  • Don’t use culturally specific language. Don’t use phrases like “hit it out of the park.” That’s a baseball thing. Not everyone understands baseball.
  • Make dialog box action buttons clear. It’s more efficient to have buttons labeled with the specific action. This reduces the chance of user errors because they may not read the text in the dialog box. Typical.

My Second Design Attempt

Armed with a basic knowledge of interface design, I asked Andrew if I could redesign Lasso from the ground up.

I was hesitant because this could set us back. At the same time, it could make the software better. And if things were designed with the future in mind, progress might be faster.

On my annual trip to the east coast for Christmas, I drove to Hoboken to hang out with Andrew. We spent the majority of the time talking about Lasso.

We drew like shit on a whiteboard.

Lasso Whiteboard 2 Phases

To break down this rat’s nest, we split up the redesign into two phases:

  1. Refresh from scratch. This includes restructuring all the files to be more compartmentalized. Plus designing a new logo, new pages, and hooking them all up. Since a lot of the code is already done, hooking up the new redesign shouldn’t take long.
  2. Displays. Once we relaunch with the new design, we’re going to focus heavily on creating different types of affiliate link displays including single boxes, grids, tables, and lists. This will also include customization features and themes.

Lasso Link Whiteboard

What’s on the whiteboard isn’t worth explaining. Also, ignore the keyword penis.

Redesigning The Lasso Logo

The original logo was fine. But I wanted to attempt something a bit more modern and cool. I worked on the logo before our meeting in Hoboken.

I wanted the font to look like rope. So I found a thick cursive font called Shelby via Adobe Fonts. But it’s wasn’t quite right. So I had to manipulate the text in Adobe Illustrator.

New Lasso Cursive Font

I removed the serif off the end of the “O” and connected it to the rest of the letters.

Then, I added the original cactus but removed the pot. I shared the new logo design on Twitter.

Lasso Logo Version 2

I got some feedback.

Lasso Logo Feedback on Twitter

I didn’t know what to do with the cactus. Should I make it green? Do I keep the pot? Do I get rid of it altogether? So, I left it alone.

Then, inspiration struck in Andrew’s office. He had a custom neon light made for Lasso.

Lasso Neon Sign

There it is! The solution to my logo problem. I also took the new logo and added a glow effect to give it a neon look.

Lasso Logo Glow On and Off

Now that I have the new logo, I created an inspiration Pinterest board that I’ll use to design the rest of the interface and the sales page.

I’m calling the new Lasso design “Neon Cowboy.”

Lasso Pinterest Board

Redesigning The Interface

I started the interface redesign in Adobe XD, but it didn’t feel right. Why not just design and code at the same time? That way, Andrew and I could review the design and actually click buttons to see how it functions.

Plus, this would allow me to compartmentalize all the design pieces into templates. Before I go too deep, let’s talk about the big changes.

The New Header

First, I coded the header with the new logo. This went through two phases. But here’s the original header for comparison.

Lasso Original Header

My first pass at the new header included the search bar in the middle and the Add New button on the far right.

Lasso New Header V1

The problem was the search bar doesn’t need to appear on every page. So the header would change on certain pages. This wouldn’t work if we wanted more consistency.

Plus, the search bar was confusing. Did you know the icon on the right of the search bar was for filtering your link view? Doubt it.

So, I removed the search bar and replaced it with a navigation bar for the entire plugin. The underline in the navigation lets you know where you are.

Lasso Header New V2

When Andrew and I saw this new header, we both said it felt more like a SaaS app than a plugin. That’s what we want.

Oh, and when you hover over the logo, it glows like a neon sign.

The New “Dashboard”

Our original “Dashboard” design included 3sections:

1. Monetized: A list of all the affiliate URLs controlled by Lasso. Each row had a link count dropdown so you can see where each link was on your site.

Original Lasso Monetized

2. Content: A list of every link on your site grouped by content. This included Lasso, External, and Internal links. The Link Ratio bar shows you how well your content is monetized. At least that was the idea.

Suggestions just tells you how many external links could be monetized. In other words, every external link is a suggestion unless you choose to ignore it.

And our action toggle has 3 states: ignored, suggested, monetized. If you’re confused by this, then we were right to change this.

Original Lasso Content Report

3. External: A list of every link on your site grouped by the domain. From here, you can take any of these external links and turn them into monetized links with a flip of the tri-state toggle.

This is mainly to show you possible domains that could have affiliate programs. Useful if you know that, but confusing if you don’t.

Original Lasso External Report

After talking with our customers, we found out that most people spent their time on the Monetized page since this is where all the Lasso links live. So we made this the dashboard with no reports.

New Lasso Dashboard

There are a few changes I want to point out:

  1. Fewer Colors: We keep the purple header for consistency but limit how much we use the green color. We want the green color for action items only.
  2. The Page Title: We added the name of whatever page your on in an H1 tag. This is consistent on every page of the new design.
  3. The Search Bar: Simple and only appears on pages that needed. It also includes the total URL count.
  4. The URL: We added the “Pretty” URL under the title to save space.
  5. We changed Categories to Groups because we think it works better when you start using this to display a grid of affiliate links.
  6. No More Suggestions: We added a Notifications column to replace Suggestions. And we changed “Suggestions” to “Opportunities.” The green lightbulb icon lets you know that you have some opportunities to turn regular links into Lasso links (more on this later). This column also shows you if a link is broken or a product is out of stock (for Amazon products only).
  7. No More Row Dropdown: There’s still a total link count but there is no dropdown. The entire row has a hover effect and is clickable which takes you to a details screen. I feel like this is more intuitive that our original Ahref-inspired row dropdown.

The New URL Details

Originally, we tried to cram a lot of functionality one page by having dropdowns, toggles, and editable text boxes. You need to take a course just to learn how to use all these features.

When you clicked the Title on the Monetized page to edit the URL, it took you to an edit page with two navigation tabs for Details and Display. Notice the header is gone, which shows a lack of consistency across pages.

Original Lasso Edit Page

On this page, you could edit the image, “Pretty” URL, name, target URL (the actual affiliate link), price, description, category, and a few linking options.

There was a separate subpage where you could make all the changes to how the URL was displayed on your site.

Original Lasso Edit Display

While this works, we wanted to find a way to fit all the URL editing into one page.

In the new design, there’s only one thing to click on the Dashboard: the entire row. And when you do, it takes you to an edit page with sub-navigation that would show you where it was being linked to on your site.

New Lasso URL Details Page

Both the URL details and display options are on this page. I also wanna point out the keywords box. In the new version of Lasso, you’ll be able to add unique keywords to any URL. Lasso will search your content for those keywords so you can automatically create new affiliate links without going into each post or page.

The following two pages in the sub-navigation show you where your links appear on your site as either in-text links or displays.

New Lasso Links Page

Notice the Header stays the same throughout the pages letting you know what URL you’re working on at all times. Consistency!

New Lasso Displays Page

What you don’t see is what happens when you click the icons in the Type Column and the Monetize Toggle.

Clicking on the icon brings up a modal that shows you what that link looks like on your site. For in-text links, it’ll show you the surrounding text and the anchor text. For displays, it’ll show you what the display looks like.

The opportunities page shows you all the external links and keywords that are not yet monetized.

New Lasso Opportunities Page

Notice the monetize toggle is off and the Type icons are blue. When you flip the toggle, it’ll turn that link on your site into a monetized Lasso link. This will allow you to quickly monetize your site and make sure all your links are working properly making you money.

More to come. Subscribe to get updates 👇

Subscribe To Get Email Updates From Me

No content upgrade? No downloadable e-book? What the fuck!?

Just enter your address and enjoy an email update once in a while.

By entering your email address you agree to get email updates from Matt Giovanisci of Money Lab. I'll respect your privacy and unsubscribe at any time.