Previous Version of Blog Subcategory Page
Blog Subcategory Page Redesign
Implementing and designing SEO recommendations for Skillcrush
The Project
The Project
The goal of this project was to redesign the blog category pages of the Skillcrush website in order to improve its SEO and enhance the user experience. The project was initiated by an outside SEO agency, which provided recommendations for improving the page, including implementing a labeled pagination system, creating a sub-navigation menu for popular blog categories, and creating landing pages with short descriptions of each subcategory.
My Role
I served as the interim product designer for this project, working closely with the development team to implement the design changes and ensure that they were aligned with the brand's style and branding. As the designer, it was my responsibility to not only implement the changes suggested by the SEO team, but also to ensure that they were user-friendly and effective in achieving the desired outcomes.
The Problem
The existing blog category pages were not effectively optimized for SEO and could be optimized to provide a better user experience. The SEO team identified several areas for improvement, including the need for a labeled pagination system, a sub-navigation menu, and landing pages with category descriptions. In order to address these issues, it was necessary to redesign the pages in a way that was both functional and aesthetically pleasing, while also preserving the overall style and branding of the Skillcrush website.
My Approach
To begin the project, I researched other companies with successful blog subcategory pages to gather inspiration and ideas. I identified three companies – HubSpot, Patagonia, and HelpScout – as particularly effective examples, despite being in different industries than SkillCrush. These companies successfully incorporated various levels of navigation and calls to action without overwhelming the page.
Using this inspiration, I created multiple iterations of wireframes and mockups of different design solutions for the landing page, reviewing them with the marketing team to ensure that they met their needs and goals. After receiving approval on a design, I handed it off to the development team for implementation.
The Results
Key Findings
During my research, I discovered that several of the successful blog subcategory pages featured a curated selection of popular posts at the top of the page. This allows users to quickly access valuable information that is relevant to their interests.
I also noticed that many of the research examples included calls to action (CTAs) throughout the page, rather than just at the top. This helps to engage users multiple times and encourages them to move further down the sales funnel. This approach seemed effective in converting visitors into customers.
Solutions
To address the challenges with the existing category page, I implemented the following solutions:
Blog pagination navigation:
I created a pagination system that aligned with the Skillcrush brand, using organic blob shapes to highlight the active page and designing the mobile version to display only one-page number at a time for ease of use.
New sub-navigation:
I redesigned the sub-navigation to focus on featured categories and incorporated a subtle pink gradient to keep the information clear and open. I also moved the call to action (CTA) to other parts of the page to keep the navigation and purpose of the subpage clear.
Landing page design:
I added a curated "getting started" section at the top of the subcategory landing page, featuring 3 blog posts recommended by the marketing team. I also included CTAs throughout the page to engage users multiple times as they move through the content.
More Categories section:
I added a section at the bottom of the page that repeated the categories included in the new sub-navigation, allowing users to easily explore other topics of interest after browsing the current selection.
Final Design
Lessons Learned
This project emphasized the value of breaking a project into smaller, manageable tasks. By dividing the work into subtasks, the development team was able to implement smaller improvements to the page without being held up by tasks that required more time and input from multiple teams.
Effective communication and collaboration with stakeholders, particularly the marketing and development teams, were also essential to the success of the project. We made sure to align the design of the page with the existing content and goals of the marketing team and ensure that any new elements introduced did not cause conflicts with other pages. Overall, this project demonstrated the importance of breaking down work into smaller chunks and working closely with stakeholders to achieve a successful outcome.