Redesigning the digital presence of a healthtech company with a focus on AI and User Experience

Project Overview

DocBay is a Portuguese healthtech company founded in 2023, operating in both B2B and B2C segments. The platform connects patients with doctors and clinics through a seamless digital experience, offering online bookings, calendar management, medical chat, and, soon, AI-powered health tools.

With an ambitious product roadmap and a growing user base, the company realized that its current website no longer reflected its maturity or innovation. I was brought on as a freelance Product Designer to lead a complete redesign of the institutional website — from research and strategy to high-fidelity UI and developer handoff.

You can see a screenshot here from the previous website design.

The Problem

The previous website had several limitations:

  • A confusing content structure that didn’t clearly differentiate between B2B and B2C users

  • A generic visual identity that failed to communicate innovation or trust

  • Poor information hierarchy and minimal use of CTAs

  • No mobile version — the entire site was not responsive, causing frustration for mobile users

  • No structural or visual support for upcoming AI-based features

These issues made it difficult to communicate DocBay’s value proposition, reduced user trust, and created friction across critical user flows.

Here are the screenshots from the previous mobile responsive design.

Goals

The redesign aimed to:

  1. Reposition DocBay as a modern and innovative healthtech leader

  2. Structure navigation to clearly serve both patients (B2C) and clinics/doctors (B2B)

  3. Showcase new AI features, such as Ask Me Anything (AI) and Symptom Checker (AI)

  4. Redesign the booking flow to be faster, clearer, and more user-centered

  5. Create a fully responsive, mobile-first experience accessible across all devices

  6. Build a scalable visual foundation via a reusable design system

Process

1. Stakeholder Alignment

I began interviewing the CEO to understand current pain points and future ambitions. It became clear the website needed to serve two audiences with different expectations — patients seeking simplicity and trust, and medical professionals looking for an efficient, digital-first solution.

2. Site Audit & Benchmarking

I reviewed the live site and identified issues in structure, responsiveness (or lack thereof), accessibility, and overall messaging. In parallel, I benchmarked national and international healthtech platforms — especially those leveraging AI — to define UX opportunities and areas for differentiation.

3. Information Architecture

I restructured the site to reflect two distinct journeys — B2C and B2B — while maintaining consistent branding. Key content was grouped into digestible blocks, improving scannability and guiding users toward meaningful actions like bookings or platform sign-ups.

The new structure also prepared the homepage to highlight upcoming AI-driven features in a prominent and engaging way.

4. Wireframes & Concept Validation

I created low-fidelity wireframes to validate layout logic and content priority with the internal team. This helped align expectations around page flow, CTA positioning, and narrative structure for each type of user.

5. Design System

To ensure scalability and dev handoff readiness, I built a modular design system in Figma that included:

  • An accessible, contrast-friendly color palette (WCAG AA+)

  • Responsive typography styles for all screen sizes

  • Reusable components (cards, CTAs, testimonial blocks, etc.)

  • Spacing and grid rules to ensure consistency and predictability

This system allowed for faster design iterations and clearer collaboration with developers.

6. UI Design & AI Feature Integration

High-fidelity design brought the system to life. Key highlights included:

  • A completely redesigned homepage, introducing two new AI features:

    • Ask Me Anything (AI): an open-ended chatbot for health-related questions

    • Symptom Checker (AI): a tool that lets users describe symptoms in natural language to receive possible health insights

  • A fully redesigned booking flow, now user-centered and accessible:

    • Streamlined, step-by-step process

    • Clean UI with contextual feedback

    • Optimized for mobile, where most traffic is expected

  • Responsive design across the entire website
    The previous website had no responsive version at all. Every page was now designed mobile-first and tested across devices to ensure seamless performance and usability.

7. Handoff & Developer Collaboration

I led structured handoff sessions and provided:

  • Clear, organized Figma files with documentation

  • Definitions of component behaviors, states, and responsiveness

  • Ongoing support during the development phase to validate and fine-tune implementations

Thanks to the design system, developers were able to build consistent layouts quickly and efficiently.

These are the new design for web.

Outcomes

The new site and AI features are set to launch soon, with performance metrics to be monitored post-launch. Internal feedback so far has been very positive:

  • A structure that now accommodates the needs of both B2B and B2C users

  • A clear, confident, and modern brand presentation

  • Complete responsiveness, solving a major friction point for mobile users

  • A visual system that enables faster, more maintainable development

Next steps

Now that the new website and AI-powered features are being rolled out, the next phase of the project will focus on optimization and measurement. I’ll work closely with product and marketing to track engagement, validate key flows, and continuously evolve the experience.

  • Monitor the adoption of AI features: Ask Me Anything (AI) and Symptom Checker (AI)

  • Track conversion performance across the new booking flow

  • Support the team in launching localized versions of the site

  • Expand the design system based on real implementation needs

  • Explore opportunities for A/B testing and behavior analysis

What I’ll measure

To ensure the redesign is driving real value, I’ll focus on:

  • Booking flow completion rate

  • Engagement with AI tools (sessions, drop-off points, satisfaction)

  • Time on page and bounce rate (especially on mobile)

  • Scroll depth and heatmap insights on the homepage and service pages

  • Form interactions and submission performance

  • SEO ranking improvement post-structure update

These metrics will help inform future design iterations and support strategic decisions as DocBay scales.

What I Learned

How to design inclusive digital healthcare experiences that scale across different user needs and devices

  1. The importance of designing for both simplicity (B2C) and complexity (B2B) within one platform

  2. That fully responsive, component-based systems not only improve UX — they also dramatically speed up product delivery

You can see a clickable prototype, this is to understand how the screens can behave, with the responsive designs.

Previous

NFC - Near Field Communication - (B2C)
Next

Onfido - Developer Portal - (B2B/B2C)