UX/UI: SkinInfo App

UX Design, Art Direction, UI

I joined the service design team of a major universities hospital in Philadelphia, as a consultant to lead the UX and UI process of creating a patient mobile app for their Dermatological Oncology Department.

The app’s purpose was to help patients keep track of their potential> current> treated problem areas, with data, photos and diagnostics information collected in one place.

This information could then be used by the patients or their care givers to convey information across different service providers in different geographical areas, as a significant number of these patients were snow birds, who migrated to southern/western climes for the winter, coming back to the Philadelphia area to summer.

Here are some screens for the apps prototype, which was eventually produced using React Native.
skinfo_iphone8-screen1
SKINFO_iphone8-screen2
SKINFO_iphone8-screen3
SKINFO_iphone8-screen4
SKINFO_iphone8-screen5
SKINFO_iphone8-screen6
SKINFO_iphone8-screen7
SKINFO_iphone8-screen8
SKINFO_iphone8-screen9
SKINFO_iphone8-screen10
SKINFO_iphone8-screen11
SKINFO_iphone8-screen12
SKINFO_iphone8-screen13
SKINFO_iphone8-screen14
SKINFO_iphone8-screen15
SKINFO_iphone8-screen16
SKINFO_iphone8-screen17
SKINFO_iphone8-screen18
SKINFO_iphone8-screen19
SKINFO_iphone8-screen20
SKINFO_iphone8-screen21
SKINFO_iphone8-screen22
SKINFO_iphone8-screen23
SKINFO_iphone8-screen24
SKINFO_iphone8-screen25
SKINFO_iphone8-screen26
SKINFO_iphone8-screen27
SKINFO_iphone8-screen28
SKINFO_iphone8-screen29
SKINFO_iphone8-screen30
SKINFO_iphone8-screen31
SKINFO_iphone8-screen32
SKINFO_iphone8-screen33
SKINFO_iphone8-screen34
SKINFO_iphone8-screen35
SKINFO_iphone8-screen36
SKINFO_iphone8-screen37
SKINFO_iphone8-screen38
SKINFO_iphone8-screen39
SKINFO_iphone8-screen40
previous arrowprevious arrow
next arrownext arrow
 

The creation processed involved working with 2 design researchers, who collected quantitative & statistical data as well as performed a number of qualitative interviews with the patients, nurses and other members of the care teams at the hospital.

With that material I collaborated with the lead service designer to create prototypes in SketchApp and Marvel, that could be used for iterative testing with the patients, doctors and service providers.

Example User flow: Notifications and system message flow

The process included the creation of a number of wireframes, user flows, subway maps and other UX assets, as well as workshops with the lead Doctors who were the prime drivers of this project.

Workshops included educating the doctors on the design process, getting qualitative material based on their experiences as well as understanding their diagnostics process so as to not add unnecessary overhead to their already over burdened schedules.

UI Documentation for Developers
skinfo-styleguide-v06_010919_Page_01
skinfo-styleguide-v06_010919_Page_02
skinfo-styleguide-v06_010919_Page_03
skinfo-styleguide-v06_010919_Page_04
skinfo-styleguide-v06_010919_Page_05
skinfo-styleguide-v06_010919_Page_06
skinfo-styleguide-v06_010919_Page_07
skinfo-styleguide-v06_010919_Page_08
skinfo-styleguide-v06_010919_Page_09
skinfo-styleguide-v06_010919_Page_10
skinfo-styleguide-v06_010919_Page_11
skinfo-styleguide-v06_010919_Page_12
skinfo-styleguide-v06_010919_Page_13
skinfo-styleguide-v06_010919_Page_14
skinfo-styleguide-v06_010919_Page_15
skinfo-styleguide-v06_010919_Page_16
skinfo-styleguide-v06_010919_Page_17
skinfo-styleguide-v06_010919_Page_18
previous arrowprevious arrow
next arrownext arrow