Dr. Kelson Kawamura · Professional website and blog
Dr. Kelson Kawamura: Website and Blog
Visual direction and legacy content in one project
I designed and built Dr. Kelson Kawamura's website, connecting his professional introduction, procedure pages, and blog. Beyond the interface, I worked on migrating and cleaning up the content from the previous WordPress site.
Explore the screens§ 01
Context
The project had two parts: defining how to present the doctor and bringing the existing blog into the new site. The internal page copy and articles were supplied, along with the logo and portraits.
Working through that content in the CMS took the most effort. Formatting needed cleanup, cover images needed recovery, and links needed organizing. The content had to work in the new layouts and feel consistent with the rest of the site.
§ 02
UX/UI decisions
01A shared visual language
I chose dark backgrounds, light text, and champagne accents for the doctor's presentation. Portraits sit alongside the typography and primary actions within the composition.
I carried that treatment through the internal pages and blog to keep the identity consistent across different kinds of content.
Portrait and professional information within the page composition. - 02
Navigation within longer pages
I organized the supplied text on procedure pages using headings, lists, and a side table of contents to guide reading.
Visitors have reference points within the text, while the page composition follows the visual language of the homepage.
Side navigation and sections on the procedure page. - 03
Making the blog part of the site
The listing presents articles through a consistent card layout, with cover images, titles, summaries, and links to read more. I treated it as part of the main site, using the same visual patterns.
A load-more button provides a way to continue browsing the list.
The blog entry point with article cover images. - 04
Structuring the supplied content
I organized article subheadings, paragraphs, and lists to give the reading flow a clear rhythm. The structure repeats across pages and uses the site's visual details, including champagne-colored bullet points.
The work focused on preparing and presenting the supplied content, with its original authorship preserved.
Subheadings and paragraphs in the article layout. - 05
The presentation on smaller screens
On tablet and mobile, I reorganized the opening to make room for the text, actions, and portrait. Navigation becomes a collapsed menu.
I kept the colors and hierarchy between components while adapting the composition to narrower viewports.
Text and actions precede the portrait on tablet.
§ 03
Content and AI-assisted development
The migration history records 25 articles imported from WordPress. I used Lovable and ChatGPT for development and content preparation, with two rounds of structural cleanup.
- Text structure
- I cleaned up lists, subheadings, paragraphs, and repeated blocks to fit the new article layouts.
- Covers and images
- I recovered cover images, removed repeated images from article bodies, and adjusted thumbnail framing.
- Connected content
- I organized articles by topic and worked on contextual links and further reading alongside the site's pages.
§ 04
SEO
SEO was part of the site structure and blog work. I prepared page-specific titles and descriptions, keeping search metadata distinct from the titles and summaries shown in the interface.
- Content architecture
- Procedure pages and related articles connect topics across the site.
- Metadata and structure
- Titles, descriptions, canonicals, and structured data matched to the page type.
§ 05
Screens
Tablet and mobile screenshots use emulated viewports.
Desktop · 03
Tablet · 03
Mobile · 03
§ 06
Credits
Project credit: iMedicina.
Matheus Barros: visual direction, UX/UI, development, SEO, blog migration, and content cleanup.
Original copy for the internal pages and articles was supplied. The client provided the logo and portraits. Other images were reused from the previous blog or generated with AI.