DATE

April to July 2019

ROLE

Product Designer

DESCRIPTION

A user interface redesign project with the goal to improve SEO ranking and on-page usability

Our focus had always been on the user's product experience after logging in. The experience outside those pages was mediocre at best. With the hire of a new SEO and content marketing manager, we prioritized how website architecture could improve SEO rankings and user experience.

SEO Manager's initial brief describing the problem

brief-1
business people celebrating in the workplace with number one

Phase I

This phase included landing pages with the content that would be available on Level 2 of Google's crawl depth. These pages had needed an overhaul for a long time:

  • Homework
  • Exam Review
  • Solution Library (searchable inventory of chemistry problems)
  • Subject (pages for each academic subject)
  • ACS (American Chemical Society textbook)

Top left: Previous Homework page

Top right: Previous Exam Review page

Bottom left: Previous Subjects page

old-homework
old-subject
old-exam-reviews

The first step was auditing the existing pages to better understand each page's elements.

Image: A audit of existing elements. You can see the process of deciding what elements to remove in order to improve usability.

old-homework-annotated

The new homework page.

I added a few elements our research indicated would be helpful.

  1. Single focus on asking a question
  2. Education/instruction
  3. Searchable database of all homework problems Clutch has solved

Left: The desktop version of Homework Help.

Right: The mobile version of Homework Help.

new-homework
homework-mobile

A before-and-after comparison of the searchable homework problem database.

A before-and-after comparison of Exam Reviews.

Problem Library: Search-first solution library to ensure students find what they are looking for.

This page also acts as an independent node from where Google can go deeper in the crawl.

new-solution-lib

A before-and-after comparison of "Subject" pages.

I audited each page. During this process, We made design decisions to ensure we focused on users' needs, and we added UI elements and internal links to improve SEO rankings.

After each of my page designs was approved, I moved on to creating the HTML and CSS. This, too, had some principles:

  • Mobile first
  • CSS Grids
  • Organization using BEM
homework-code
Business woman working and making notes

Phase II

The second phase was generating a navigation to connect these pages. This was the most important step because navigation will dictate which pages Google crawls to after the home page.

First: Sketch of the first version of the navigation

Second: ´╗┐High-fidelity mockup of the navigation

I ran guerrilla usability testing hitting up friends and folks on social media. The testing proved useful, as the doubts that I had were true.

1. Users expected all the subjects to have similar offerings.

2. Implementating the navigation would be handled using JavaScript, which meant Google wouldn't be able to read it unless we created a pre-render fallback on page load.

 

navigation-test
test-navigation

Based on the feedback, we decided to take a less ambitious navigation-implementation route. The new navigation would list subject offerings in a central page users would access easily.

new-nav

Our previous mobile (first) menu was a hamburger menu. However, we read about the long list of UX issues this menu would lead to. Since our navigation didn't have many high-level options, we decided to use tab items.

I initially wanted to break down homework and exam review links (second) into two tabs because we knew students prefered to split their studying time into homework and exam preparation.

After discussing this with the team, we decided to have students find homework and exam reviews through their subject pagess (third).

old-nav
new-nav-mobile
final-mobile-options
552-Converted

Phase III

The last phase included pages with a level 3 depth (when coming from the home page). These were pages including video solutions to specific science problems. Users interact with these pages almost every day since students Google search for specific problems.

Phase III would focus on improving:

  • Pages describing solutions to specific science questions
  • Pages explaining topics such as acids and bases (didn't implement)

The previous version of this page (pictured) was designed with two goals in mind:

  1. To connect solving problems with learning concepts
  2. To provide plenty of additional practice

These goals contradicted with what pages ranking highly in Google needed:

  1. Less content for faster page loads
  2. A single focus on the page, i.e. one main content piece
  3. A moderate amount of internal links
old-solution

The process was pretty much the same with the following processes:

  • UI audit
  • Referencing qualitative and quantitative data
  • Focusing on SEO

The audit allowed us to focus on what elements to preserve. The data told us how students were using our product and what they least interacted with. Lastly, our search engine optimization goals allowed us to ensure we maintain a healthy balance between linking and page speed.

new-solution
new-solution-with-text

A before-and-after comparison of a single problem page.

collaborate

Collaboration

Our SEO manager had the idea of improving the website's SEO by changing the architecture. From that point on, I led the designing process for each page. My CTO and SEO managers and the engineers contributed feedback on the architectural changes. Their input heavily influenced which UI elements were presented and the priority they each deserved.

Once we finalized the designs, I worked on the HTML/CSS for each of these pages. I then collaborated with an engineer to ensure his team could manipulate grids and understand the mobile-first approach I took with the CSS.

Challenges

Once the scope also included front-end coding, time was the biggest challenge. We ensured a pipeline flow to devise the phases  in which we would break down work.

Testing these new designs was a challenge, and we weren't sure how they might impact our SEO rankings. To address this, our SEO manager directed us to run QA using Google tools and update the HTML semantics accordingly. After this, we did a slow release and moved the new interface to a selected number of pages to see how they would affect those pages' SEO rankings.

3202909