KiyoClear

KiyoClear - Perfect Web App for medical technology firm

2022
Web App
https://kiyoclear.com.tw/

Summary

SheepMedical is a medical technology firm in Japan that focuses on the digital transformation of orthodontics and preventative care. The company has expanded its business to Taiwan with “Kireilign,” a product/ brand that breaks the stereotype that orthodontics with clear braces are expensive. Kireilign extends the digital nature by offering users with app “KireiCare” to move away the hassles rising from the process with features such as the journal to record the progress; the gadget to track how many hours a user wears the clear braces a day; and a countdown timer to remind users when they should replace the braces or adjust the expander, providing patients with a useful tool and a piece of mind.

Background and challenges

The very first task was to complete the user flow, depicting the journey from signup to each feature of the app. KireiCare has 5 primary features which are the tracking gadget, the countdown timer for braces and expander, the journal, and the clinic checkup reminder. Although the app does not have as many features as a mobile app, it has quite a few interesting user scenarios still. For example, there are 3 scenarios to include for using the countdown timer.

They are A) the scenario where a user does replace the clear braces and updates the log on time and B) the scenario where a user replaces it but forgets to log and the last C) the one where a user neither moves on to the next braces nor logs it. Intuitively, you’d want to have a different flow for each scenario so each of them would have its own branches that lead to different screens. Instead of that, we deployed design thinking and merged different scenarios with one screen where we display, by default, the next date the user should replace the braces assuming that the user has scenario A. The user would still be able manually to pick the date for their next braces in case the user is in scenario B or C. Through a series of tests, the user flow was gradually completed.

Process and results

KireiCare App was getting solid and encompassing different scenarios through a series of tests and optimization. Backend-wise, we adopt a CRM to display data with a user interface, making it easier and user-friendly for admins to manage. To us, KireiCare is also a technically iconic project. We utilize React, Chakra UI and PHP in our development, complete the integration with SMS and one with LINE, and customize CRM features, putting it all together to build a web app.

KiyoClear
KiyoClear

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.