Product design
Normalization branding
A brand new departure based on specifications and branding.
All designs are based on the Hi Design system, maintaining a high level of consistency in visual style and interaction with the integrated version. During the design process, new component styles that emerged from the new interconnected hospital were incorporated.
Click the cover image below to view the Figma source file directly.
Flexible Configuration
Various styles of functional modules Backend upgrade
Configurable functional modules
The patient-side needs to support a flexible configuration scheme, with the homepage, doctor homepage, and personal center, each functional/service module supporting multiple interaction methods, field display formats, and more.
Example of configuration
Taking the 'Health Preferred' module as an example: it needs to support one in a row, two in a row, multiple drive styles, and the configuration of different price field styles.
Interaction & Experience Design
Experience Design Business Connection
1. Product Experience Design
Taking the medical consultation record as an example: the focus of the doctor and the patient is different, and it cannot be generalized with the same style design.
Prototype
The consultation records displayed in the prototype design highlight the doctor's information and the patient's condition description on each card. The order details consist of a chronological record of the patient's information and payment details. While the basic functionality is implemented, it does not meet the user's needs.
Design draft
Different statuses of consultation records should not only clearly display the order status but also the content that patients are genuinely concerned about. In the pending payment status, when patients enter the record page, they need to quickly identify which payment is required. They are more interested in which doctor handled their case and what the condition was. Once the order is completed, when patients open the records for review, over 80% of their inquiries are about what their last condition was, what medications the doctor prescribed, and the diagnosis. Therefore, the order details need to display the doctor's diagnosis, recommendations, and prescription, while minimizing the information about the patient and payment details. At the same time, a doctor card should be included so that patients can easily jump back to the doctor's homepage for another consultation, creating a closed business loop.
2. Different interaction designs for different businesses and terminals.
Since this product involves multiple product managers who are not responsible for different businesses, the terminal shells for the doctor and patient sides are also managed by different product managers. During the design process, it is essential to consider the consistency of common functionalities that may exist across different businesses, and whether businesses with overlaps can achieve a smooth connection. Integrating different businesses with various terminals to ensure that the usage experience across different businesses and scenarios is complete and seamless on the same terminal is crucial.
Design page display
