MoleShare2017 Spring Hand-off

By Team Mole ID App

Our Team

● Ray Yang - Producer

● Murali Mohan Ranganath - Engineer

● Kamchai Loketkrawee - Artist

2

What is MoleShare?

3

Rural area dermatology difficulties:

● regular check

● early stage treatment

Problem

● Melanoma brochures

● Audience

● Platform & tech

Research

● Melanoma self-identification

● Crowdsourcing method

● Cross-platform web-app

Solution

01

02

03

04

05

Key Features

4

Take mole photos and share them.

“Hot or Not” and “Tag” the photos.

User profile, user cases, and my history.

Database and back-end data tracking.

Tutorial and overly hint.

A web-app is developed to help people do melanoma self-identification using

crowdsourcing method.

Playthrough

5

Research

6

Tech

7

Complete open-source SDK for hybrid mobile

app development.

● Cordova plugin - multiple platforms with

one code base

Ionic

Database on The GApp Server -

https://gapp.eaemgs.utah.edu/

MangoDB

Data Collection & Management

Data Analysis, Visualization, and Reporting

Google Analytics

App Workflow

8

MEAN Stack DevelopmentA collection of JavaScript-based technologies — MongoDB, Express.js, AngularJS, and Node.js

Art

9

● NIH style

● Concise & intuitive

● Easy to read & follow

10

Time Schedule

Aug Sep Oct Nov Dec Jan Feb Mar Apr May

DESIGN

PRODUCTION

SOFT LAUNCH

ALPHA

BETA

Sep 26th: First Playable,Hot or Not

ALPHA - Key Fea tures C ompletedMa r 29th: Tutoria l & Overla y

Hint & Usa ge Agreement

B E TA - R ea dy For E xterna l TestApr 24th: Google Ana lytics &

R eview History & R eport Ina ppropria te

S oft La unch: Ada pt to Different Pla tforms & App Notifica tion & La rge S ca le Test

Oct 28th: Ta g & Zoom

Dec 2nd: Da ta ba se & S erverFeb 17th: 2-photo S tructure

Project Progress

11

2016 Fall 2017 Spring Backlog Items

Milestone1: Sep 26th

Take photos & upload

Post with description

View images

Check image info

Hot or NotMilestone2: Oct 28th

Tag images with description

Zoom in/out the imageMilestone3: Dec 2nd

Account registration

User profile

User cases

Setup database on server

Milestone1: Feb 17th

Client retrieve data

2-photo structure - home page

Milestone2 (Alpha): Mar 29th

Overlay hintSelf-identification tutorialUsage agreement

2-photo structure - upload pageUser cases - iteration

Milestone3 (Beta): April 24th

Report inappropriateBack-end data trackingReview historyUser profile - iteration

Notification of feedbacks

Login as doctor

Show owner of a case

Nearby post

Nearby notification of suspicious case

Adapt to different platforms

Doctor can contact posters

Downloadable bundle of pics

Limit for users to upload images

Teaching cases

Also see: https://docs.google.com/spreadsheets/d/1peZMLGIE8pB9Oy-AOTup-yWTIMvElUpikCDYM23A_3I/edit#gid=0

Iterations

12

● Be intuitive and easy to

follow

● Be consistent

Icons

● Follow FB design, which is

widely accepted

● View image and descriptions

together

Image Info

● using close-up image

together with context image

to improve judgement

2-photo Structure

● under 30 votes showing

“More votes needed”

● only reach the threshold to

show warning with the

exclamation mark

● delete the bar, making it

directly show the result

User Profile

Thank you!Any questions?