iMedicina · Web application / Help Center
iMedicina Help Center
A consistent interface for searching, browsing, and reading help articles
I organized iMedicina's existing articles and built a public help center with search, categories, and article navigation. My role covered UI design, content preparation, SEO, and implementation using Lovable and Claude Code.
Explore the screens§ 01
Context
The project started with an export from the previous knowledge base. The articles had inconsistent HTML, outdated links, and content that needed review. I needed a way to organize that material and give it a consistent interface.
I defined a workflow that connected content preparation with the help center's structure. iMedicina already had a brand and design system, so I applied those standards to search, category pages, and article layouts.
§ 02
UX/UI decisions
01Two ways into the content
I made search prominent for people arriving with a specific question. Getting-started shortcuts and a category grid offer a way to browse instead.
Those entry points let people approach the same library by search term or topic, with short descriptions that preview the content.
Categories for browsing the content by topic. - 02
Navigation beyond the homepage
On internal pages, I kept categories and articles within reach through side navigation. Categories expand in place and offer options to reveal more articles.
On mobile, the same navigation becomes a drawer over the page, so people can move to another topic without returning to the homepage.
Content navigation in a mobile drawer. - 03
A layout built for reading
I split the article layout into three areas: content navigation, the article, and a table of contents. Reading time appears at the top, and the desktop table of contents highlights the active section.
Each area has a defined role, with navigation references kept close to the text.
Separate areas for navigation, reading, and the table of contents. - 04
A next step after search
Results include a category, title, and summary to give context before an article is opened. I also designed the no-results state with search suggestions, category links, and access to support.
Even when a query returns no articles, the page offers another way to continue.
No-results guidance, shown with a sample query. - 05
Using iMedicina's design system
I applied iMedicina's visual standards to headings, buttons, links, cards, and interface states. The brand's blue draws attention to actions, while the reading area uses light surfaces.
Shared patterns carry the identity across page types and keep the visual treatment around the articles restrained.
06Adapting the structure to smaller screens
On tablet and mobile, I adjusted the arrangement of shortcuts, categories, and navigation. The table of contents moves into a collapsible block within the article.
The desktop functions remain available, with components reorganized to suit the available space.
A collapsible table of contents within the tablet article.
§ 03
AI-assisted development
I handled implementation using Lovable and Claude Code, including preparing the articles for the help center's layouts. I used AI to support the work and organized the rounds of content cleanup and verification.
- Content structure
- I cleaned up markup, heading hierarchy, and links to fit the shared article layouts.
- Change tracking
- I compared versions and recorded changes, checking that structural edits preserved the text.
- Editorial review
- I kept technical fixes separate from content decisions, which stayed with the team responsible for the articles.
§ 04
SEO
I planned SEO by page type, alongside the content structure. The homepage, category pages, and articles each received their own metadata and canonical URLs, with structured data matched to their content.
- Homepage and categories
- Identifying the help center and organizing its article collections for search engines.
- Articles
- Page-specific metadata, semantic structure, and a clean canonical URL for each article.
- Internal search
- Search results use noindex, with content pages serving as the intended destinations for organic discovery.
§ 05
Delivery and feedback
I built the search, category pages, articles, and search states, handling implementation myself. The core delivery took about 15 hours, and the team was very happy with the result.
On October 23, 2026, the public interface showed 14 categories and 262 articles. Those counts describe the public library at that time.
Usage, support-ticket reduction, and traffic were not measured for this case study.
§ 06
Screens
Tablet and mobile screenshots use emulated viewports.
Desktop · 03
Tablet · 03
Mobile · 03
§ 07
Credits
Project credit: iMedicina.
Matheus Barros: UI design, UX, content organization and cleanup, SEO, and implementation.
The brand and design system belong to iMedicina. The original articles came from the previous knowledge base, with editorial review handled by the team responsible for the content.