April to July 2019
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
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:
Top left: Previous Homework page
Top right: Previous Exam Review page
Bottom left: Previous Subjects page
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.
The new homework page.
I added a few elements our research indicated would be helpful.
Left: The desktop version of Homework Help.
Right: The mobile version of Homework Help.
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.
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:
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.
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.
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).
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:
The previous version of this page (pictured) was designed with two goals in mind:
These goals contradicted with what pages ranking highly in Google needed:
The process was pretty much the same with the following processes:
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.
A before-and-after comparison of a single problem page.
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.
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.