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.
- 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 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
- 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
- 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
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.
Based on the findings during the user research, I prototyped a new homepage with the following changes:
- Student outcomes and testimonials
- Financing options
- Code 101 information and registration button
- Hiring company logos
The new website homepage addressed frequent questions and delivered a cleaner experience for new users.
- 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
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.