bengarves.com/work/related-searches-module
Related Searches Module
[SEO-91] Topics Page - Create “Related Searches” Module
From Ben Garves’s work at Udemy. Re-created from the original document, with people’s names, internal links and non-public numbers removed or generalized. Sections by others are labeled.
StorySEO-91
- Company
- Udemy
- Created
- Resolved
- Status
- Done
- Priority
- P1 - High
- Story points
- 3
- Project
- SEO Squad
- Sprints
- SEO Sprint 5, SEO Sprint 6
- Requirement source
- Engineering
Builds a reusable “Related Searches” module for the 27-page test of the redesigned Topic page, giving visitors a set of related search links as navigational options when the current page doesn’t fit their needs. Includes desktop and mobile design specs.
- Topic pages
- Content modules
- Internal linking
- Design specs
Design update (06/18/26)
Added to the ticket by the design team.
Updated design specs were added to the top of the ticket on 06/18/26, above the original story and designs below. Some styles may change as we finalize, but overall functionality and data will remain the same.
(full-size image)Layout
- Reference the design system’s Link Group component.
- Desktop: XXL to XXS breakpoints, 1340+ to 0px.
- Horizontal padding for module: maintain site-wide page margins (24px minimum).
- Vertical padding for module: 48px (Space-X-L).
- Horizontal gap between link group: 8px (Space-X-S). If 2 rows, vertical gap between cards: 8px (Space-X-S).
Title block
- Title: Udemy Sans, Heading, 32px (HeadingSans/XXL), applied/text/default (#2A2B3F).
- Subtitle: Udemy Sans, Regular, 18px (Text/Large), applied/text/default (#2A2B3F). Max-width 800px; break to a second line as needed.
- Vertical gap between title and subtitle: 8px (Space-X-S).
- Vertical gap between title block and link group: 32px (Space-L).
Link group
- Size: desktop = Medium (40px); mweb (below 701px) = Small (34px).
- Copy: Udemy Sans, Heading, 14px (HeadingSans/small), applied/text/default (#2A2B3F).
- Height: 40px. Width: hug content. Horizontal padding: 12px. Vertical padding: 11.5px.
- Stroke: 1px, base/gray/gray-300 (#9194AC). Corner radius: 4px (border-radius-small).
Copy and how we’re pulling data will be finalized the week of 06/22.
User story
As a Topics page visitor, I’d like to see a list of related searches so I have navigational options if the current page doesn’t fit my needs.
Context
For the 27-page test of our new Topic page design, we’d like to add a new module we’re calling “Related Searches”, which is loosely based on a design that currently exists (shown below).
A follow-up ticket will include the titles and descriptions for the items that will display in this list for each page.
Acceptance criteria
- This module has been built in a way that can be pulled into the v2 Topic template built as a part of SEO-51.
- Location on the template is still TBD, so don’t worry about location, beyond placing it above the Course Directory built out in SEO-52.
- Designs can be found in Figma.
- Please use the design with purple outline and purple text.
- Please note the mobile designs, too. 🙂
Original designs (before the 06/18/26 update)
(full-size image)
(full-size image)
(full-size image)