challenges course coordinator: edward chew, dr. …...mobile app/ server-side development •lack of...

1
Software Development of Dialysis User Tracking Ecosystem IE3100R Systems Design Project AY2018/2019 Group 8 Team Members: Boh Ze Jun | Kelvin Chan Boon Chong | Li Rui | Sie Jun Min Nicholas | Zhang Yihan Supervising Professors: Dr. Yap Chee Meng Advent Access Supervisor: Jo Ern, Ye Hongye Course Coordinator: Edward Chew, Dr. Bok Shung Hwee Background Information Company Background Advent Access is a medical technology startup supported by A*STAR and Stanford Biodesign, that seeks to improve the quality of life for terminal-stage kidney disease patients by allowing them to perform self-cannulation from their homes at an affordable price. Flagship Product Their flagship product, “av-Guardian”, is a first-of-its-kind subcutaneous device embedded under the skin that creates a guiding track to optimally access an arteriovenous fistula (AVF) without touching the dialysis vein. It aims to provide a reliable way of vascular access in order to make long-term hemodialysis therapy comfortable and pain-free. Front-End iOS Development Limitations and Constraints Areas for Improvement and Recommendations Conclusion Our journey took us from design conceptualisation to the final product, which features a fully functional iOS mobile app successfully connected to a server database via an application programming interface (API) we built ourselves. After 2 iterations with user acceptance testing, the management accepted our final prototype and has developed action plans to further develop our product and implement some of our recommendations, taking into account the limitations and constraints that we faced during the development stages. Frequent and productive discussions with the company management and our supervisors helped us to focus our efforts on developing features which are critical and realistic to achieve within our expertise and time constraint. Having been involved in the full-stack development process, we were able to provide viable recommendations to the company on how to solve potential and imminent issues they might run into. We provided insights on the potential benefits of building a digital ecosystem around this app and gave recommendations on how the company could further develop the app. Conclusion and Recommendation Functionalities Patient Medical History: Display on patient record and medical information, or create new data entry. AVF Mapping: Step-by-step guide on how to take a photo of forearm in the correct position for self-cannulation Site Addition: Guide patients to select potential sites for self-cannulation. Site Selection: Guide patient to choose the most suitable potential site for each device. Warning when not all criteria are fulfilled. Site Marking: Guides patients through image uploading for device sites. Site Validation: DIsplay past cannulation information on the respective sites for patients. Device Selection: One device is recommended for each of the selected arterial and venous sites Application of Human Factor Engineering “Fresh White and Green Hues” color scheme provides a relaxing feeling. Interactive displays with gesture & tactile feedback specially designed to enhance usability. Large font size and buttons for elderly users. Minimal display of useful information reduces clutter and confusion Pop-up warnings and red crosses to alert users to errors or areas that need attention Brainstorming Self-learning Execution Experimentation Modification Survey Insights from Prototype I How do you feel about the information displayed? As a patient, is the guide informative and clear? Pleasant visuals (colours, sizes, positionings, etc.) Adequate display of useful information Smooth transitions between different pages Usability and overall user experience 1. Continuous user testing and optimisation process 2. Renew purchase for a legitimate web server certificate to allow secure access and prevent unexpected server-crashes 3. Upgrade database server capacity to avoid data loss 4. Develop similar app for Android operating systems to expand market reach 5. Expand user group to include doctors and nurses with user-customized app 6. Explore using web servers with integrated content delivery network (CDN) to store larger files like videos and images Clear guidance is provided for users Insights from Survey of 50 respondents on UI/UX Design 1. The self-needling steps are not clear enough and may cause confusion. 2. Small font size and images may cause some of the app pages to appear cluttered. 3. Insufficient tactile feedback from objects. 4. Visible lag when trying to take pictures and upload them in the app. 1. Lack of technical expertise in app and server development means that codes can still be optimised and new techniques can be tested 2. Existing database has limited capacity of 12Gb 3. Existing web server certificate has expired 4. API designed for webmin and incompatible with other web servers 5. The existing mobile app is not runs only on iOS operating system and cannot run on Android phones Problem Description Back-end Server Development Project Overview Final Product & Achievement • Data Analysis • Problem-solving skills • Inexperience in mobile app/ server-side development • Lack of resources online • Lack of proper guidance or documentation from company • Patients: Improved convenience (reduce time and hassle) • Full-stack development of a mobile app • Working web service (API) • Data Storage (Text + Media Upload) • Successful connection of app to the API Achievement Benefits Application of ISE Knowledge Challenges • Medical facilities: Reduction in manpower needed for clerical task like data recording • Application of programming knowledge • Human Factors Engineering • Systems Dynamic Thinking Automated recommendation of device for the arterial / venous site based depth values User can still change selection to other devices using UIPickerView ‘Submit’ button enabled upon completion of all 7 fields Report automatically generated based on the submission Solution? Final Display High smartphone penetration among elderly Enables access anytime, anywhere Minimalistic & intuitive UI Developing Mobile App Defensive Programming using modular approach/ POST method/ Try-catch functions/ unique key verification Perform relevant data queries Create/ Read/ Update/Delete Automatic compression of image resolution for fast loading Automatically generate email reports Perform User Authentication Use web server for cloud storage A P I Database Server A P I Prototype 2 Lacking in functions & features Limited capacity Web user interface no intuitive Limitation of Web Domain Advent Access needs a convenient way for surgeons and patients to record large amounts of data from their clinical trials. Currently, users can access an online platform to record this data but it has many limitations as seen in the diagram above. Our solution to overcoming these limitations is the full-stack development of a mobile app and database server. Prototype 1 Generate automated emails from the web server Encode data from database as JSON User login authentication CRUD database operations (Create, Read, Update, Delete) Decode JSON-type data from the mobile app Key API functions Implemented API Testing using POSTMAN Defensive Programming & Security Features Defensive Programming Parameter validation, Try-catch functions, Duplicate entry prevention, Email validation using SMTP server Security Measures Verification keys required for database connection, Privacy protection using POST method, Rollback unauthorised changes Modularized API Structure •Easier to debug and isolate different functions into their own API endpoints •Increasing app security by making it more difficult to hack Universal File Storage and Retrieval •Turning web server domain into a cloud storage Content Delivery Network (CDN) •Enable storage of universal file formats and frees up storage on database Automatic Compression of stored images •Compression of high resolution photos to reduce storage needs •Speed up downloading of images database Automatic URL generation for stored files •Reference to each uploaded file is stored in mySQL relational database •Easier query and data retrieval Automated Email Generation •Sends welcome email from web server with login details when a new user is created •Generates email report on request containing the data entered into the database Linkage to iOS Mobile App achieved •Connects to the database via the API endpoints •Able to perform basic operations (create/ read/upload/delete) •Receives correct responses from database Front-end Achievements Activates an error popup (using UIAlertController) when information is entered incorrectly User Login Displays patient records Display changes accordingly to selection Dashboard Root navigation Progress check ‘Green ticks’ for completed ‘Submit’ button hidden until all fields completed Error message displayed if incomplete ‘Reset’ button to clear inputs Main Menu Summary of medical history Information displayed in a neat & readable format Patient History Users can select fistula type Visual feedback by changing colors when selection is pressed AVF Mapping Detailed step-by-step guide on taking photos Navigate by tapping ‘<Previous’ & ‘Next>’ Swipe gesture enabled Ability to exit anytime Tutorial Ultrasound mapping image displayed Addition of sites by pressing ’+’ icon Scroll view allows addition up to 8 sites User inputs reflected in green display Tapping ‘View images’ creates enlarged popups Dynamic site marking on the ultrasound image to indicate position of site based on user input details ‘Skip’ button to quickly add new potential sites Site Addition Site selection enabled using UIPickerView Conflicting sites automatically highlighted in red ‘Verify’ button enabled when all selections are valid and unique ‘Verify’ will compute differences in distances to check if requirements are met Unmet requirements prompted with warning message Any change in selections will force user to verify the sites again as a precaution Site Selection Displays initially greyed out Tapping ‘Add’ returns user to site validation page with green display outcome of cannulation tagged as “Pass” or “Fail” using a UILabel Site Selection

