Case Study: DermoApp

Dermoapp helps users find out about their potential dermal illnesses. Quick interviews are supported by tons of pictures. Together, those two options will help user diagnose themselves. If the application does not answer the users questions, it has build in abilities to contact doctors & schedule an appointment.

Before we start I’d like to note that the app is available only in Polish so far, English language version is coming in the next release. Screenshots provided here are also in Polish, so I will concisely explain features and functionalities. Ok, let’s go!

As soon as I knew the rough direction we needed to take in developing the app, I was able to state some basic assumptions regarding the design.

It must be user friendly and have a modern, inviting look as well as differentiate from the competitors

That’s what I should do.

Flat colors, slightly modified stock cartoon characters and a mix of custom-made and native iOS UI elements – these are the main ingredients in this soup. For app design I use Sketch 3, in case you were wondering.

first

The idea of the first view is to select body parts by touching it on the character’s body in the main screen. Speaking of the iOS app, it has been done using this library.

Next, the user is asked two questions to determine the specific body part in detail and to check if the illness is chronic or not. To be honest with you, these buttons aren’t code generated, they are images prepared in Sketch.

.

Portable Network Graphics image-E6823ABF8E0F-1

Ok so far so good, let’s move to another view. Based on collected data, a set of images is presented to user. Here is where gestures come into play: swipe to browse pictures, double tap or pinch to zoom them.

Portable Network Graphics image-619EEEB7F313-1

 

Be careful here, some of them are really gross!

If you think your illness is similar to the one in the picture, leave the carousel on that picture and push the bottom-most button – It will take you right to the presumable diagnosis.

If none of the pictures seem to depict your medical condition, select the red button to contact a doctor.

second

On the left hand side there is a diagnosis view. Disease name is centered on top. Below you can find description and treatment (opis and postępowanie respectively)

Next to that, there is a contact window. It consist of two text fields (for user’s email and message content) and two photo buttons. Pushing either of them triggers the camera that allows user to take a picture of the suspected spot on their body. User can send a message to the doctor and chose to just include text, pictures or a mixture of the two.

You might wonder what approach has been used to contact a doctor. Since we can’t rely on somebody’s mailbox configuration on their phone, we decided to post the form data to an external service that composes and sends email to a doctor.

That web service that handles the entire mailsending stuff is written in node.js and utilizes mainly nodemailer library.

Note that this is the MVP stage of the project which is likely to be developed in the near future.

Thanks for reading and feel free to ask about anything in comments below :)

Disclaimer: This app was created for our customer

Thanks for reading!