CHALLENGE

DOC needed a digital experience capable of translating its telehealth offering into a clear, trustworthy, conversion-oriented interface. The UX challenge was to reduce friction between discovering the service, understanding its benefits, and accessing the platform, while addressing three distinct communication needs: patients, corporate stakeholders, and investors.

APPROACH

I developed a navigation structure and component system that organizes information according to user intent. The homepage prioritizes the value proposition and app downloads; product sections explain features and user flows; and corporate pages structure institutional and financial information.

From a UI perspective, I used a strong typographic hierarchy, contrast between green tones and neutral backgrounds, modular layouts, line icons, and product mockups to maintain visual consistency and make the digital experience tangible.

RESULT

01. Information Architecture and Navigation

The primary navigation keeps links to Home, About, Investors, FAQs, and Contact visible. The hierarchy separates service access from institutional and financial information, while the Investors section includes a dropdown menu to organize specific content.

02. Visual Hierarchy & Content

Large headlines, descriptive subheadings, and strategic color accents establish clear reading levels. On the homepage, “Free healthcare, finally” dominates the hero section, while titles such as “About DOC” and “For Investors” immediately establish the context of each page.

03. Conversion-Oriented UI

The homepage gives app downloads prominent placement through a CTA and dedicated app store buttons. The composition balances the core marketing message with product visualization, reducing the visual gap between the promise and the solution. The actual impact on conversions would require validation through analytics or A/B testing.

04. Product Visualization and UX

Smartphone mockups, biometric data cards, and floating labels translate abstract functionalities into concrete visual examples. This approach helps communicate the product's value without relying exclusively on lengthy blocks of text.

05. Task Flow

The “How it works?” module presents six sequential steps: reason for visit, facial scan, symptom selection, document upload, doctor consultation, and diagnosis. Numbering, icons, and concise descriptions help users anticipate the process before using the service. The sequence also makes the expected user journey clear.

06. Design System and UI Consistency

Cards, rounded containers, outline icons, and green accent lines serve as recurring visual patterns. In “Key Features,” a two-column grid organizes six functionalities using a consistent structure: icon, title, and description. This makes benefits easier to compare and allows users to scan the section efficiently.

07. Responsive Design and Accessibility

The modular composition offers a foundation for adapting to different screen sizes, although the screenshots alone do not confirm responsive behavior. Validation should cover column reflow, headline legibility, touch target sizes, color contrast, keyboard navigation, and alternative text for images and icons.