Upload: others

Post on 22-May-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Challenges Course Coordinator: Edward Chew, Dr. …...mobile app/ server-side development •Lack of resources online •Lack of proper guidance or documentation from company •Patients:

Software Development of DialysisUser Tracking Ecosystem

IE3100R Systems Design Project AY2018/2019Group 8 Team Members: Boh Ze Jun | Kelvin Chan Boon Chong | Li Rui | Sie Jun Min Nicholas | Zhang

YihanSupervising Professors: Dr. Yap Chee Meng

Advent Access Supervisor: Jo Ern, Ye HongyeCourse Coordinator: Edward Chew, Dr. Bok Shung Hwee

Background InformationCompany Background

Advent Access is a medical technology startup supported by A*STAR and Stanford Biodesign,

that seeks to improve the quality of life for terminal-stage kidney disease patients by

allowing them to perform self-cannulation from their homes at an affordable price.

Flagship Product

Their flagship product, “av-Guardian”, is a first-of-its-kind subcutaneous device embedded

under the skin that creates a guiding track to optimally access an arteriovenous fistula (AVF)

without touching the dialysis vein. It aims to provide a reliable way of vascular access in

order to make long-term hemodialysis therapy comfortable and pain-free.

Front-End iOS Development

Limitations and Constraints Areas for Improvement and Recommendations

