How a Few Simple Design Tweaks Doubled Our Conversion Rate in Just Two Weeks + Useful Tools

David Yap 🌐
ART + marketing
Published in
5 min readJan 25, 2017

We recently launched our intelligent personal assistant app, Audrey, for beta four weeks ago. It is an intelligent assistant that allows you to train it directly. We have had a decent amount of traffic, both direct and from referrals. We were happy that we finally get to show what we are building to the world instead of snorting powdered ramen. However, we were mass blasting our site all throughout related social media sites/group. In the first week, we were getting thousands of visitors, but the conversion rate is very disappointing.

This is how our website looks like from Audrey & this is our conversion rate from Mixpanel looks like now.

The moment our site went live, we were certain that we had enough information on the site for our users. However, we are wrong. We started getting messages from users who signed up on the site telling us that they needed more information. I was baffled.

“Pffftt maybe, he didn’t read through the whole thing,”

I thought. However, email after email requested more information, and I knew I had to do something. Previously, our product merely had a screenshot of the product, and we realized our description only vaguely described our product.

We recognized that the problem is not the product, the problem is the design of the website. Design is the first impression your visitor have towards you. If you dress poorly, you’ll be perceived poorly.

We had to go back to the drawing board and shut down the website for a few weeks for adjustments. We learned our lesson. I have broken down a few of the adjustments below. These adjustments cost nothing, and you will improve your site immediately.

  1. Short and Concise Description of Your Product. — Find a tagline that captures your target customer. It will be the first thing that they see when they enter your side. It also has to be the perfect description of your product when you introduce yourself to anyone. For us, it is “Finally, an intelligent assistant that learns,” or “Finally, a Siri that you can teach.” To be able to find the perfect tagline, you should test it with a few customers and gather feedback. Ten people is a good sample size, but if you want to be ambitious, 1,000,000 is always good. There is no perfect sample size, but if more than seven out of ten people get it, you are good to go. A useful tool is Hemingway App. This app will force you to keep your tagline as short as possible.
  2. A Little Presentation Goes a Long Way. Adult humans have the attention spent of a four-year-old. This statement is real across all market. Nir from the book Hooked once said that people prefer the least amount of action possible. Instead of having your visitor read how the product works, show them how it works instead. If your product is an app like our product, Audrey, use some recording software to record the core features of the app. If your product is a hardware product like the digital credit card Coin, have a videographer to shoot a video for you. The more visuals, the better. For Audrey, we used Shou and make some improvements in AE. For designers, there is Principles. Framer.js is another amazing tool that allows your visitors to interact with your app. Our signup form is from Typeform + 10% off.
  3. Detail is King. Pay attention to details like fonts and colors. If your website features a light background, use a dark font and vice versa. If you want your visitors to pay attention to certain sections of the site, use bright colors to draw their attention. Do you visitors a favor by guiding them. The ratio of bright color must be only 20% of the entire site to deliver 80% impact. Too much of it and your site will be featured in MOMA. Here are some tools that might help you to find the right coolors.
  4. Reward Your Visitors with Micro Interactions. If your website consists of multiple sections that feature the product, chop them down and condense the important material into a single page/ = or landing page. We use fullpage.js. Always have a clear ask or call-to-action (CTA) at the top, bottom and on the sticky header. If you do not ask, you will not get. In most cases, you probably would like your visitors to sign up. For Audrey, we implemented a little hover animation onto our CTA button and rewarded our visitors who hover their mice over it. Here is our heatmap that shows where our visitors move their mice the most. Our data shows that they fondle the button way too much. We also break up our sections into clickable buttons as shown here. If you are not a good micro interaction designer, you can fork it from Codepen.

After these simple improvements, we are currently enjoying a 40% conversion rate and 500+ signups in two weeks. We are also featured in betabound and trending on Betalist. Betalist is able to bring us the most signups we’ve seen in such a short amount of time. We’ve also received bunch of nice comments from the community.

“I think Audrey really has the potential of becoming a “personal” assistant, because I can decide how I want everything set up!”

“I believe that being able to use this through your keyboard is amazing as it will let me run many commands without having to exit the app I’m on.”’

“With so many integrations, Audrey can handle all aspect of our lives! I’ve never seen something like that before!”

And the list goes on and on, up to 500+. We use Mixpanel for website analysis and Hotjar for heatmap.

These are the things I learned. I do not claim to be an expert. If anyone of you has learned something from past mistakes, feel free to respond and let each other know! If you have any tips for me! I would be happy to read them in the comment section below. I have also include a PDF file for this post (don’t worry, I’m not taking your email in exchange for this PDF). Here is the link to download this PDF for future reference. If you have read this far, here are some more free goodies that might help you along the way to redesigning your website.

Yay free stuff!

1. Iphone Mockup
2. Color Palette
3. Inspiration
4. Fonts
5. Designes
6. Stock Photo
7. Icons
8. A HUGE CURATED LIST OF FREEBIESS FOR DESIGN, MARKETING & ETC!!
9. ANOTHER HUGE LIST OF FREE DESIGN MATERIALS

--

--