Dr.Talk Online Medical Course Platform

Over view

Over view

Over view

DKSH aims to redesign their existing online medical learning platform and incorporate features such as instructors, credits, and a fee mechanism in order to replace the traditional process of physical certification. This initiative serves the dual purpose of promoting medical products and optimizing the medical certification steps. As part of the DKSH design team, we are currently working on adding the parent-child site flow as a new requirement.

DKSH aims to redesign their existing online medical learning platform and incorporate features such as instructors, credits, and a fee mechanism in order to replace the traditional process of physical certification. This initiative serves the dual purpose of promoting medical products and optimizing the medical certification steps. As part of the DKSH design team, we are currently working on adding the parent-child site flow as a new requirement.

DKSH aims to redesign their existing online medical learning platform and incorporate features such as instructors, credits, and a fee mechanism in order to replace the traditional process of physical certification. This initiative serves the dual purpose of promoting medical products and optimizing the medical certification steps. As part of the DKSH design team, we are currently working on adding the parent-child site flow as a new requirement.

Client

DKSH

team

UI/UX : Steven 

PM : Zoe Chen

Practices

Concept development
UX strategy
User flows
User experience
User interface

Process

Process

Process

Since joining the DKSH UI design team, I have been responsible for the following areas:

  1. Parent-child website navigation

  2. Banner and homepage layout design

Since joining the DKSH UI design team, I have been responsible for the following areas:

  1. Parent-child website navigation

  2. Banner and homepage layout design

Since joining the DKSH UI design team, I have been responsible for the following areas:

  1. Parent-child website navigation

  2. Banner and homepage layout design

Defining
requirements

UI/UX Design

Cooperate
with engineer

Dr.Talk Online Medical Course Platform

Project​

The parent-child navigation bar is a feature of DKSH that provides quick access to navigate between related websites. Users can easily launch the navigation to access parent and child websites.

Challenge :

Through user interviews and competitive analysis, I discovered that the parent-child navigation interfaces in the market are predominantly presented as widgets. The client wishes to have a highly flexible and visually appealing solution that does not occupy too much screen space. Therefore, I need to ensure that the navigation website offers expandability and ease of use while also considering the impact on web page readability.

Solution:

By utilizing collapsible labels and implementing pagination, the navigation can be displayed as needed and maintains high expandability. This solution meets the client's requirements and ensures an optimal user experience without compromising web page readability.

Solution :

By utilizing collapsible labels and implementing pagination, the navigation can be displayed as needed and maintains high expandability. This solution meets the client's requirements and ensures an optimal user experience without compromising web page readability.

Proposal

Proposal

Based on the client's requirements, I have provided four visual design options :

Based on the client's requirements, I have provided four visual design options :

Option 1 :

Option 1 :

Homepage Section - Visual Guidance

Using medical-related visuals to guide users to the parent site, where they can instantly access website information.

Homepage Section - Visual Guidance

Using medical-related visuals to guide users to the parent site, where they can instantly access website information.

Option 2 :

Option 2 :

Centered Label (mother to child)

A visually guided experience from bottom to top, where the visual cues seamlessly guide the user upon expansion. The visual centering ensures balance in the overall visual hierarchy.

Centered Label (mother to child)

A visually guided experience from bottom to top, where the visual cues seamlessly guide the user upon expansion. The visual centering ensures balance in the overall visual hierarchy.

Option 3 :

Option 3 :

Page Label

Using a Z-pattern reading approach, the tabs are easily recognizable and cover less content.

Page Label

Using a Z-pattern reading approach, the tabs are easily recognizable and cover less content.

Option 4 :

Option 4 :

Floating Widget : Chat bot
By clicking to expand, users can access the CTA of the parent site for redirection.

Floating Widget : Chat bot
By clicking to expand, users can access the CTA of the parent site for redirection.

Steven Space

Project

About

切換中文

Steven Space

Project

About

切換中文

Steven Space

Project

About

切換中文

Steven Space

Project

About

切換中文

Steven Space

Finally, the client chose the option 2 : centered tab solution.

Finally, the client chose the option 2 : centered tab solution.

Back-and UI/UX

Back-and UI/UX

Proposal

Proposal

Based on the client's requirements, I have provided four visual design options :

Based on the client's requirements, I have provided four visual design options :

Option 1 :

Option 1 :

Homepage Section - Visual Guidance

Using medical-related visuals to guide users to the parent site, where they can instantly access website information.

Homepage Section - Visual Guidance

Using medical-related visuals to guide users to the parent site, where they can instantly access website information.

Option 2 :

Option 2 :

Centered Label (mother to child)

A visually guided experience from bottom to top, where the visual cues seamlessly guide the user upon expansion. The visual centering ensures balance in the overall visual hierarchy.

Centered Label (mother to child)

A visually guided experience from bottom to top, where the visual cues seamlessly guide the user upon expansion. The visual centering ensures balance in the overall visual hierarchy.

Option 3 :

Option 3 :

Page Label

Using a Z-pattern reading approach, the tabs are easily recognizable and cover less content.

Page Label

Using a Z-pattern reading approach, the tabs are easily recognizable and cover less content.

Option 4 :

Option 4 :

Floating Widget : Chat bot
By clicking to expand, users can access the CTA of the parent site for redirection.

Floating Widget : Chat bot
By clicking to expand, users can access the CTA of the parent site for redirection.

Finally, the client chose the option 2 : centered tab solution.

Finally, the client chose the option 2 : centered tab solution.

Back-and UI/UX

Back-and UI/UX