Website for Dr. Roland Grad
A searchable medical research archive website

Website for Dr. Roland Grad
A searchable medical research archive website

Website for Dr. Roland Grad
A searchable medical research archive website

Role

UI/UX Designer

Developer

Work

UX design, web development,

cloud deployment

Tools

Figma, WordPress, Elementor, LocalWP, Google Cloud VM

Duration

12 weeks

Project Overview

This 12-week practicum project was completed at the Department of Family Medicine, McGill University.
I collaborated closely with my supervisor through weekly check-ins and was solely responsible for the
UX design, WordPress development, and cloud deployment of the website.

This 12-week practicum project was completed at the Department of Family Medicine, McGill University. I collaborated closely with my supervisor through weekly check-ins and was solely responsible for the UX design, WordPress development, and cloud deployment of the website.

This 12-week practicum project was completed at the Department of Family Medicine, McGill University. I collaborated closely with my supervisor through weekly check-ins and was solely responsible for the UX design, WordPress development, and cloud deployment of the website.

01 | Objective

Design a website to organize and showcase medical research posts (POEMs), making them searchable, filterable, and accessible for the public.

02 | Role & Deliverables

Led the full project from scratch:
designed wireframes, developed the site in WordPress, deployed to Google Cloud, implemented tag filters, search, multilingual features, and sign-in function.

Led the full project from scratch:
designed wireframes, developed the site in WordPress, deployed to Google Cloud, implemented tag filters, search, multilingual features, and sign-in function.

03 | Challenges

There was no existing website. I had to build everything from the ground up.

04 | Outcome & Impact

The result is a live platform that meets user needs for readability and accessibility. It helped Dr. Grad share medical content more effectively and can grow with future research posts.

Design Process

1. Understand & Scope

Define goals and identify scope with the supervisor

2. Design & Iterate

Created and refined wireframes based on feedback

3. Build & Deploy

Developed the full site and deployed on Google Cloud

Project Goal

Design a professional website to help Dr. Roland Grad share his POEMs (Patient-Oriented Evidence that Matters) insights.

The goal was to make reliable medical insights accessible to anyone seeking trustworthy health information.

Objective

My supervisor outlined the following objectives for the website:

  • Present articles with their complete references and sources

  • Organize medical information for easier navigation

  • Provide links to relevant medical resources and official websites

  • Include contact information 

  • Multi-language support

  • User sign-in and guest mode

  • User discussion forum

Questions I Asked to Clarify Scope

To better align the project with real-world needs, I asked my supervisor targeted questions early in the process:

Who are the target users?

Patients and family doctors who want to quickly understand medical research.

How often will new articles be added?

Ideally updated daily; currently around 2–4 articles per week.

How I Comprehend Objective

These two questions shaped how I organized the core objectives of the site. This categorization helped me prioritize essential functions early on, clarify overlapping needs, and guide both the information architecture and feature planning.

I added design notes and questions during this process to align decisions with user needs and project constraints.

Adjustments:

Create a discussion forum ⮕ Replaced with article-level comment sections

Create a discussion forum
⮕ Replaced with article-level comment sections

It’s easier to implement and maintain, while still allowing users to leave feedback.

Enable filtering articles by categories ⮕ Switched to tag-based filtering

The supervisor mentioned the article topics were too diverse and unevenly distributed to group into fixed categories. I suggested using tags instead, which offer more flexibility and scalability.

Which languages are most relevant for our target users? ⮕ Started with French, Spanish and Mandarin

Which languages are most relevant for our target users?
⮕ Started with French, Spanish and Mandarin

The supervisor asked for three languages based on the current user base. But he hopes the website is set up to support additional languages later as needed.

Evaluating Tools for Building the Website

Given the 12-week timeline, the need for frequent content updates, and my basic coding background, I explored tools that would let me design and launch the site efficiently without writing code.


Instead of coding the site with HTML/CSS/JS, I focused on low-code and plugin-supported platforms that allowed me to:


  • Build a clean and responsive interface

  • Add features like search, filtering, and multilingual support

  • Let my supervisor manage content after launch


I compared options like Wix, Webflow, and WordPress.

In the end, I chose WordPress because it offered the best balance of flexibility, scalability, and ease of use and had the plugin support I needed to meet all project goals.

Design & Iterate

Wireframe

In my early wireframes, I didn’t include Dr. Grad’s photo or introduction on the homepage.
I focused only on article content and filters but the layout felt too cold and impersonal.

In my early wireframes, I didn’t include Dr. Grad’s photo or introduction on the homepage.
I focused only on article content and filters but the layout felt too cold and impersonal.

In my early wireframes, I didn’t include Dr. Grad’s photo or introduction on the homepage.
I focused only on article content and filters but the layout felt too cold and impersonal.

As I iterated, I explored different homepage layouts to balance simplicity and content visibility.

After discussing this with my supervisor, I suggested we introduce him directly on the homepage, with a bio and photo to build credibility and trust Adding this personal element made the site feel more approachable and helped first-time visitors understand who created the content and why it matters.

✅ Final Homepage Wireframe (Left)

I chose the grid layout because it supports faster visual scanning, allowing users to see more articles at once and preview content with less scrolling. This matched the goal of helping users find useful content quickly
My supervisor also found the grid layout easier to understand at a glance, and it aligned better with how the content would continue to grow over time.

