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 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's homepage.

My task for this project was to create a new, usable homepage that highlighted'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'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 homepage concepts.

4: Final Designs

Here's how my designs addressed the core issues facing

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's home page. Pro tip: Click on each image to view a larger version.

I met with the's key stakeholders to talk about my overall design approach and discussed's core offerings. To keep things simple for our users, we decided to highlight'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.

Font: Proxima Nova, Light

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

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, 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

Final Designs

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

Final design concepts for a new homepage.

Design A

This design divides's core offerings into three distinct sections on the page. Beneath the tagline "Jumpstart your business" is a new value proposition that mentions'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'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's content related to making purchases.

Design C

This page acts as a gateway to each of'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's offerings with language that users can identify with (i.e. "I am looking for..."). Finally, quotes from's users and the list of's partners acts as social proof of'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 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 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 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 homepage.

Questions about this project?