jm_white
Business.com
Homepage Redesign
Project Details

  • Role: UX/UI Design Lead
  • Deliverables: Mockups, Design Specs
  • Tools: Adobe XD, Illustrator, After Effects
  • Date: October 2018
The Core Problem

Business.com recently decided to undergo a major rebranding, which includes a complete redesign of its article pages and homepage. The team's focus for this project was Business.com's homepage.

My task for this project was to create a new, usable homepage that highlighted Businesses.com's offerings in an organized fashion.

My Approach

Here's an outline of my design process, with jumplinks to each corresponding section.

1: Design Evaluation

I evaluated Business.com's home page for weaknesses and user experience issues.

2: Wireframes

I created wireframes that addressed the UX issues I found during my evaluation.

3: Style Choices

My rationale behind the colors and fonts I used when designing new Business.com homepage concepts.

4: Final Designs

Here's how my designs addressed the core issues facing Business.com.

5: User Testing

I designed and executed a usability study to gather actionable user data.

Design Evaluation

Below are screenshots of key problem areas I noticed on Business.com's home page. Pro tip: Click on each image to view a larger version.
Wireframes

I met with the Business.com's key stakeholders to talk about my overall design approach and discussed Business.com's core offerings. To keep things simple for our users, we decided to highlight Business.com's community, articles, and buying advice.

With this in mind, I created wireframes for three concepts that addressed the issues I noticed in my design critique.

Style Choices

Here are the colors and fonts I chose for this project.
Aa

Font: Proxima Nova, Light

The Proxima Nova font is a neat, readable font which was perfect for paragraph text on the Business.com homepage.
Aa

Font: Avenir, Standard

I chose Avenir for headings to create visual contrast between paragraph text and the headings.

Color: Havelock Blue

To remain consistent with other links on Business.com, I chose Havelock Blue for homepage hyperlinks.

Color: Gun Powder

This was a great color to use for headings and paragraph text due to its readability on light backgrounds.

Color: Tahiti Gold

Tahiti Gold is a softer variation of the orange typically used on Business.com.

Final Designs

Here are the final design concepts I created for Business.com's homepage.

Final design concepts for a new Business.com homepage.

Design A

This design divides Business.com's core offerings into three distinct sections on the page. Beneath the tagline "Jumpstart your business" is a new value proposition that mentions Business.com's core offerings in the order that they appear on the page.

Design B

This design is a tweak of Design A. Instead of showing all of Business.com's core offerings in a pre-determined order on a single page, this design gives the user the flexibility to determine which content is displayed.

At the top of the page are three buttons that toggle the page's content. For example, clicking on "Buying Advice" would make the page display Business.com's content related to making purchases.

Design C

This page acts as a gateway to each of Business.com's core offerings. Each of the CTAs on the hero image takes the user to a landing page for the corresponding offering.

This design also focuses on the user's intent by describing Business.com's offerings with language that users can identify with (i.e. "I am looking for..."). Finally, quotes from Business.com's users and the list of Business.com's partners acts as social proof of Business.com's trustworthiness.

Design Specs

To help guide the front-end team, I prepared design specs with Adobe XD. These specs provided dimensions, colors, font sizes, etc., for every element on the page.

User Testing

To gather user data on my concepts, I designed a usability study, wrote a usability test plan, and trained Business.com staff to moderate the study’s sessions with representative users. For our study, we chose to use Validately, an online user testing software suite which allowed us to show each design to our users remotely and gather user data.

In the study, one of our participants' key tasks was to rank the designs from least favorite to most favorite. Users had an opportunity to view designs A, B, and C listed above along with an image of the current Business.com homepage, which was referred to as Design D. Our preliminary data shows that participants preferred Design C, followed by Design A. Additionally, all participants chose the current Business.com home page as their least favorite design.

Design A:
Design C:
Design D:

The winning design: Design C

Next Steps

Analyze User Data.   Our team is still sorting through the data, but from our first round of testing, our participants appear to prefer Design C over all other designs. As we dig deeper into our feedback, we can also gather insight on design changes that will improve Design C.

Create and Test Mobile Designs.   Once we’re done gathering and analyzing data from our desktop designs, I’ll use the highest-ranked design to create mobile mockups that we’ll also test.

Once we’ve gathered enough user data and refined the designs, we can launch a fresh, new, responsive Business.com homepage.




Questions about this project?