Sarah
June
Fischer

—  Product Designer —
Return to top
Case Study 1

Homepage Redesign

Role: UX / UI Designer & Front-End Developer

Tools: Google Analytics, Photoshop, Sublime Text, Git

Problem: Code Fellows’ homepage was outdated and needed expanded information about new course options and student outcomes.

Discover

Goal
  • Explain Code Fellows’ program
  • Help returning users easily find what they’re looking for
  • Tell the company’s story
  • Quickly answer the most common customer questions
  • Reduce how much time the Admissions team spends answering customer questions that could be answered on the website

User Research

Method
  • User interviews with the Admissions team to discover the top questions that new students are asking
  • Data analysis via Google Analytics to identify which pages users were navigating to after viewing the homepage

Insights

Issues
  • The registration page for Code 101, a class for coding beginners, wasn’t easily accessible from the homepage
  • There were no clear options for financial aid
  • A “proof of product” should be front and center
Solutions
  • Code 101 section for coding beginners
  • Financing section with links to information about scholarships, student loans, and the GI Bill
  • Stats and testimonials from students
  • Company logos where Code Fellows graduates work

Wireframe

Based on my findings from the user research, I created wireframes to explore potential solutions for the redesign that would meet the project goals.

I left some original sections that were still relevant, so that returning visitors wouldn’t be disoriented, and added new sections for financing, Code 101, company logo, statistics, and testimonials from students.

Prototype

Based on the findings during the user research, I prototyped a new homepage with the following changes:

Additions
  • Student outcomes and testimonials
  • Financing options
  • Code 101 information and registration button
  • Hiring company logos

Launch

The new website homepage addressed frequent questions and delivered a cleaner experience for new users.

Key Learnings
  • Limited tech support prevented the project from ballooning in scope since I had to stay within the bounds of my own coding ability
  • Building the page challenged me to improve my technical skill set in front-end development
  • Because I was coding my own designs, I could make iterative changes on my design if necessary, which revealed places where I needed to improve my thought process during the design phase

Iteration

The new homepage required a few iterations. Since launch, we have:

  • Moved Code 101 to the top
    Code 101s bring in new students and many marketing campaigns point to it, so moving it higher met a top business goal.
  • Replaced logo slider with grid
    Now all company logos can be seen at a glance.
  • Featured links to our review sites in the last section
    This adds credibility to the brand and product.
  • Removed the Contact Us button from the header
    This made the Apply button more prominent and removed the visual competition between the buttons.