UI vs UX. Ketchup, Chicken, and Egg
mins to read
Most non-designers use UI/UX as a joint term without thinking of separating it. As a design agency providing UI/UX services, we are sometimes asked why this term is united and why there is a slash between UI and UX. Read this article to find out the answer to one of these questions.
Meaning of UI and UX
UI stands for the user interface. The interface serves as an intermediary between the programming language and humans, all those elements that allow people to get the use of complicated software without being an IT professional.
The user interface consists of many elements like buttons, menus, icons. Actually, more than just that: also animations, sounds, shades, links colors, scrolling patterns, and so on. The voice-based interface (Siri, Alexa) is another type of interface.
UX means user experience. Experience consists of well-structured workflows, the understandable architecture of the website, clear commands, fast and efficient interactions. The job of UX design is to make the product easy and enjoyable to use.
The interface is an important part of user experience, and experience is built through interaction with the interface. Because of such a tight interconnection between UI and UX, the term UI/UX design became extremely common. They function together in harmony like yin-yang and there is no competition between the two.
Ketchup, Chicken, and Egg
To better understand what differs UI from UX, let's take a look at....ketchup. Yes, you've read that correctly. There is a famous picture with two different ketchup bottles: a classic glass one and a squeezable plastic one with a cap at the bottom. Glass bottle looks neat and stylish, yet getting ketchup out of it is no easy task. On the other hand, squeezable packaging makes you think that it was made for providing the smoothest ketchup experience possible.
The message is clear, yet there have been lots of critics about this simplified way of explaining what is the difference between UI and UX design. The problem is the perceived antagonism of the two. UI and UX are not synonyms, but neither are the opposites. It is more like chicken and egg, two elements of the process.
But what came first: the chicken or the egg? Let's find out.
UI. The Chicken
What did the user interface look like before UX/UI designers were a thing? First computers had just a screen where you had to type commands for the machine to do any operation.
The command-line interface looks like an “anti UI” to modern users. Basically, humans had to talk to computers in computer language, the language that very few people knew. Terms like user-friendly, accessible, human-centered design were not applicable. It was computer-centered rather than human-centered.
It was not until the 80s when personal computers appeared on the market and the interface started moving from computer-centered orientation closer to the users, marking the beginning of the graphical user interface era.
The mere existence of functional software was a bit of a miracle back then and each new program was one of a kind, so the demand for a specific design was rather low. No one expected interaction with the machines to be easy. Over time, interfaces have become more and more advanced and UI capabilities have increased as well.
Nowadays, smart devices are everywhere, the solutions are numerous and there are always alternatives (whatever startup founders say). To attract users, software should be user-friendly. Sounds as obvious as Dale Carnegie’s advice. However, accomplishing that is not as easy. To get an orientation, check out these examples of great UI design.
UX. The egg
So, when did UX appear? Well, its history is as long as that of an egg. User experience existed since the first services appeared in human history, and arguably even before that: when an ancient man started using the first tools made of stone.
UX books may bring up an example of experience design from the 19th century when business owners were searching for ways of attracting customers. The users of first computers also had experiences, for sure, but the focus was set on functionality. For the reasons explained above, the user experience started playing an important role in software development a while after the appearance of the first PCs, as the evolution of the user interface took off.
Nowadays, user experience is the priority of product design in the majority of software companies. UX defines the elements of the user interface and its general structure, strategy, and philosophy. And UI is what makes the experience delightful.
UI vs UX design. The difference
Now that the unity of UI/UX design is crystal clear, let’s talk about the differences between the UI and UX design.
What do UI designers do?
UI designers focus mostly on visual elements, and partly on the other means of an interface, such as sound and animation. Their job is to ensure consistency of the design, its coherence with the brand identity, and make the website or app look clear, attractive, and accessible to users.
To create a good user interface, knowledge of graphic design principles is essential. Composition, typography, layout, colors are as important in web design as they are in printed materials. That is why UI designers often come to this profession from graphic design.
The skills needed for UI design are not limited to work with graphic design instruments such as Figma and Photoshop. In small products, designers also perform the role of front-end developers. Basic knowledge of the front-end also makes the process of handing out the elements of web design to the developers and overall design-developers communication go smoothly.
Here are some of the common questions that UI designers face:
- What is the best layout to make this text readable?
- How do I make the design adjustable for both desktop and mobile?
- What pictures to choose and where to place them to catch the attention of the users?
What do UX designers do?
To make the design easy to use, the focus is on the target audience, people that already use the product (or are likely to use it in the future). The skills of UX designers include psychology, analytics, in some cases, sociology, anthropology, and, one of the most important, empathy. No Ph.D. is required, but basic knowledge is a must.
To get the right information from the users, UX designers conduct in-depth interviews, field research, mouse tracking, eye-tracking, and a variety of other UX research tools and methods. Another important skill is choosing the right ones out of this bunch of tools.
UX research process may look rather simple from the outside, but it has lots of hidden nuances. Even when we talk about interviews, the basis of every user research process, to get useful and unbiased information out of the focus group, the UX designer has to prepare a script and follow a certain methodology. Here is a list of UX research interview questions for you to get a glimpse of the preparation process.
And though the research takes a large chunk of UX designers’ work, they also work on actual design and testing. If you want to find more about that, read our articles with a detailed explanation of what UX designers and researchers really do.
These are some of the questions that UX designers ask themselves when working on the product:
- Is it easy for users to find a pair of red sneakers, size 9 on the website?
- How can we change the structure of the menu to make it easy to understand and intuitive?
- What problems do users encounter when using the app? (and how can they be fixed?)
These are just some of the differences between UI and UX designers, and then come product designers… This position requires a wider set of skills, from psychology to business development, marketing, branding, project management, and so on. Product designers often lead teams of UI/UX designers, but can also work alone on small startups. For further details, read our article product designers vs UI/UX designers.
How do you know if your product needs a UI, UX, or UI/UX designer?
Here at Eleken UX design agency, we don’t have a strong separation between UI and UX designers, our team members have diverse backgrounds and expertise in both UI and UX. It makes sense since we work a lot on small projects that require one to three designers.
In big software companies that have over a hundred professionals working on UI/UX design, you may see all sorts of specializations: UI designer, UX designer, UX strategist, Interaction designer, Information architect, Information designer, Service designer, Accessibility specialist, User researcher, and many more.
Narrow specialization is not necessarily better than having a UI/UX designer with a wide range of skills and responsibilities. The choice between the two options is strongly tied to the size of the product and team. Both have their pros and cons.
There is no rule that you need to have a division between UI and UX professionals when your design team starts to grow. When in-team communication works well, the responsibilities are distributed between the designers according to their interests, skills and the needs of the project.
A UX designer working in a large team would be capable of building UI, and vice versa. Having a narrower range of tasks helps save time and provides a deeper focus on what they are doing. We recommend you base your hiring decisions on skills and experience rather than on the title of the profession.
To sum up
If this article was still lacking UI vs UX comparison images, here is one more:
If you don’t get the point, that’s fine. There is no sense, the picture is one of a Twitter thread full of increasingly nonsensical images with “UI” and ”UX”. These images turned into a meme since there have been so many attempts of simple visualization and so many critics and discussions.
So where does that leave us? Let’s recap.
There are quite a few differences between the UI and UX, but what is the most important is their yin-yang harmony. User interface and user experience design are part of the whole and one is not complete without the other.
UI and UX work together on making software clear and understandable for every user. Want to know how? Read our article about the UI/UX design process.
CAC SaaS Metric: How to Calculate and Lower Your Customer Acquisition Cost
There’s no fun in tracking customer acquisition costs. Dealing with growth or customer acquisition tempo, or other dynamic metrics is much more thrilling — they float your business into the sunset of success. Nothing wrong with dynamic metrics, but let’s consider one tiny detail before you hit the gas.
Your speed and your growth don’t matter if the reward you gain from a paying customer is less than the amount burned to win that customer.
When you validate a SaaS idea, customers at any cost are okay — their existence itself proves that the idea resonates and you’re not wasting your time. When you start building your idea into a business, customers at any cost stop being okay. You need to balance the ratio of revenue and cost per customer to make a business model worth growing and scaling.
Eleken design agency specializes in designing SaaS products from scratch, but one of the most frequent requests we get is to redesign an app or a website, like it happened in cases of Gridle or Handprinter. Brilliant teams doing brilliant things but can’t reach CAC payback no matter how hard they are trying, so they ask for help.
UI/UX design can improve the situation with overblown customer acquisition costs. What else can improve the situation is understanding the fundamental driving forces of CAC and working on lowering this metric with every step you go.
That’s a bit abstract. So, let’s do some unpacking.
What is customer acquisition cost
The amount we burn on marketing and sales to win customers is called CAC (customer acquisition cost). This metric is a concern for any industry, but for SaaS, it’s crucial because the subscription model implies that reward is split into small pieces and extended in time.
You spent a ton of money to acquire new customers. FirstPageSage calculated the average customer acquisition cost by industry, and it’s impressive.
You need up to $341 to acquire one paying customer for B2B SaaS. Pretty dramatic.
All that money you spend long before you see a full return on your investment. Not to mention that a full return may never occur in case if a newcomer decides to churn after the first month.
Customer acquisition cost vs lifetime value
Let’s calm the intensity of emotions. Customer acquisition cost alone says nothing about your business, it’s a relative concept. Spending $341 for winning a customer can be too bad if that customer brings you only $300. Or, the same $341 can be a great investment if you earn $1,000 — that’s enough for a payback along with a sustainable profit.
For measuring the amount we earn from a customer, we have another metric called LTV, or customer lifetime value. In tandem with CAC, it makes a litmus test for a SaaS business model and has proved to be one of the key financial KPIs for SaaS companies.
David Skok SAAS metrics golden ratio
Venture capitalist David Skok in his blog defined that for SaaS companies, lifetime value must be at least 3x greater than customer acquisition cost. His rule of thumb became an industry standard, and now any guide on SaaS unit economics you can find will tell you that a golden ratio for SaaS is 3:1.
The chart below shows a perfect picture of your CAC payback model. All starts from spending your customer acquisition money that puts you deep into a red zone of loss. As your customer starts paying for a subscription, you slowly move towards a CAC payback point where you get your money back. That’s where you reach a 1:1 ratio. After, you build up your profit until your customer decides to churn (which is hopefully never).
If everything goes as in the picture, your business model is sustainable. You spend on acquisition less than you earn, and have enough resources to drive the startup’s growth. But things don’t always play out quite as you had intended.
When cost per customer acquisition gets out of control
A textbook case of broken LTV/CAC ratio presents Pets.com, a dotcom enterprise whose downfall was as magnificent as its rise.
Back in 1996, Pers.com was the first marketplace to push pet brands online. Realizing that their business model is operationally cheaper compared to their offline competitors, the company bloated its marketing budgets out of all proportion. Suffice to say, they spent $1.2 million on a SuperBowl ad.
Pets.com burned more cash than they were bringing in with every new customer acquired, and scaling the startup further was making it even worse. Pet.com shut down after they lost $300 Million of investor money. Not exactly what you’re hoping for when starting a business.
No need to go far for similar stories from the world of SaaS. Take Slack, which entered Silicon Valley's hall of fame as the fastest growing business app, and ended up staggering under $91 million of losses and selling itself.
Looks like Slack and Pets.com didn't do some math right.
Doing some math: how to calculate customer acquisition cost
The cost of acquiring a customer is the sum of all marketing and sales expenses over a given period divided by the number of new customers added during that same period.
The customer acquisition cost formula looks like the simplest formula ever. Divide your $500 budget for search ads on your 10 new users, and that's it — $50 for an acquisition. However, there’s still plenty of room for misunderstanding. Like, what is included in customer acquisition costs? And do your freemium users belong to acquired customers?
Patrick Campbell indicates four most common mistakes in how is customer acquisition cost calculated:
- Counting paid advertising as your only acquisition expense;
- Forgetting to include indirect costs, such as subscription for tools, services and software;
- Missing the salaries of all acquisition-related personnel;
- Considering non-paying freemium users as acquired customers — you should count only paying customers.
Any of those mistakes may dramatically affect your LTV/CAC ratio, as shown in the chart below.
Now when we know how to calculate CAC, let’s learn how to define LTV so that we can compare the two metrics.
LTV means the average amount that you expect to earn per customer over their entire lifetime. To calculate it, you need to multiply the sum you’re charging per user in a given month by the average customer lifetime.
Let’s say one user brings $20 per month, and you know that they stay with you for, let’s say, 5 months on average. Using the formula below we can figure out that the lifetime value of one user is $100.
Now when we can measure customer lifetime value ($100) and customer acquisition ($50), we can compare them and figure out that our LTV is 2x greater than customer acquisition cost. Good, but can be better. Can we influence CAC to improve the ratio?
How to lower customer acquisition costs
Nice thing about lowering your acquisition expenses is that it lowers your payback target as well and gets you on the path to profits faster.
Here we’ve got some tips to help you reduce consumer acquisition cost:
- Make user experience frictionless
Only a fraction of your landing page visitors will get curious about your product, and you can easily ruin that small fraction with a landing that creates more confusion than clarity.
Attracted by the freemium offer, users may download your app. But unable to see the app’s value from the first minutes, they’ll abandon it without thinking twice.
Even being one step away from becoming paying customers people will leave if your pricing grid is not clear enough.
Customer friction pops up on every step of your SaaS customers’ journeys. It makes these journeys long and straggly (read expensive) and forces prospective customers to leave halfway to a purchase.
So it makes sense to identify moments of friction everywhere they happen and eliminate them to reduce wastage of customer acquisition budget.
- Optimize your marketing tactics
Calculate your CAC and your LTV within each marketing and advertising channel, so that you can understand their efficiency.
Chances are you rely too much on non-recurring acquisition channels like pay-per-click advertising. Inorganic traffic costs much more money and brings immediate results that reduce to zero as soon as you stop pouring money into Google Ads.
Organic traffic is less expensive in most cases, and its positive effect lasts longer. With content marketing, for instance, it takes time to gain traction in search, but as a reward, you’ll get a compounding effect where traffic from previously published articles adds to traffic from newer articles.
- Focus on audience segments that resonate better
With your early customer acquisition marketing, you may attract a broad variety of users. Many of those people won't be well-qualified; they won’t have a real need for your product and your offer might not be a great fit for them.
If you measure CAC and LTV for all SaaS buyer personas you have, you might figure out that some of the customers are willing to pay a lot, but cost just as much to acquire. On the flipside, you have a group of customers who’re cheap, but willing to pay nothing.
To lower your expenses, focus your acquisition efforts on personas with the best LTV/CAC ratio. Check out how Superhuman pawed their way to success focusing only on the biggest project supporters and abandoning all the other segments of their audience.
Other ways to improve your LTV/CAC ratio
Customers are costly, and you want to know how costly they are to make your acquisition process shorter and more efficient. If your team can lower CAC, you’ll bring yourself closer to your payback target and make your business more profitable. But what if lowering cost per customer acquisition is not the only way to shorten your CAC payback period?
SaaS pricing strategy optimization can skyrocket your LTV/CAC ratio just as good. But that is a whole other story (that we have already written).
Defining Your Product Value Proposition. Tips and Examples
The value proposition is the basis of your marketing and business development strategy. Launching a marketing campaign before defining your value proposition is like polishing the coating of a car that has no engine installed. It just won’t make much effect.
So, What Is Value Proposition?
The value proposition is a statement that communicates to the customer why they have to choose your product. Perfect value proposition attracts customers in just a few seconds. It states clearly what are the benefits of a product that make it unique and worthy.
Sounds easy, but you would be surprised to find out how much time it takes to formulate the right value proposition in some cases. As a design agency, we know how important it is for an effective product design to build the basics, such as a value proposition. Some teams need a series of workshops just to define the value proposition of the product they have already been working on for a long time. Good news – every product has a value proposition. Let’s see how you can find it.
How to Write a Value Proposition for Your Product
The value proposition is often compared to a promise to the customer. To make the right promise, first of all, you need to know whom your product is addressing. Another obvious thing, you need to know all the benefits of the product that customers value, especially the ones that they refer to as unique. Starting from this point, you can ask your team and yourself the following questions:
- How does the product satisfy the customer’s needs?
- What are the customers' goals that the product helps to reach?
- What makes the product different from the competitors?
- How does the product make the customer feel?
If the answers are unclear, you may need to conduct marketing research or a series of interviews with your potential customers. Do not rely solely on the product manager or business developer in defining the value proposition. It is about customers and their relationship with the product.
Value Proposition Canvas
One of the best tools used to define the value proposition of a product is the Value Proposition Canvas, introduced by Dr. Alexander Osterwalder.
Here is an easy step-to-step guide to using this tool:
- Fill in each segment of the canvas above. Analyze your customer, its pains, desired benefits, and customer jobs — what they need to perform to fulfill their needs. On the other side, investigate on products and services side: what are the products that solve customer's problems, creates gains, and how it does that. Each segment may contain a list of points.
- Evaluate the importance of each point for the customer. Top evaluated products that match the top evaluated customer needs are the ones that form the value proposition.
- Test the draft value proposition with customers. If needed, make adjustments based on the test results.
- Analyze the competitive advantage of the company in key elements of the value proposition. Conduct competitors' research to define the steps necessary to ensure that your value proposition is unique.
To learn more about defining the value proposition, check out this book.
Do’s and Don’ts of Product Value Proposition
This is how a good value prop should look like:
- Clear. Go for the words that are easier to understand. When your customer sees the value proposition, it takes them mere seconds to decide if they are interested or no. You don’t want them to waste that time decrypting all those smart words. Even if your target audience consists of academics, stick to the language that an undergrad would understand.
- Unique. An ideal value proposition has something that differs from the competitors. Uniqueness sells, everybody knows it. So take it seriously and run a thorough research on competitors. If you think that your product has no competitors, you have to think twice. It is ok for a product owner to be so passionate about their product that they can not even imagine why someone would not use it. Yet competitor analysis is crucial for defining value proposition, as well as many other stages of product development.
- Short. Fewer words, more sense. This might be the hardest point, but a short value proposition is a sign of the integrity and uniqueness of the product. You will see it in the examples listed below.
And here is the list of things to avoid:
- Don’t try to mention ALL the benefits of your product in the value prop. Too much information is confusing. You either write a detailed exhaustive text or a text that people will actually read.
- Don’t make it too vague (like an inspirational slogan). The value proposition is not a list of abstract “values”. We know that people make most of their buying decisions based on their deep values, and you should consider them in your marketing strategy. While bearing that in mind, think of the tangible benefits of your product. You can make the heading slogan-ish, but the main text has to be as solid and real as possible.
- Don’t start with the “#1 in…” That does not convince the customers in the 21st century. Instead of telling that you are the best, focus on WHY you are the best.
- Don’t rely too much on the video. Let’s say you produced a great trailer that explains all about your product in less than 30 seconds. Your intention might be to place that video on your main page skipping all the extra text. The problem here is that most of the page visitors are not incentivized enough to click on the watch button of the video they know nothing about. So you automatically lose a huge part of your potential customers as they won't even watch it. So, don’t skip the text. It will only help to get more views of your awesome video.
Examples of the Great Product Value Proposition
Finding an example of a value proposition is easy. In most cases, it is the first thing you see on the main page of a product. Here we analyze a few of them to find out what it is that makes them work.
Like Uber, Netflix is close to becoming a generic word for online movie service. Unlike Uber, Netflix still uses down-to-earth benefit statements to engage clients.
Key elements of its value proposition are unlimited access; various gadgets supported; downloadable. And a wide variety of movies and series, of course. On the landing page, they don’t even mention it, just put all those posters in the background. If there was an Oscar for the clearest value proposition, Netflix would be the first one to get it.
Airbnb started by connecting travelers with vacation rentals directly. Now it has grown to a marketplace of experiences, both online and offline. It can be a vacation stay, guided tour to a volcano, live concert, or a cooking workshop.
So, what does Airbnb say now, when they offer so many different services? “Find everything you need to make your next trip memorable or start earning money as a host.” They manage to address both parts of their target audience: guests and hosts.
The next thing you see are short benefits statements, each related to a different service that Airbnb provides: rentals, live experiences, and online ones. Whenever a new service adds to the product, these statements change and the value proposition has to be revisited.
We deliver food and groceries in a flash. It’s our mission to bring everything you want, need, or crave right to your door, whether it’s a meal from your favorite local restaurant or same-day grocery delivery and cleaning supplies.
The key benefit of any delivery service is speed. “Deliver food and groceries in a flash” is a promise that Foodpanda makes at the very first moment. What else makes its value proposition? 24/7 delivery, customization, wide choice including all sorts of goods, not just food.
It has been a while since Uber became a generic word for taxi services. Now Uber does not have to convince its customers that pressing a button is the easiest way to get a ride. The products that Uber offers have multiplied. They now work with food delivery, freight, public transportation, and scooter rent. The variety of products has not changed the main idea of Uber’s value proposition: it is the smartest way to get around.
Just like Airbnb, they managed to keep a general value proposition for all the things they offer, while each one of those products has its value prop, like this one:
This is a great example of the very basic principles of value proposition: short, clear, comprehensive. We see who is the audience: business; what the product is: bulk SMS service; and what it does: sends notifications, alerts, reminders, confirmations, and SMS marketing campaigns. That’s it. No explanation needed.
Such a clear value proposition sets a perfect ground for good design. Learn more on how we designed TextMagic here.
What the company states as its value proposition is innovation and sustainability. It also says clearly that the products are for athletes, with a footnote “if you have a body, you are an athlete”. Professional athletes won’t make a huge market, especially if you consider that they are often being paid to use Nike products, not paying to get them. So, by saying that you are an athlete they appeal to the customers' desire: we buy snickers because we want to be an athlete, or at least be just like them.
Why do these value props work even when they do not follow all the rules? Reminding that you make sportswear is not necessary when you speak for Nike. Brands that are well-known and offer a wide variety of products tend to go on the “values” side of the value proposition instead of sticking to the basic tangible benefits. So, brand value is the main "secret ingredient" here.
Well, the value prop seems to be easy when you are working with a world-known brand. What if your product is not yet at Nike’s brand level? Here at Eleken, we make UI/UX design for emerging products as well. Let’s see the next example.
The product uses a clear and original definition, “distraction-free learning platform”. Why do customers need this platform? To create modern engaging content experiences. Note that the basic value proposition does not mention all the things that the platform provides: webinars, tests, interactive content, etc. You can learn it from the explanation video after the initial statement caught your attention.
Read more on the design solutions we found for PublishXI here.
Want to see more? Take a look at these landing pages that convert to see how the value proposition looks on the best websites.
Examples of the Not-So-Great Product Value Proposition
Insurance app. Too long
This page combines literally every mistake mentioned above. Some businesses operating in “serious” fields such as finance or insurance intentionally try to sound fancy. However, there is a fine line between fancy and incomprehensible, and phrases like “enabling platforms aimed at innovating internal procedures” are way over that line. When you see that the value proposition is over 100 words, including such as "innovating internal procedures", "ecosystem of agile digital infrastructures", it is time to stop.
The text is long, divided into big paragraphs written in small font. It would take a highly devoted reader to go through it till the end – but after that, you can be sure that person would be a lifelong customer of the product.
CRM Product. Too abstract
Chances are you have seen lots of landing pages that hide their value behind good-looking abstract phrases.
The heading says it loud “Go do something great”. Ok, starting with a bold slogan is fine, but what goes next? Few more generic verbs, “imagine, achieve, make” and finally naming the product. If you belong to the target audience, you probably understand what “enterprise collaborative work management solution” means. What you still don’t understand is why you should choose this one out of all the other enterprise collaborative work management solutions.
Online Photo Editor. Too Generic
Which one? Literally any. All of them provide similar services and most fail to explain their unique value proposition. They all can edit photos, crop them, add filters, etc. There are a bunch of them on the market and it would take you a while to find the difference between them (if you would ever try). There are lots of online photo editors available, so the only way to stand out is to do a thorough competitor analysis and come up with the right value proposition.
4 Things to Remember about Product Value Proposition
- The product value proposition is a statement that communicates to the customer why they have to choose your product. To define your value prop, you need to know who your target is, what are their needs, and how your product can help them.
- The value proposition has to be clear, simple, short, and unique. Run competitor analysis to learn how your product is different from the others.
- Don’t use positioning statements (#1 photo editor) and slogans as your value proposition. Focus on more down-to-earth things.
- Take your time to work on the proper value proposition and remember to test it once in a while, as your product, market or customers are changing. Thorough value prop research may give you insights on how to shape your product to bring more value to the customers.
Once you have a solid value proposition, you are one step closer to having product market fit. Check out our article where we explain what is product market fit and why it matters.