Project overview | Alaradi Dental & Cosmetic Center

01Project overview

Website title: Alaradi Dental & Cosmetic Center (redesign concept)
Category: Commercial website
Problem statement: The clinic’s current website is a generic booking template: it shows no phone number, email or opening hours on the home page, lists services only as category names, and its colours don’t match the clinic’s navy and gold logo. Patients have to rely on Instagram for basic information.
Target audience: Adults and families in Bahrain, especially around Salmabad, looking for general, cosmetic, orthodontic, implant or children’s dental care, and existing patients checking hours, doctors or insurance.
Objectives: Present accurate clinic information clearly; make contact and booking easy on any device; explain each treatment in plain language; show the real clinic, doctors and results; demonstrate a simple booking flow; meet the IT6012 requirements.
Team: Yousif Alaali, 202501330
Yousif Alhamad, 202500649

02Requirement analysis

Functional requirements

User registration form on the Home page (first and last name at least 3 characters, mobile exactly 8 digits, valid email) with success and error messages.
Navigation between all seven pages from every page, including a mobile menu.
Demo patient portal: log in, sign up, dashboard, booking in five steps, receipt and appointment status with days remaining.
Interactive before/after slider and case switcher.
Services photo preview and a section bar that follows the page.
Live “open now” indicator based on the clinic’s hours in Bahrain time.
One-tap call, WhatsApp, email and directions links.

Non-functional requirements

Performance: WebP images in several sizes, lazy loading below the fold, no frameworks, video loads only on request.
Accessibility: WCAG AA contrast, labelled form fields, keyboard support, focus rings, alt text, reduced-motion support.
Security & privacy: no data is sent to any server; visitor input is escaped before display; demo data stays in the browser tab.
Usability: contact options on every page, plain-language copy, clear error messages.
Responsiveness: fluid layout from 320px to 2560px wide.

03Site map

Homehome.html

Clinic Services & treatmentssubtopic1.html Doctors & smile gallerysubtopic2.html Visit ussubtopic3.html

Project menu Planning & designplanning-design.html Reflection & AI reportreflection-ai-report.html Project overviewoverview.html

From any page Patient portal (demo dialog)log in · sign up · book · receipt · status

04User journey map

A new patient’s route from arriving on the site to leaving with a booking.

Arrive
Lands on Home and sees the clinic, whether it is open now, and how to call.
Explore
Reads the treatments on Services and checks the doctors and published results.
Register
Fills in the registration form; mistakes are explained next to each field.
Sign up
Continues into the portal with the details pre-filled and sets a password.
Book
Chooses a treatment, doctor, date and time, then reviews and confirms.
Leave
Keeps the receipt reference, checks the countdown, and uses Visit us for directions.

05Low-fidelity wireframes

Desktop wireframes for all seven pages. Each collapses to a single column on phones.

1. Homehome.html
2. Services & treatmentssubtopic1.html
3. Doctors & smile gallerysubtopic2.html
4. Visit ussubtopic3.html
5. Planning & designplanning-design.html
6. Reflection & AI reportreflection-ai-report.html
7. Project overviewoverview.html

06High-fidelity mockups

Screenshots of the finished pages, captured from the site itself.

Screenshot of the Services page on desktop — Services, desktop.

Screenshot of the patient portal booking step on a phone — Patient portal, phone.

Screenshot of the Doctors page on desktop — Doctors & smile gallery, desktop.

Screenshot of the Visit us page on desktop — Visit us, desktop.

07UI style guide

Colour palette

PrimaryNavy#01357E
SecondaryMidnight#0A1E42
AccentGold#FAC007
NeutralPorcelain & Slate#FBFCFE · #4A5A78

Typography

Heading font: Outfit, weight 500
Body font: Figtree, weight 400, line height 1.65
Arabic: IBM Plex Sans Arabic · مركز العرادي

Buttons

Text link

Cards

Doctors use borderless portrait “cards”: a 4:5 photo, a rule that turns gold on hover, then name, Arabic name and role.

Dr. Noor Abbas

General Dentist

Navigation bar

Sticky header with the logo tile, five links with a gold underline for the current page, the phone number on wide screens, and a navy “Book appointment” button. On phones, a full-screen menu and a bottom action bar.

Forms

First name

First name must be at least 3 characters.

08Responsive design plan

Device	Width	Layout
Mobile	320 to 767px	Single column; photo above the headline; full-screen menu; bottom action bar (Call, WhatsApp, Book); doctors swipe sideways; portal fills the screen.
Tablet	768 to 991px	Two-column information and form rows; photos still above text in heroes; mobile menu.
Desktop	992px and wider	Full navigation bar; asymmetric two-column sections; sticky treatment titles and contents lists; container capped at 78rem so lines stay readable on large screens.

09AI utilisation plan

The brief requires at least three AI tools. AI is used only in the development process; the website itself has no AI features.

AI tool	Purpose of usage	Expected outcome
To be completed by the team: list the tools you actually used

10AI documentation

AI documentation table
AI tool	Purpose	Prompt used	Output generated	Modifications made
To be completed by the team from your own AI usage log

11Ethical & legal best practices

Permission: The clinic’s owner gave the team permission to use the clinic’s name, logo, photographs and published material for this university project.
Honest presentation: The site states in the footer and project section that it is a university redesign concept, not the clinic’s official website.
Accurate information: Every fact comes from the clinic’s website, Google Maps listing or Instagram, or was confirmed by the owner. No doctors’ qualifications, prices, treatments, testimonials or medical claims were invented. Service descriptions are general and avoid promising results.
Image credits: Clinic photographs, before/after cases and doctor portraits: Alaradi Dental & Cosmetic Center (alaradidental.com and @alaradidental on Instagram), used with permission. Video: Medical BH on YouTube, embedded rather than copied. Insurer names are shown as text, not logos.
Patient privacy: Before/after images are the clinic’s own published cases; no patients are named or described beyond the treatment shown.
Visitor data: The registration form and patient portal are demonstrations. Nothing is sent to the clinic or any server; demo data is kept only in the browser tab and cleared when it closes; passwords are never stored in plain text.
Fonts & code: Outfit, Figtree and IBM Plex Sans Arabic are licensed under the SIL Open Font License. All code is original; no templates or frameworks were copied.
AI use: AI tools used during development are documented above, as the brief requires.
Accessibility: Designed to WCAG 2.1 AA: contrast, labels, keyboard access, alt text and reduced motion.

Project overview.