CMIS Medical Web-Appliaction Phase 1+2

CMIS-Thumbnail@3x.png

Client

Hospital Authority (HK)

Date

Phase 1 : Jan - May 2019
Phase 2 : March - June 2020

Role

Solo UI/UX Designer with 2 stakeholders

  • User flows

  • UI/UX design

  • Prototyping

  • Usability Testing

UI/UX Tools

Adobe XD | Photoshop | Illustration | Zoom | PowerPoint (Branding Guide)

As Chinese medicine (CM) is more commonly used in Hong Kong, its role in the local healthcare system is becoming increasingly prominent. To encourage and promote computerisation and sharing of health records among CM practitioners, a “Chinese Medicine Information System (CMIS) On-ramp” has been developed to provide a turn-key clinical management system option for adoption by the CM sector at low investment cost.

Throughout the development process I provided UX/UI Recommendations for the whole web-app by critically analyzing the existing user flow’s interactions, conducting usability tests, which allowed me to creating high fidelity prototypes and branding guides base on this process. This UX/UI design project was split between two phases in order to take into account of user feedback in between to allow for adjustments.

 

Design Process

For both phases within this project, the design process have always been performing usability testing and research on the existing system first through UX analysis and user group probing, and then produce an updated user interface and branding guides using prototyping tools for the stakeholder’s reference.

Artboard – 1@3x.png
 

Research: Phase 1 + 2

IMG_6336.JPG

Usability Tests - Phase 1

The Phase 1 CMIS On-ramp workshop was hosted on January 10th and 16th 2019 in order to demonstrate the live prototype to 14 CMPs (6 females & 8 males), attendants are invited to perform use-case testing and comment about all related issues.

During these workshops, 4 participants (1 male & 1 female) at the age range of 30 to 50 are our focus group testing users, both of them claimed to have prior experience in digital management with their own patient record storage systems. Observations and interactions engaged with them help us understand more about their concerns and comments on the prototype.

IMG_8955.PNG

Usability Tests - Phase 2

The Phase 2 CMIS On-ramp workshop was hosted on January 25th and 30th 2020 in order to demonstrate the live prototype to 17 CMPs (7 females & 10 males), due to the situation with COVID-19 the attendants are invited to a virtual meeting environment at their desired location and Zoom were used to perform use-case testing and we asked the participants to comment about all related issues through the use of interviews and questionnaires.

For this usability tests, helpers from ASL as well as HA were briefed to take note of the user’s action as well as task completion status in the form of a cognitive walkthough sheet to fill.

Screenshot+2020-07-24+at+5.22.31+PM.jpg

Usability Report - Generated from Research (Phase 1+2)

Using the feedback and responses from the users, for both Phase 1 and Phase 2 I have identified lists of UX issues associated with each sections, and then delivered them to the client in the form of a usability report as well as recommended designs in order to fix the issues.

Due to time and resource constraints, not all the issues are in the top priority to solve, and ultimately, I have handpick some critical usability issues that required immediate attention to be included in the revampped interface.

 

Phase 2 final design

Landing

CMIS-Landing@3x.png

For the landing page the user could freely select the content and statistics shown in the dashboard by selecting the corresponding informations in the settings page.


Registration

CMIS-Registration@3x.png

Appointment

It was decided while designing the “contact us“ section that it would be better to place it in the middle on the page before reaching the end of the page but not too close to the footer, in order to increase the likelihood of the user subscribing to the website newsletter.

CMIS-Appointment@3x.png

Consultation

CMIS-Consultation@3x.png

Prescription

CMIS-Prescription@3x.png

Treatment

CMIS-Treatment@3x.png

Dispensing

CMIS-Dispensing@3x.png

Payment

CMIS-Payment@3x.png

 

Design Guide

Next
Next

Misc. Works: Automated Systems (HK) Ltd.