How to Increase Conversion Rate with UX Optimization

My UX Design Principles at CakeResume

Trantor Liu
CakeResume
11 min readSep 22, 2017

--

Let me introduce myself first. I am the founder of CakeResume, Trantor Liu. While my profession lies in web development, I’ve accumulated experiences in UI/UX design through self-teaching and collaborating with designers.

The very first homepage of CakeResume was designed by me. In fact, CakeResume was originally an idea that came up during my college years. I brought the idea back and started working on it as practice for an online elementary design course that I was taking at the time. After one year and a half, we now have the third version homepage (designed by Liya — https://dribbble.com/liyali) with the registration conversion rate increasing from 10% to 25%.

Transformation of CakeResume homepage from 2016 to 2017

The 25% conversion rate results from continuous optimization of copywriting, design, and product features as well as the word-of-mouth of our users. Along the way, I’ve accumulated some experiences in user experience design and even established my own UX design guide, which I will be sharing in this article.

Before we start on UX optimization, we have to know what our goals are. Usually, the ultimate goal of a company is to profit. Yet, it’s along way to go from users visiting your website to shopping or purchasing products on it. Take CakeResume for example, the steps could be:

Visit homepage → Create an account → Build a resume → Purchase Premium Package

That’s just the simplified version of it. The actual one could be like this:

Visit homepage → Create an account → Create an empty resume → Have no idea what to write → View other users’ resume samples for reference → Come back to edit resume → Go out for food → Come back to edit again → …… so on and so forth…… → Found out a template available only after purchased → Spend the rest of the day hesitating → Eventually decide to purchase advanced templates

What we should know is that, this procedure may not be completed in one day, but can take up to one week or even longer. There are tons of causes that stop users from purchasing the products. As Samuel Hulick’s analogy in the book “User Onboarding, driving users to purchase a product is like hiking. In order to get them from the bottom of the mountain to the top, you have to give them a strong motive first.

Provide Strong Motives

Let’s take the homepage registration conversion rate for example.

To encourage users to spend time creating an account on the homepage, we have to first tell them what we can provide. This sounds very simple, but the key is crucial — we start with the users’ perspectives, as in what they are hoping to get, instead of what we are capable of giving.

For a homepage subtitle, “The easiest and most useful resume builder” wouldn’t be more attention-catching than “Build your professional resume in 10 minutes.” Why? Because the former states how good you are, while the latter hits right on users’ needs.

Maybe you would consider an “easy and useful resume builder” a product needed by users, which is not entirely wrong. Yet, when you think deeper about it, the reason why users are looking for an easy and useful resume builder is because they want to build an professional resume without much trouble. Selling the product itself would never have as much impact than selling the core value of the product. (From a marketing standpoint, this is the difference between the benefits of selling Actual Product and Core Product¹.)

This also explains why we leave out the feature descriptions on the homepage for our third version. These texts — responsive design, independent webpage, editable source code, etc. — were originally presented on our first version homepage. Although there is fewer texts on our homepage now, we attract more users to stay.

Feature descriptions that were previously included are now taken away from our homepage.

The same principle applies to any call-to-action buttons. Instead of “Sign-Up Now,” we have “Try It Now” (again, what-we-want versus what-users-want). When encourage users to create multiple resumes, which is our premium feature, we suggest them to “customize your resumes for different job openings to increase interview opportunities.” While we hope to raise purchases, users want to get hired. These details help us touch users’ deeper desires, thus generating stronger motives for them to do what we hope they would.

So far we have decided what core values to sell on our homepage. This way, we can impress our first-time visitors more effectively and efficiently. Now, we have one impressed user as excited as a hiker starting on his journey. He/she is ready to go all the way up to the mountain top for what he wants — if not tripping over by obstacles along the way.

Getting Rid of Barriers

Now, users have their motives to proceed. Yet, as mentioned previously, it’s still a long way to go. To make sure he reaches the goal successfully, we have to ensure he encounters as few barriers as possible. One way of doing so is to prevent unnecessary trouble for users. Another way is to provide instructions as needed, naturally guiding users to proceed or avoiding doubts.

Method 1: Leave the Difficult Parts for When It’s Absolutely Necessary

Imagine this: We have a user willing to create an account, but found out he could only do so with an email address. Not with Google, not with Facebook, not with any other social media platform accounts. He enters in his email and password for registration — it’s not unacceptable. Just a bit annoying. After the registration, on the webpage it says, “Please verify your email first.” With no other option, he has to log into his email for the verification letter. That’s okay, too, but he’s now a bit upset. After the verification, he is then asked to provide his credit card information before his one-month free trial. Excuse me? Window closed, user lost.

It is understandable. After reading what’s provided on the homepage, before knowing how good the product is, the user is asked to do this and that. What’s worse — being asked for money straight up.

To prevent scenarios like this, the rule is to “leave the difficult parts for when it’s absolutely necessary.” For example, why do we have to verify users’ email addresses? Maybe you want to make sure they can retrieve forgotten passwords. Yet, in reality, 80% of registered users may not return to your website after the one-month free trial, which means that email verification is only useful for those who forget their passwords among the 20% of users left. Assuming that only one out of twenty users will forget their passwords, it means email verification is only useful for 1% of the total users. If that is the case, do we really have to bother everyone when, really, only 1% of them will benefit from this?

You might insist, “We are a job-hunting website. When companies show interests in users’ resumes, we have to make sure we can reach them via email.” Sure, now email verification sounds important, but can’t it wait until after users publish their resumes or when they search for job openings?

Same logic applies when you ask users to provide sensitive information such as credit card information. What’s best to do is to let them play with some of the features for free for a period of time. When they become attached to your services, ask them to pay for premium or advanced features.

Method 2: Provide Instructions at The Right Time. Solve Problems When They Appear and Don’t Leave Them for FAQs

Don’t use FAQs if you don’t have to. FAQs are always the last and worst option. Users are lazy. They would give up straight away if they encounter problems. Only a small portion of them will take time to turn to customer service or read through FAQs. When they have to read FAQs, they are already frustrated, misunderstood, and upset. Next time while drafting your FAQ contents, think twice about the possibilities of solving it with UI design.

For example, CakeResume often received letters asking whether the provided pageview numbers included their own traffic activities. We directly replied the first three emails, but when more came, we knew straight away this was a problem needing to be solved. Therefore, we added a small explanation on the statistics page, “The pageview numbers below do not include those from your own account.” Since then, nobody ever asked about this.

Explanations on the statistics page.

Additionally, when users are filling out their credit card information on the pricing page, we will tell them that we don’t save their credit card information and state that our transactions are protected by a safe encoded system. Since these are not necessary information, users can only view them when they move their mouse cursor over the exclamation mark. Although there might not be many people who care about this, we do our best to eliminate anything that might withdraw users from making a decision.

Explanation on credit card information page.

Besides cutting out doubts, similar instructions or notifications work well as call-to-actions. For instance, when users create a new resume, the “Edit” button will flicker with red lights (Picture 1 below), prompting them to click on “Edit.” After entering the resume builder, we show the second instruction, asking them to drag their first template (Picture 2 below).

Picture 1: Notification after creating a resume.
Picture 2: Notification after entering the resume builder.

As Steve Krug’s famous book title “Don’t Make Me Think” says (yes, that’s the only thing I remember after reading this book, but it’s enough lol), small notifications like these drive users to complete what you hope they would without having to think twice. Maybe these are all simply “good-to-have” designs, but all together they make users feel taken care of, which win over their trusts towards your product.

Design Small Tasks and Provide Immediate Feedbacks

Publishing a resume is one of our ultimate goals for users, but it’s not a simple job. Users have spend minutes or even hours of editing before they publish the resumes. While we have generated enough motives for them to go through this process, if we can also appreciate them for completing small tasks along the way, we will increase the final number of the goal completion.

It’s just like playing video games. Facing the ultimate boss at beginner’s level gives you tremendous frustration, so before we fight the final boss, we finish the first few challenges. After each challenge, players gain more confidence and will to take on the next.

Same idea goes with user experience. We need to break down one huge task into several small ones. When users finish each small task, they build up confidence and engagement.

Back to the example of publishing resumes. In the past, CakeResume automatically created a blank resume once users created their accounts. Now, we let them click on the “Create” button to create their first resume. This small action may be extra, but it increases their sense of success.

After creating the “Create Your Resume” button, users see the editing notification we talked about in the previous section. After clicking on that, they see instructions about dragging templates. Altogether, these form a series of steps and actions. The new ones appearing serve as feedbacks of completion. This also makes users think that they are interacting with the website and the website is helping them to achieve a goal.

Guide users step-by-step and interact with them.

Tracking Performances

Now, we know how to generate users’ motives, eliminate barriers, and provide adequate guidance for users to reach the final conversion goal. However, these are still theories and guesses. We have to prove these principles with numbers to show that our optimization is effective.

The best way to do so is A/B testing. To be honest, conducting A/B testing is not an easy job. If you are only testing the colors of buttons or titles, it’s not so challenging. Yet, when it comes to having two different code logics working on the same website at the same time and tracking their relative performances (for example, having users manually create the first resume, or allowing the system to automatically do so), it gets more complicated.

As for CakeResume, I usually rely on my instincts instead of A/B testing for efficiency issue. Although I can’t compare performances before and after the optimization through A/B testing, we can still reach a conclusion based on datas changes, such as occurrence rate of an activity or conversion rate.

Currently, I use Google Analytics and Mixpanel for tracking. Take our very first example, we can turn the user procedure “Visit homepage → Create an account → Build a resume → Purchase Premium Package” into a funnel to track conversion rates at every single step. This would also allow us to optimize one particular step specifically for its conversion rate.

Funnel. Source: https://mixpanel.com/blog/2009/06/10/introduction-to-analytics-funnel-analysis/

Conclusion

There are many factors that affect conversion rate. Even a change of the color of a button can make significant differences. Yet, keep in mind that “premature optimization is the root of all evil².” Small adjusts to UI is better for mature products. Before that, what’s most important is to allow users to know and experience the core value of your products as fast as possible. The principles provided above all deliver one simple concept: put yourself into your users’ shoe. That’s how you get the conversion going naturally.

Open the website or app of your company. Check out what you sell on your homepage — the product itself, or its core values? Then look around. What are the unnecessary troubles that you can avoid posing? What small instructions should be added to guide users to the next step?

At last, you are more than welcomed to visit CakeResume. If you have any suggestions or questions, feel free to comment below! Hope this article helps :)

The original article was written in Chinese. Thanks Carol and Avani for helping me translate it!!

Reference

User Onboard by Samuel Hulickhttps://www.useronboard.com/training

[1] Wikipedia — https://en.wikipedia.org/wiki/Core_product

[2] “Premature optimization is the root of all evil.” The word of famous computer scientist, Donald Knuth, and also my motto — http://wiki.c2.com/?PrematureOptimization

--

--