Conclusion

Our journey took us from design conceptualisation to the final product, which features a fully functional iOS mobile app successfully connected to a server database

via an application programming interface (API) we built ourselves. After 2 iterations with user acceptance testing, the management accepted our final prototype and

has developed action plans to further develop our product and implement some of our recommendations, taking into account the limitations and constraints that we

faced during the development stages. Frequent and productive discussions with the company management and our supervisors helped us to focus our efforts on

developing features which are critical and realistic to achieve within our expertise and time constraint. Having been involved in the full-stack development process,

we were able to provide viable recommendations to the company on how to solve potential and imminent issues they might run into. We provided insights on the

potential benefits of building a digital ecosystem around this app and gave recommendations on how the company could further develop the app.

Conclusion and Recommendation

Functionalities

Patient Medical History: Display on patient record

and medical information, or create new data entry.

AVF Mapping: Step-by-step guide on how to take a

photo of forearm in the correct position for

self-cannulation

Site Addition: Guide patients to select potential

sites for self-cannulation.

Site Selection: Guide patient to choose the most

suitable potential site for each device. Warning

when not all criteria are fulfilled.

Site Marking: Guides patients

through image uploading for

device sites.

Site Validation: DIsplay past

cannulation information on the

respective sites for patients.

Device Selection: One device is

recommended for each of the

selected arterial and venous

sites

Application of Human Factor Engineering

● “Fresh White and Green Hues” color scheme

provides a relaxing feeling.

● Interactive displays with gesture & tactile

feedback specially designed to enhance usability.

● Large font size and buttons for elderly users.

● Minimal display of useful information reduces

clutter and confusion

● Pop-up warnings and red crosses to alert users to

errors or areas that need attention

Brainstorming Self-learning Execution Experimentation Modification

Survey Insights from Prototype I

How do you feel about the information displayed?

As a patient, is the guide informative and clear?

Pleasant visuals (colours, sizes, positionings, etc.)

Adequate display of useful information

Smooth transitions between different pages

Usability and overall user experience

1. Continuous user testing and optimisation process

2. Renew purchase for a legitimate web server certificate to allow secure access

and prevent unexpected server-crashes

3. Upgrade database server capacity to avoid data loss

4. Develop similar app for Android operating systems to expand market reach

5. Expand user group to include doctors and nurses with user-customized app

6. Explore using web servers with integrated content delivery network (CDN) to

store larger files like videos and images

Clear guidance is provided for users

Insights from Survey of 50 respondents on UI/UX Design

1. The self-needling steps are not clear enough and may cause confusion.

2. Small font size and images may cause some of the app pages to appear cluttered.

3. Insufficient tactile feedback from objects.

4. Visible lag when trying to take pictures and upload them in the app.

1. Lack of technical expertise in app and server development means

that codes can still be optimised and new techniques can be tested

2. Existing database has limited capacity of 12Gb

3. Existing web server certificate has expired

4. API designed for webmin and incompatible with other web servers

5. The existing mobile app is not runs only on iOS operating system

and cannot run on Android phones

Problem Description

Back-end Server Development

Project Overview

Final Product & Achievement

• Data Analysis

• Problem-solving skills• Inexperience in

mobile app/ server-side

development

• Lack of resources online

• Lack of proper guidance or

documentation from company

• Patients: Improved convenience (reduce time and hassle)

