A Thought on Re-designing Workday’s Homepage

I spent a day trying to get a feel of the existing website and locating key user flows which felt like they were causing friction — sources of frustration.

Few questions I asked myself

Who is the website’s target audience?

I believe representatives of small startups and companies looking for a change in their HR and finance systems.

What is the purpose of this website?

What I feel — primarily to provide a sneak peek into workday’s product suite and show how it stands out from other similar products in the market.

Is the design accomplishing its purpose well?

The idea behind the website is to showcase Workday’s product and “wow” users. On the homepage, a cool animation showing change from a mainframe like system to workday’s product act as the highlight.

The image shown on the landing page acts a quick look into workday’s product. However, it is not a high resolution image and that defeats its purpose. For a viewer, it is just another image with some animation as one cannot decipher how the system actually looks like. Also, it is not a vector image and doesn’t re-size with change in screen size.

Decreasing Zoom

As soon as the animation finishes, a “Learn how” button comes into the view. The first time I visited the website, I had a strong inclination towards clicking the “Learn how” button and skipping the rest of the homepage. This felt like a great opportunity to do some UX studies. I roped in 10 participants and asked them to navigate to Workday’s homepage. Results were expected — 9/10 participants clicked on the “learn how” button immediately after it popped up and never came back to the home page. Also most of the participants found it a bit hard to navigate while looking for answer to the question — Why use Workday? Let’s look at this flow:

The “learn how” on 1 — the landing page takes the viewer to 2 which shows the same tagline as the landing page and the “Start growing” button which then takes the user to 3 — a sign up page. This breaks the flow because the user clicked on the first button to get to know more about Workday and it wasn’t made available to him/her immediately. A viewer would hesitate to sign up because he/she hasn’t seen anything about Workday yet!

Next question — what do I want my audience to do, and is the design encouraging that action?

Check out videos

The YouTube video on the homepage is amazing and puts the message across. However, in the design there is a huge orange cross button on the top right, which leads to unnecessary distraction. This should be replaced with something more subtle.

Read reports
The report section is also something that comes in the view fold as the user hits the website. The reports do talk about ERP systems in general but I feel this space should focus on demonstrating Workday’s capability. The report section can be integrated someplace else, such as in the blog or a news section. If there is a news specific to Workday, definitely show it here. We need to hook the users on the website and not let them turn away.

Read customer testimonials

It is a great idea to show viewers customer’s testimonials. However, a hyperlink showing customer’s name might be misleading and redundant because the company’s name is already shown in the logo.

It also gives an impression that clicking on the link would redirect the viewer to the customer’s website but that’s not the case. The hyperlink could be replaced with a button which says “See how we did it or read more”.

Let’s start Wire framing

Navbar

The current navbar has a ton of blank space, and this decreases the overall reading space a viewer has on the homepage. The login link also needs a more button like feel.

Why this design?

  • The main idea was to eliminate blank regions so that the user gets more reading space on the homepage.
  • The search box was taking up a lot of space, so replaced it with an icon. The search functionality can be implemented using interaction as follows:
  • In the original design, the navbar options, for example “why workday” lists— Faster, Proven, Simpler etc. The corresponding links do provide good information. However, I feel this should be showcased in a different way and not in form of a list. So pruned the options a bit.
  • The focus of the website is to make people signup. I couldn’t find a signup button on the homepage other than by clicking one of the reports or going deeper in the page hierarchy. Hence, added a sign up button.
  • The size of the navbar remains constant throughout the homepage. We could also add JavaScript for re-sizing the navbar as the viewer continues to read further.

Consistency in Button styles

I saw a number of button styles throughout the website. It would be a better choice to be consistent. I personally like transparent buttons as they save network bytes :) (It’s the engineer inside me).

Complete Wireframe

Why this design?

  • The foremost reason was — I wanted show a story as soon as the viewer sees the homepage. We just have few seconds to make a compelling headline.
  • Show them what the product does and make it easy for them to see the previews. It is good to have product videos as they have been found to increase purchases by over 144%
  • Make sign up easy. As soon as you have told them enough about the product. Give them a chance to sign up.
  • In the original design, at the footer the topics are not categorized. Re-designed that for easy access and reach.
  • Other subtle changes like adding phone number at the bottom, revamping buttons.
  • The change language functionality should be on the top of the page if the Workday is targeting companies from non-English speaking countries.

Looking at Accessibility and Speed metrics for potential improvements

To find more opportunities of improvement, I wanted to see how implementation of the current design looks like.

A delay of 1 sec in site speed can result in a 7% reduction in sign ups.

Images need to be optimized

Most of the images on the website are not compressed and well-sized. This change could help getting drastic improvements in speed.

Render-blocking JS

The website uses JS from different sources. On every page load, the core content cannot be rendered unless these Javascript files are loaded. These need to be deferred or loaded asynchronously.

Minifying JS

Minifying the following javascript files would also help:

Accessibility issues (Listing a few major ones)

  • Controls and media elements should have labels. This would confuse the screen readers.
  • Elements don’t have unique IDs in the DOM.
  • Images should have alt tags.
Show your support

Clapping shows how much you appreciated Achin Kulshrestha’s story.