- 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.
Design Issue #1
Busy, Unclear Design
At the top of the page, there are three sections with information, but it’s very unclear where a user should start.
Design Issue #2
Unclear Value Proposition
“All the expert advice, reviews and tools you need to succeed. Finally.” Not only is this vague, but if we look lower on the page, we can see Reviews and Expert Advice are listed under the tools & Services section. Are there other tools that are not listed? Also, what are the services? All of this is unclear.
Design Issue #3
Inconsistent CTA design
We have buttons with varying colors and varying purposes and there does not appear to be any discernible pattern between the two. For example, the orange "Get Free Advice" and "Expert Reviews" buttons take the user to another page, but the orange "Price Quotes" button opens a drop-down menu on the nav.
Design Issue #4
Inconsistent color choices
I noticed that orange is regularly used for clickable CTAs as well as non-clickable items, like the orange check mark icons or the orange text that reads "Hundreds of thousands". This can inadvertently trick the user into thinking that non-clickable items are clickable.
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.
Font: Proxima Nova, LightThe Proxima Nova font is a neat, readable font which was perfect for paragraph text on the Business.com homepage.
Font: Avenir, StandardI chose Avenir for headings to create visual contrast between paragraph text and the headings.
Color: Havelock BlueTo remain consistent with other links on Business.com, I chose Havelock Blue for homepage hyperlinks.
Color: Gun PowderThis was a great color to use for headings and paragraph text due to its readability on light backgrounds.
Color: Tahiti GoldTahiti Gold is a softer variation of the orange typically used on Business.com.
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.
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.
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.
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.
The winning design: Design C
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.