usability-aesthetics-cover

What Makes a Product Great — Usability or Aesthetics?

Reading time: 6 minutes

Written by

A few years ago, I thought design meant how good something looks. Whether it’s the streaming app that I use to binge watch my favorite TV shows, or the E-commerce website where I get the best deals, how good the interface looks seemed to drive my choices. But today I can tell you—I’ve never been more wrong. As I interacted with more and more products for my day-to-day tasks, I realized that aesthetics isn’t the only factor contributing to the end user experience. Usability is an equally important aspect when designing a great product.

There are two factors that define a great product.

#1 Usability — How simple is the product to use?

#2 Aesthetics — How appealing is the product to look at and interact with?

Specifically in that order. Let me explain this to you with an example of Blogger, the OG of blogging apps vs Medium.

Way back when I was in school, having a Blogger account was all the rage. It was the go-to app to express our thoughts to the friendly neighborhood of the internet. At one point Blogger had millions of users but today it’s not a popular app anymore. So, what went wrong?

While it did and still does help users to compile and publish articles, it lags in visual design and usability. If you observe the image shown below, you will notice that there are way too many options available in the taskbar that makes it confusing for the user.

blogger user interface

Ideally, users would not use more than a few important settings to get the job done when it comes to writing articles. But providing so many options only leads to cognitive overload for the user. It’s as good as a TV remote with 30 buttons but only 4 of them are used extensively.

Blogger users simply didn’t appreciate the clutter and lack of intuitiveness anymore, and switched to a better app the moment they found one—enter Medium.

Almost a decade after Blogger’s reign, Evan Williams (one of the core people who developed the Blogger platform) introduced Medium to the world.

medium user interface

While it is not only easy to use, Evan also made sure the published articles look great — larger font for legibility, use of serif type to mimic a book reading experience, and plenty of white space to make sure there’s no cognitive overload for the readers. These are all the things Blogger never had or tried to improve on.

You’d Think ‘Visual Design Beats Usability’

No!

Like I mentioned earlier, these two are not rivals. They are the order of things in which we need to design products i.e., rather than being just a decoration, a product’s visual design must be built upon good usability. This is a crucial factor that decides the success of any product. The same rule applies when updating the UI of an existing product.

Designing the UI of your product is not a one-time effort. It needs to happen as frequently as the design trends evolve. It is necessary for businesses to be mindful of this and stay ahead of the curve. In fact, every app that you have ever used has changed the way it looks more frequently than you’d think. Freshdesk was no exception.

“Your UI is so 2010”

When we launched Freshdesk in 2011, our customers just loved the way it worked for them—it is easy to use, has an extensive set of features, and is priced reasonably. All was well, until one of our customer remarked that our “UI is so 2010”.

With time, design trends changed. For example, gradient colors were a sight for sore eyes and skeuomorphism was banished. This consequently changed our customers’ expectation of how Freshdesk should look and behave. That’s where our conversation about revamping Freshdesk’s UI to its present version, the Mint Experience, began.

In Mint, we were sure that we did not want aesthetics to hamper usability. So, we retained the simplicity of Freshdesk and simply changed how the product looked.

In the following section, I will walk you through two of the biggest interface changes we made to help you understand why we changed Freshdesk to what it is today.

The Sticky Menu in Dashboard

Also called the fixed position menu, the sticky menu is a common UI pattern where the header section remains fixed as you scroll up and down the page. In fact, this pattern has become a standard UI pattern and it is used on pages where you want the users to take a specific action or make navigation options easily available.

For instance, take a look at Dropbox’s home page. The purpose of this page is to get people to either sign up for or sign in to Dropbox. In order to keep the focus on these two actions, Dropbox uses the sticky menu to keep the position of the sign up and sign in buttons fixed.

In the older Freshdesk version, the dashboard’s sticky menu had options such as Tickets, Social Solutions, etc. The primary purpose of the dashboard was to help the agents and admins get a holistic view of ticket status, monitor metrics and measure performance. However, having the sticky menu with these options was being more of a distraction to the user than driving them to take a specific action.

old dashboard freshdesk

In the Mint experience, we moved this menu to the left as a vertical bar. This enabled the user to be more focused on spotting ticket trends, monitoring critical support metrics, and keeping a tab on the support team’s performance.

We also saw that the dashboard content was the same for all agents in the old UI. We wanted to tailor it to match the agent roles. So, we built team dashboards that enabled users to track metrics that are more relevant to them/their roles.

customer dashboard freshdesk

F Pattern in Tickets Page

The primary purpose of the tickets page is to view the tickets that come into the support inbox. And the secondary action is to filter tickets based on what type of tickets agents wanted to view. In the old version, the filters panel was on the left and the tickets were on the right.

In the Mint version, we wanted to make use of F pattern principle, where the tendency of web users is to consume content from left to right line by line in the page. This meant that the list of tickets had to be positioned on the left side of the layout while the filters section had to be moved to the right. So we implemented the F pattern for the list of tickets. This cycle is only broken when the user has the necessity to use the filters.

f-pattern design freshdesk

Now you might ask, what about the users in Japan and the Middle-Eastern countries where the user behavior is to read from right to left. For this audience, the entire screen reorders itself from right to left once they change their account language to Japanese or Arabic. The left-aligned navigation bar becomes right-aligned, the tickets panel is moved to the right portion of the screen and finally, the filters panel goes to the leftmost portion of the screen.

arabic mint freshdesk

Another addition is the ability to switch between table view and card view, whichever view the user is comfortable with.

tickets page card view freshdesk

Conclusion

Freshdesk will always be the helpdesk software that is easy on the eye and easy to use. Click To Tweet

Usability is the constant aspect and aesthetics is the changing aspect of a product. There’s no conflict between these two. They should co-exist for a product to truly shine!

Team Dashboard and Ticket View are two of the many modules in Freshdesk that we redesigned. We’re constantly working with our customers, understanding their needs, and implementing changes to the product. Newer versions of Freshdesk will be made to keep up with the changing design trends and meet user expectations. However, we will not break away from the usability of the product.

If you are an existing Freshdesk customer and haven’t experienced Mint yet, give it a try and let us know what you think in the comments below.

Subscribe for blog updates