Useful Is Not Always Pretty- A UX Case Study.

Many designers and marketers have the desire to build beautiful websites, with fancy animations, artistic typography, and bold designs that wouldn’t look out of place in a modern art museum. But aesthetics mean nothing, if no one understands what you are selling in the first place.

The Penbrothers website crucially needed to be revamped, since most of our digital marketing efforts are directed to generating B2B leads from the page.

Websites are a critical component of many businesses today. We make purchase decisions based on what we see online, and for many B2B vendors, an informative and convincing website is essential in leads generation.

Which is why it’s important to make sure that your website contains all the relevant information, in a concise manner. Words matter, and this has never been more true than with SEO.

But how do you explain a business with a lot of technical jargon, and boring terms like “staff augmentation”, “payroll and time keeping”, while keeping users engaged?

The Challenges:

1. The website was not SEO-optimized(missing backlinks, incomplete meta-tag descriptions, poor keyword usage.)
2. There is no useful information to the users. The pages barely cover our staffing and managed services, which are the bread and butter of our business.
3. The stakeholder (CEO) is “text-aversive”. He doesn’t want to get descriptive about the services, since it might bore people, and wants to rely more on visuals to communicate.

A Lesson In Stakeholder Management

Perhaps convincing the primary stakeholder to ditch the fancy graphics, vague imagery, and fluffy jargon was the most difficult portion in this project.

Our team overcame this through outlining the main business problem: “We are not getting leads.”

Then, we broke down the reasons why:

1. We do not have useful content.
2. The animations are slowing the loading time, and affecting the usability of the page.
3. Our competitors are ranking for keywords that we should be competing for.
4. Our core services were not clearly defined on the page.

We also got feedback from a few of our clients, and other departments in the company. We asked them if the content in the website described Penbrothers accurately.

Getting the input of the other stakeholders helped us solidify our case, and after presenting the proposed revamp, we got approval on the spot.

Less Is More: Prune The Branches For Better User Experience

The first thing we did when we proceeded to revamp the website was to weed out the unnecessary pages, and add new ones.

Then we removed the animations, which were slowing down the page. The Javascript files were heavy, and it took nearly 20 seconds to load the site. By removing most of the animations, we brought it down to 8 seconds.

This was the architecture of the old web page:

We felt like we had to clearly define our services. Penbrothers core services are called “managed services”, which include human resource, payroll, and office space solutions. Penbrothers provides these solutions to international startups expanding to the Philippines.

We found that providing human resource, and payroll services is called staffing, which turned out the be a pretty powerful keyword. So we decided to make a staffing services page:

Penbrothers version 2.0

We also removed redundancies in the web structure, by removing the “careers” from the services tab. We also added an office solutions page, since we offer co-working and private spaces, and showed the locations of our office spaces.

But we didn’t stop there. We tried to cutdown the services page even more, since the menu still had too many unnecessary pages.

Version 3.0

We managed to cut down the services page to two, to really highlight our managed services. Almost immediately since we made the change, we’ve been getting leads from the website, and a quick look at our Analytics, told us that people were finally engaged.

Conduct Testing

One of the things that we did which made our development process successful was that we always tested the website on our users. It was through user testing that we found that despite the website looking nice, people didn’t really find it helpful. So we had users list down features that would be useful, and how they interact with the site.

We found out that users look for 3 things on the home page:

1. A description on our managed services.
2. Ways to contact our events team to book a meeting room or events space.
3. Job openings.

We redesigned the home page to incorporate all those features, and ended up with this:

Results:

The redesigned website achieved:

1. 100% increase in qualified leads from the website
2. 3X more inquiries about our events space
3. Increasing traffic to the website by 60%