• Full-stack development of a mobile app

• Working web service (API)• Data Storage (Text + Media

Upload)• Successful connection of app to the API

Achievement Benefits

Application of ISE

KnowledgeChallenges

• Medical facilities: Reduction in manpower needed for clerical task like data recording

• Application of

programming knowledge

• Human Factors Engineering

• Systems Dynamic Thinking

• Automated recommendation of device for the arterial / venous site based depth values

• User can still change selection to other devices using UIPickerView

• ‘Submit’ button enabled upon completion of all 7 fields• Report automatically generated based on the submission

Solution?

Final Display

High smartphone penetration among elderly

Enables access anytime,anywhere

Minimalistic & intuitive UI

Developing Mobile App

Defensive Programming using modular approach/ POST method/ Try-catch

functions/ unique key verification

Perform relevant data queries

Create/ Read/ Update/Delete

Automatic compression of image resolution for fast

loading

Automatically generate email

reports

Perform User Authentication

Use web server for cloud storage

A P I

DatabaseServer

A P I

Prototype 2

Lacking in functions

& features

Limitedcapacity

Web user interface no intuitive

Limitation of Web Domain

Advent Access needs a convenient way for surgeons and patients to record large amounts of data from

their clinical trials. Currently, users can access an online platform to record this data but it has many

limitations as seen in the diagram above. Our solution to overcoming these limitations is the full-stack

development of a mobile app and database server.

Prototype 1

Generate automated emails from

the web server

Encode data from

database as JSON

User login authentication

CRUD database operations

(Create, Read, Update, Delete)

Decode JSON-type data from the mobile

app

Key API functions Implemented API Testing using POSTMAN Defensive Programming & Security Features

Defensive Programming

Parameter validation, Try-catch functions, Duplicate entry prevention, Email validation using SMTP server

Security Measures

Verification keys required for database connection, Privacy protection using POST method, Rollback unauthorised changes

Modularized API Structure

•Easier to debug and isolate different

functions into their own API endpoints

•Increasing app security by making it more

difficult to hack

Universal File Storage and Retrieval

•Turning web server domain into a cloud

storage Content Delivery Network (CDN)

•Enable storage of universal file formats and

frees up storage on database

Automatic Compression of stored images

•Compression of high resolution photos to

reduce storage needs

•Speed up downloading of images database

Automatic URL generation for stored files

•Reference to each uploaded file is stored in

mySQL relational database

•Easier query and data retrieval

Automated Email Generation

•Sends welcome email from web server with

login details when a new user is created

•Generates email report on request containing

the data entered into the database

Linkage to iOS Mobile App achieved

•Connects to the database via the API endpoints

•Able to perform basic operations

(create/ read/upload/delete)

•Receives correct responses from database

Front-end Achievements

Activates an error popup (using UIAlertController) when information is entered incorrectly

User Login• Displays

patient records

• Display changes accordingly to selection

Dashboard• Root navigation• Progress check• ‘Green ticks’ for completed • ‘Submit’ button hidden until all fields

completed• Error message displayed if incomplete• ‘Reset’ button to clear inputs

Main Menu

• Summary of medical history

• Information displayed in a neat & readable format

Patient History

• Users can select fistula type

• Visual feedback by changing colors when selection is pressed

AVF Mapping• Detailed step-by-step

guide on taking photos

• Navigate by tapping ‘<Previous’ & ‘Next>’

• Swipe gesture enabled

• Ability to exit anytime

Tutorial• Ultrasound mapping image displayed• Addition of sites by pressing ’+’ icon• Scroll view allows addition up to 8 sites• User inputs reflected in green display• Tapping ‘View images’ creates enlarged popups• Dynamic site marking on the ultrasound image to indicate position of site

based on user input details • ‘Skip’ button to quickly add new potential sites

Site Addition

• Site selection enabled using UIPickerView• Conflicting sites automatically highlighted in red• ‘Verify’ button enabled when all selections are valid and unique• ‘Verify’ will compute differences in distances to check if

requirements are met • Unmet requirements prompted with warning message• Any change in selections will force user to verify the sites again

as a precaution

Site Selection• Displays initially greyed out• Tapping ‘Add’ returns user to

site validation page with green display

• outcome of cannulation tagged as “Pass” or “Fail” using a UILabel

Site Selection