Dashboard human-focused redesign of Bluehost

Bluehost has been good to me for the past 10 years. I use them for junloayza.com and many of my other sites because they have absolutely terrific customer support.

However, to be brutally honest, their product is incredibly difficult to use because they lack a human-focused design approach. In particular, their login dashboard is tremendously confusing–I’m completely lost every time I log in.

So, to thank Bluehost for their 10 years of great service to me, I’ve decided to make some suggestions for their login dashboard by taking a human-focused design approach.

The following is my thought process and recommendations for a human-focused redesign.

Note: I will reference the 8 Core Drives throughout this post. You can use the below as a reference guide:

• Core Drive 1: Epic Meaning & Calling
• Core Drive 2: Development & Accomplishment
• Core Drive 3: Empowerment of Creativity & Feedback
• Core Drive 4: Ownership & Possession
• Core Drive 5: Social Influence & Relatedness
• Core Drive 6: Impatience & Scarcity
• Core Drive 7: Unpredictability & Curiosity
• Core Drive 8: Loss & Avoidance

Why the dashboard is poorly designed

I’d first like to list the reasons why I believe the Bluehost dashboard is poorly designed:

1. The use of a double navigation menu

Check out the header and you’ll notice the use of a double navigation menu. Bluehost is very robust, which is why they thought it necessary to utilize a double menu; however, the way it’s displayed is very confusing for the following reasons:

• Is the sub menu a subset of the top menu? For example, does the sub menu belong under “Hosting”? If I click on “WordPress tools”, will another sub menu appear?
• Why are some destinations listed multiple times? For example, “email” is listed in the sub menu, as a section in the body of the page, and as a filter.
• Why are menu items all in lower case? (just wondering)

Check out the menus of well-known, robust sites. You’ll notice that none of them utilize a double menu:

2. Lack of a clear Desired Action

When I log into Bluehost, I have absolutely no idea what I’m supposed to do. There are many options, but there is no clear Desired Action.

Possible solutions:

1. Have a list of most popular actions
2. Have a list of suggestions for your websites
3. Have an easy, 1-click way to purchase a new domain
4. Suggest new domains to purchase (based on current domains)
5. Have up-time stats on your domains

3. Filters that don’t look like filters

There are buttons below the “helpful resources” section (why is it lower case?) that are very confusing. Are they buttons, filters, which ones are “on” and which ones are “off”?

Surprisingly, these filters are “on” when the box is white, and “off” when the box it colored blue.

Why have filters if I haven’t even made a search yet?

4. A multi-array of boxes, icons, and colors that are difficult to quickly scan through

The body of the dashboard is incredibly difficult to scan through. Between all of the boxes, icons, and colors, it’s near impossible to find what you’re looking for.

I have to use the [Command + F] find feature in my browser to find the functionality I’m looking for.

Redesign approach

When redesigning a product, it’s important to start with the user motivations.

1. Customer development

To get to the user motivations, you have to start with customer development. For this article I won’t conduct any customer development; instead, I’ll rely on my own intuition and experience with Bluehost.

However, I encourage Bluehost to use the following tools to conduct their customer development:

• UserTesting
• Inspectlet
• Silver Back

2. Defining the user motivations through stories

After conducting customer development to understand user motivations, we can define user stories about what a user wants to accomplish in the Dashboard.

• As a user, I want to purchase a new domain name, so that I can create a website
• As a user, I want to manage my domains, so that I can edit and revise them
• As a user, I want to install WordPress on a domain, so that I can use WordPress to customize the site
• As a user, I want to edit the CNAME of a domain, so that I can point it to a new destination
• As a user, I want to manage email accounts, so that I can receive or forward emails

3. Adding behavioral design to improve engagement and monetization

Bluehost makes money in the following ways:

1. Hosting
2. Affiliates

Behavioral design can be implemented in the following ways to improve engagement and monetization:

• CD2+CD5+CD6+CD8: Show stats for traffic, up-time, down-time, and comparing these stats with other users in the shared hosting account to up-sell dedicated or managed hosting.
  • For example: Your sites receive 350% more traffic than other users on your shared hosting account. Your downtime this month was 1.5%, leaving you with X hours of downtime. If you upgrade to a dedicated hosting account, then your downtime will be reduced to .5%. Upgrade within the next 48 hours and receive your first year of dedicated hosting for free.
• CD2+CD4+CD5: A referral program that gives hosting credits to you and a friend when they sign up to Bluehost and purchase a domain.
• CD4: Bluehost can utilize the Alfred Effect like Mint.
  • Mint consolidates all of your financial accounts and makes money through affiliate deals by referring financial products and services to you.
  • Similar, Bluehost refers website products and services to users and makes money through affiliate deals; however, Bluehost doesn’t consolidate user information the way that Mint.com consolidates financial information.

The Bluehost dashboard redesign

Note: I am an Experience Designer, not a graphic designer

I used Sketch to design a rough wireframe of what a possible redesign of the Bluehost dashboard could look like; I used Material Design as the template for the objects in the design.

Here are details about the design recommendations:

• Focus on the domains: the domains can clearly be seen on the left-hand sidebar. They are no longer hidden behind a “domains” tab.
• Start with the domain, then the feature: in the current Bluehost dashboard, the dashboard starts with the feature: emails, WordPress, redirects, FTP; in contrast, the dashboard I designed starts with the domain: first you select the domain, then you create an email, install WordPress, or add a redirect.
• Clear CTA to purchase a new domain: it’s important to make it easy for users to find and purchase a domain directly from the dashboard.
• Alerts and Advice are now clearly visible as sub desired actions: a user can dismiss the Alerts or Advice or can take action on them. The Advice can lead to an up-sell.
• Simplification of the menu: by making features accessible directly through each domain, we can simplify the Header. Advice and Stats can be great ways to up-sell users. Bluehost excels with their customer support, so placing “Help” prominently at the top is important.
• Settings is accessible through my profile at the top right: it’s important not to reinvent the wheel. Users already have a conceptual map for where the settings page on the majority of websites can be accessed.

Next steps

It’s of course important to first conduct customer development, create assumptions, validate the assumptions, implement a redesign, then iterate as quickly as possible.

Bluehost, if you’re interested in some help, let me know.