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
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
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.
- Single focus on asking a question
- Education/instruction
- Searchable database of all homework problems Clutch has solved
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:
- Mobile first
- CSS Grids
- Organization using BEM
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.
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).
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:
- To connect solving problems with learning concepts
- To provide plenty of additional practice
These goals contradicted with what pages ranking highly in Google needed:
- Less content for faster page loads
- A single focus on the page, i.e. one main content piece
- A moderate amount of internal links
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.
A before-and-after comparison of a single problem page.
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.
