2025/3 - 2025/4
2025/3 - 2025/4
Splendid Dental Web Design
Splendid Dental Web Design
Overview
Overview
This project translates a dental clinic’s brand identity into a structured website experience.
Starting from branding, I defined the information architecture and created mid-fidelity wireframes to organize service information into a clear and intuitive user journey.
This project translates a dental clinic’s brand identity into a structured website experience.
Starting from branding, I defined the information architecture and created mid-fidelity wireframes to organize service information into a clear and intuitive user journey.
Client
Client
Splendid Dental Clinic
Splendid Dental Clinic
My role
My role
• Brand design
• Information architecture
• Mid-fidelity wireframing
• Brand design
• Information architecture
• Mid-fidelity wireframing
Team
Team
Jennifer Jiang
Chen Sung
Jennifer Jiang
Chen Sung
From Branding to Website
From Branding to Website
The challenge was shifting from a branding-focused approach to a structured website experience while balancing both client goals and user needs.
The challenge was shifting from a branding-focused approach to a structured website experience while balancing both client goals and user needs.
💭 The client’s thought
Aimed to create a digital presence that feels professional and refined, without being overly luxurious, while still remaining approachable to patients. At the same time, the website needed to support key user actions, such as easily booking appointments or finding essential information.
💭 The client’s thought
Aimed to create a digital presence that feels professional and refined, without being overly luxurious, while still remaining approachable to patients. At the same time, the website needed to support key user actions, such as easily booking appointments or finding essential information.
This required translating brand identity into information architecture and content hierarchy, while ensuring the experience supports both business goals and patient usability.
This required translating brand identity into information architecture and content hierarchy, while ensuring the experience supports both business goals and patient usability.
Brand Foundation
Brand Foundation
Cream
Cream
Cream
#ECE2D8
#ECE2D8
#ECE2D8
Ivory
Ivory
Ivory
#F5F5F5
#F5F5F5
#F5F5F5
White
White
White
#FFFFFF
#FFFFFF
#FFFFFF
Dark Gray
Dark Gray
Dark Gray
#5B5B5B
#5B5B5B
#5B5B5B
#D8AA7D
#D8AA7D
#D8AA7D
Gold
Gold
Gold
Aa
Aa
Aa
Headlings
Headlings
Headlings
Body
Body
Body
Zen Maru Gothic
Zen Maru Gothic
Zen Maru Gothic
Noto Sans
Noto Sans
Noto Sans
Elements
Elements
Elements
Icons
Icons
Icons
Logo
Logo
Logo
+
+
+
=
=
=
+
+
+
Brand foundation
Brand foundation
Brand foundation
The brand identity is centered around the concept of “star glow, smile flow” symbolizing how patients can regain a confident and radiant smile.
The logo combines the letter “S” with a starburst element, subtly integrating the form of a smile and dental structure to reflect both expertise and aesthetic care. A warm gold and ivory color palette was used to express refined technique and a sense of warmth.
These brand principles were not only visual decisions, but also informed the website experience—guiding a design direction that feels trustworthy, elegant, and approachable, without overwhelming users.
The brand identity is centered around the concept of “star glow, smile flow” symbolizing how patients can regain a confident and radiant smile.
The logo combines the letter “S” with a starburst element, subtly integrating the form of a smile and dental structure to reflect both expertise and aesthetic care. A warm gold and ivory color palette was used to express refined technique and a sense of warmth.
These brand principles were not only visual decisions, but also informed the website experience—guiding a design direction that feels trustworthy, elegant, and approachable, without overwhelming users.
Information Architecture
Information Architecture
+
+
=
=
+
+
⭐️Trust-driven navigation
Doctor profiles are prioritized to support patient decision-making.
⭐️Trust-driven navigation
Doctor profiles are prioritized to support patient decision-making.
⭐️Action-oriented structure
Booking and LINE contact are consistently accessible across the experience.
⭐️Action-oriented structure
Booking and LINE contact are consistently accessible across the experience.
⭐️Action-oriented structure
Booking and LINE contact are consistently accessible across the experience.
⭐️Action-oriented structure
Booking and LINE contact are consistently accessible across the experience.
⭐️Action-oriented structure
Booking and LINE contact are consistently accessible across the experience.
⭐️Action-oriented structure
Booking and LINE contact are consistently accessible across the experience.
Information Architecture
Information Architecture
Supporting User Decision-Making Through Structure!
The information architecture was designed around how patients make decisions, rather than internal clinic structure.
Supporting User Decision-Making Through Structure!
The information architecture was designed around how patients make decisions, rather than internal clinic structure.
Key actions such as booking and consultation are always accessible
Key actions such as booking and consultation are always accessible
Doctor profiles are prioritized to build trust early
Doctor profiles are prioritized to build trust early
Service categories are simplified to support understanding
Service categories are simplified to support understanding
The structure ensures that essential information—such as clinic hours, location, and contact channels—is always accessible, while supporting quick access to consultation and booking in alignment with the client’s goals.
Also in Taiwan’s dental market, patients often choose clinics based on the doctor’s experience and reputation, which is why the Doctor section is positioned as a key entry point.
The structure ensures that essential information—such as clinic hours, location, and contact channels—is always accessible, while supporting quick access to consultation and booking in alignment with the client’s goals.
Also in Taiwan’s dental market, patients often choose clinics based on the doctor’s experience and reputation, which is why the Doctor section is positioned as a key entry point.
Wireframing
Wireframing
Mid-fidelity wireframes were used to define layout, hierarchy, and user flow across key pages.
Special attention was given to guiding users toward key actions, such as booking or consultation. Call-to-action buttons were consistently placed across pages, including integration with the clinic’s LINE contact channel.
Important information such as clinic hours and location was persistently displayed in the footer, ensuring users can easily access essential details at any point in their journey.
Mid-fidelity wireframes were used to define layout, hierarchy, and user flow across key pages.
Special attention was given to guiding users toward key actions, such as booking or consultation. Call-to-action buttons were consistently placed across pages, including integration with the clinic’s LINE contact channel.
Important information such as clinic hours and location was persistently displayed in the footer, ensuring users can easily access essential details at any point in their journey.
+
+
=
=
+
+
台北市內湖區民權東路六段485､487號 1F
台北市內湖區民權東路六段485､487號 1F
02-26340288
02-26340288
© Splendid Clinic All Right Reserved.
© Splendid Clinic All Right Reserved.
design by dentall
design by dentall
友院
友院
誠樂牙醫診所
誠樂牙醫診所
大翔牙醫診所
大翔牙醫診所
官方 LINE
官方 LINE
治療項目
治療項目
兒童牙科
兒童牙科
齒顎矯正
齒顎矯正
齒顎矯正
齒顎矯正
顯微根管
顯微根管
營業資訊
營業資訊
一般牙科
一般牙科
星 ◦ 美學
星 ◦ 美學
團隊成員
團隊成員
立即
立即
預約
預約
診所理念
診所理念
看醫師介紹
看醫師介紹
台北市內湖區民權東路六段485､487號 1F
台北市內湖區民權東路六段485､487號 1F
02-26340288
02-26340288
關於我們
關於我們
醫師介紹
醫師介紹
治療項目
治療項目
官方 LINE
官方 LINE
© Splendid Clinic All Right Reserved.
© Splendid Clinic All Right Reserved.
design by dentall
design by dentall
友院
友院
誠樂牙醫診所
誠樂牙醫診所
大翔牙醫診所
大翔牙醫診所
官方 LINE
官方 LINE
Homepage
Homepage
+
+
=
=
+
+
About Us
About Us
關於我們
關於我們
立即
立即
預約
預約
診所環境
診所環境
台北市內湖區民權東路六段485､487號 1F
台北市內湖區民權東路六段485､487號 1F
02-26340288
02-26340288
台北市內湖區民權東路六段485､487號 1F
台北市內湖區民權東路六段485､487號 1F
02-26340288
02-26340288
© Splendid Clinic All Right Reserved.
© Splendid Clinic All Right Reserved.
design by dentall
design by dentall
友院
友院
誠樂牙醫診所
誠樂牙醫診所
大翔牙醫診所
大翔牙醫診所
官方 LINE
官方 LINE
營業資訊
營業資訊
About Us
About Us
關於我們
關於我們
醫師介紹
醫師介紹
治療項目
治療項目
官方 LINE
官方 LINE
+
+
=
=
+
+
Team
Team
關於我們
關於我們
醫師介紹
醫師介紹
治療項目
治療項目
官方 LINE
官方 LINE
+
+
=
=
+
+
Treatment
Treatment
治療項目
治療項目
立即
立即
預約
預約
台北市內湖區民權東路六段485､487號 1F
台北市內湖區民權東路六段485､487號 1F
02-26340288
02-26340288
© Splendid Clinic All Right Reserved.
© Splendid Clinic All Right Reserved.
design by dentall
design by dentall
友院
友院
誠樂牙醫診所
誠樂牙醫診所
大翔牙醫診所
大翔牙醫診所
官方 LINE
官方 LINE
營業資訊
營業資訊
-
-
-
-
Treatment
Treatment
關於我們
關於我們
醫師介紹
醫師介紹
治療項目
治療項目
官方 LINE
官方 LINE
LINE
Booking access
LINE
Booking access
Primary navigation for key patient needs
(About / Doctors / Services / LINE)
Primary navigation for key patient needs
(About / Doctors / Services / LINE)
Floating CTA / LINE
Persistent booking access for immediate action
Floating CTA / LINE
Persistent booking access for immediate action
Floating CTA / LINE
Persistent booking access for immediate action
Floating CTA / LINE
Persistent booking access for immediate action
Floating CTA / LINE
Persistent booking access for immediate action
LINE
Booking access
LINE
Booking access
LINE
Booking access
LINE
Booking access
LINE
Booking access
Team / Doctors
Doctor visibility to support trust and decision-making
Team / Doctors
Doctor visibility to support trust and decision-making
Our philosophy
Our philosophy
Services
Scannable service categories for quick understanding
Services
Scannable service categories
for quick understanding
Brand slogan + intro
→ Explains the clinic’s philosophy and values
Brand slogan + intro
→ Explains the clinic’s philosophy and values
Clinic environment
(images)
→ Shows the physical space to build trust and comfort
Clinic environment
(images)
→ Shows the physical space to build trust and comfort
Footer
Essential information always accessible (hours, location, contact)
Footer
Essential information always accessible (hours, location, contact)
Footer
Essential information always accessible (hours, location, contact)
Presents doctor photo to build familiarity and trust
Presents doctor photo to build familiarity and trust
Floating CTA / LINE
Persistent booking access for immediate action
Footer
Essential information always accessible (hours, location, contact)
Floating CTA / LINE
Persistent booking access for immediate action
Shows specialties to help users match their needs
Shows specialties to help users match their needs
Displays credentials for credibility
Displays credentials for credibility
Doctor profile
Doctor profile
Floating CTA / LINE
Persistent booking access for immediate action
Process / details section
→ Breaks down complex information into steps
Process / details section
→ Breaks down complex information into steps
Recommended doctors
→ Connects treatment to relevant doctors
Recommended doctors
→ Connects treatment to relevant doctors
LINE
Booking access
Footer
Essential information always accessible (hours, location, contact)
Footer
Essential information always accessible (hours, location, contact)
Footer
Essential information always accessible (hours, location, contact)
Treatment category buttons
→ Allows users to switch between services easily
Treatment category buttons
→ Allows users to switch between services easily
Treatment intro
→ Explains the treatment in a simple and clear way
Treatment intro
→ Explains the treatment in a simple and clear way
“What is this treatment” section
→ Helps users understand unfamiliar procedures
“What is this treatment” section
→ Helps users understand unfamiliar procedures
Footer
Essential information always accessible (hours, location, contact)
Key Design Decisions
Key Design Decisions
🟠️ Designed for action by integrating booking and consultation touchpoints
Call-to-action buttons and LINE contact were consistently placed across pages, making it easy for users to quickly book or inquire at any point in their journey.
🟠️ Designed for action by integrating booking and consultation touchpoints
Call-to-action buttons and LINE contact were consistently placed across pages, making it easy for users to quickly book or inquire at any point in their journey.
🟠️ Ensured essential information is always accessible
Key details such as clinic hours, location, and contact information were persistently displayed to reduce friction and support user confidence.
🟠️ Ensured essential information is always accessible
Key details such as clinic hours, location, and contact information were persistently displayed to reduce friction and support user confidence.
🟠️ Structured content to reduce complexity and improve scanability
Dental services can be difficult to understand, so information was simplified into clear categories and organized with a strong visual hierarchy to support quick comprehension.
🟠️ Structured content to reduce complexity and improve scanability
Dental services can be difficult to understand, so information was simplified into clear categories and organized with a strong visual hierarchy to support quick comprehension.
🟠️ Prioritized doctor profiles as a key navigation entry
In Taiwan’s dental market, patients often choose clinics based on a doctor’s experience and reputation. Highlighting the Doctor section helps build trust early and supports decision-making.
🟠️ Prioritized doctor profiles as a key navigation entry
In Taiwan’s dental market, patients often choose clinics based on a doctor’s experience and reputation. Highlighting the Doctor section helps build trust early and supports decision-making.
Collaboration
Collaboration
I worked closely with the client and a web designer throughout the project to align on both business goals and user needs, ensuring the information structure and design intent were accurately translated into the final website.
I worked closely with the client and a web designer throughout the project to align on both business goals and user needs, ensuring the information structure and design intent were accurately translated into the final website.
What did I learn?
What did I learn?
This project marked a shift from visual design to product thinking, where I began to balance brand expression with usability and business goals.
Working with a real client also helped me understand how to translate stakeholder needs into design decisions while still maintaining a user-centered approach. In future iterations, I would further validate the structure through user testing to refine the experience.
This project marked a shift from visual design to product thinking, where I began to balance brand expression with usability and business goals.
Working with a real client also helped me understand how to translate stakeholder needs into design decisions while still maintaining a user-centered approach. In future iterations, I would further validate the structure through user testing to refine the experience.
© Jennifer Jiang, 2026