PROJECT OVERVIEW
The product:
The website for Dr. Trbović is a modern and user-friendly platform created to promote and sell the medical textbook Internal Medicine: Differential Diagnoses Illustrated. The site features both a free digital flipbook preview and a WooCommerce-powered store for purchasing the physical edition. It also includes detailed book information, author biographies, testimonials, and clear calls to action. drtrbovic.com
Project duration:
May to June 2025
My role:
UX designer / WordPress Designer
The problem:
Dr. Trbović had only a rough, incomplete layout created in WordPress that was neither functional nor user-friendly. He needed a fully redesigned platform with clear structure, intuitive navigation, professional UI, and a seamless purchasing experience. The existing sketch lacked organization, branding, and proper UX flow, making it difficult for visitors to understand the book’s value or complete a purchase.
The goal:
The goal was to create a clean, modern, and easy-to-use website that clearly presents the medical book, showcases its educational value, and enables quick and efficient checkout. The platform needed to visually explain the purpose of the book, provide a preview option through a flipbook, and offer a streamlined WooCommerce purchase for the physical edition. Ultimately, the aim was to make the book accessible, well-presented, and simple to buy.
Responsibilities:
As the lead UX/UI designer and WordPress developer, I managed the entire project from concept to launch, handling the full UX process, designing wireframes and high-fidelity prototypes in Figma, creating a custom logo and visual identity, developing a pixel-perfect WordPress website with Bricks Builder, setting up WooCommerce with a simple and functional checkout flow, integrating payment systems and APIs, producing a flipbook preview and custom GIF for the book presentation, and ensuring responsive design, intuitive navigation, and optimized performance throughout the site.
Home Page Overview
I designed and developed a clean, modern, and responsive home page that introduces the book, highlights its key features, and guides visitors toward either reading the flipbook or purchasing the physical copy.
Prominent call-to-action buttons lead users directly to “Read the Book” or “Buy Now,” ensuring a smooth and intuitive experience.
Visual elements include:
A book preview section with a dynamic flipbook
Key selling points (50+ illustrations, visual learning focus, clinical use)
Testimonials
A section introducing both authors with photos and bios
The layout is structured for clarity and easy scanning, helping visitors quickly understand the book’s purpose and proceed to checkout.
Design System
To ensure consistency and usability across the website, I created a compact design system for the project:
Color System: A minimal, medical-inspired palette focused on readability and clarity.
Typography: Clean, modern typefaces that support a strong visual hierarchy and professional tone.
Component Library: Reusable components including buttons, card styles, grid layouts, icons, and CTAs designed to support a cohesive user experience across all pages.
This design system ensured efficiency during development and helped maintain a consistent brand look throughout the site.
Wireframing
To establish a clear structure and intuitive user flow, I began the project by creating low-fidelity wireframes in Figma. These wireframes outlined the fundamental layout of the website, including the placement of key elements such as headings, images, CTAs, product sections, and the flipbook preview area.
At this stage, I focused on defining the hierarchy of information across the homepage and product pages, positioning and behavior of primary and secondary CTAs, the structure of sections such as book details, author profiles, testimonials, and purchase options, as well as the overall navigation flow and how users move between “Read the Book,” “Buy Now,” and informational pages.
Once the structure was approved, I transitioned into high-fidelity UI design, applying branding, typography, and visual style.