✅ Final Homepage Wireframe (Left)

I chose the grid layout because it supports faster visual scanning, allowing users to see more articles at once and preview content with less scrolling. This matched the goal of helping users find useful content quickly
My supervisor also found the grid layout easier to understand at a glance, and it aligned better with how the content would continue to grow over time.

After discussing this with my supervisor, I suggested we introduce him directly on the homepage, with a bio and photo to build credibility and trust Adding this personal element made the site feel more approachable and helped first-time visitors understand who created the content and why it matters.

✅ Final Homepage Wireframe (Left)

I chose the grid layout because it supports faster visual scanning, allowing users to see more articles at once and preview content with less scrolling. This matched the goal of helping users find useful content quickly
My supervisor also found the grid layout easier to understand at a glance, and it aligned better with how the content would continue to grow over time.

Sitemap

To give a quick overview of how the site is structured, I created this sitemap to show the main pages and how everything connects.

It helped me stay organized during the design process, make sure users could navigate smoothly, and align with my supervisor on what would be included in the final build.

Even though the site is simple, mapping it out ensured clarity for both design and development.

To give a quick overview of how the site is structured, I created this sitemap to show the main pages and how everything connects.

It helped me stay organized during the design process, make sure users could navigate smoothly, and align with my supervisor on what would be included in the final build.

Even though the site is simple, mapping it out ensured clarity for both design and development.

Building with Wordpress & Elementor

I built the final site using WordPress and Elementor, starting from a pre-designed template to save time.

I customized the layout, adjusted components, and configured features based on our project goals.


While the base structure came from the template, I made several hands-on improvements including a custom tagging system on each article card to support flexible filtering and a better user experience.

I built the final site using WordPress and Elementor, starting from a pre-designed template to save time. I customized the layout, adjusted components, and configured features based on our project goals.


While the base structure came from the template, I made several hands-on improvements including a custom tagging system on each article card to support flexible filtering and a better user experience.

Adding a Tagging System to Article Cards

I started by testing tag display using a placeholder card (left), since the original template didn’t include tags at all.
Later, I implemented and styled a custom tagging system using CSS (right), improving visual clarity and making it easier for users to scan and filter by topic.

⮕

⮕

Adding a Tagging System to Article Cards

I started by testing tag display using a placeholder card (left), since the original template didn’t include tags at all. Later, I implemented and styled a custom tagging system using CSS (right), improving visual clarity and making it easier for users to scan and filter by topic.

I started by testing tag display using a placeholder card (left), since the original template didn’t include tags at all. Later, I implemented and styled a custom tagging system using CSS (right), improving visual clarity and making it easier for users to scan and filter by topic.

Deployment

To make the site live and accessible to the public, I deployed it using Google Cloud as requested, since the department already had a paid account.

Here’s a simplified overview of the steps I handled:


  1. Built and tested the full website locally using LocalWP

  2. Deployed to Google Cloud, since my supervisor already had an active account

  3. Set up a basic Ubuntu VM with LEMP stack (Linux, Nginx, MySQL, PHP)

  4. Uploaded all content and database manually

  5. Installed WordPress core and configured the site

  6. Enabled SSL and completed setup using the GCP IP address (domain not yet connected)

While I don’t have a full development background, I independently completed this deployment through hands-on learning, documentation, and debugging.

Delivery

  • A fully functional WordPress website, built and deployed using Google Cloud

  • A customized layout built in Elementor, tailored to the client’s structure and content

  • A working tagging system with custom CSS for article filtering

  • Features including search, filtering, multilingual toggle, article commenting, signup function, and responsive layout.

Home Page

Studies Page

About Me Page

Reflection

What I Learned:

Structure makes everything easier

Structure makes everything easier

Grouping the project goals into categories helped me stay on track and communicate clearly with my supervisor. It made decisions easier later on.

I don’t need to know everything (at first)

I don’t need to know everything (at first)

I didn’t know how to deploy a website or customize WordPress tags but I figured it out. I watched YouTube tutorials, asked ChatGPT when I got stuck, and just kept testing things until it worked. It was a great reminder that self-learning goes a long way.

I didn’t know how to deploy a website or customize WordPress tags but I figured it out. I watched YouTube tutorials, asked ChatGPT when I got stuck, and just kept testing things until it worked. It was a great reminder that self-learning goes a long way.

Documentation saves time (and sanity)

Documentation saves time (and sanity)

Whether it was plugin settings, deployment steps, or design feedback, keeping notes helped me stay organized and avoid repeating mistakes. It made everything smoother, especially when I had to go back and fix things later.

Whether it was plugin settings, deployment steps, or design feedback, keeping notes helped me stay organized and avoid repeating mistakes. It made everything smoother, especially when I had to go back and fix things later.

What’s Next

Add a subscription feature

Add a subscription feature

We’re planning to let users subscribe and get updates when new articles are posted.

We’re planning to let users subscribe and get updates when new articles are posted.

Connect a domain

Connect a domain

The site is currently on an IP address. I’ll connect a custom domain once the budget allows.

The site is currently on an IP address. I’ll connect a custom domain once the budget allows.

Overview

Goal & Objective

Design & Iterate

Build

Deployment

Delivery

Reflection