work

hemisphere

Node.jsJavaScriptExpressSQLiteSequelize.jsPassport.jsAngular.jsD3ES6BabelHandlebarsLessGulpStripeKarmaMochaChaiSinonJasmineFont AwesomeLetsEncrypt
color-splatter

Hemisphere is a tool for individuals, especially those suffering from mental-health issues, to record, track and review any aspect of their lives. A user may compare multiple answers against each other to detect patterns, or to identify upcoming behaviour associated with certain responses. Users can create their own questions, in any order they like, and answer their custom questionnaire as many times as they require. All responses are encrypted and users can elect to be notified themselves - or have someone else notified - if they fail to check-in for more than three days.

hemisphere artistic impression

About

The Problem

Hemisphere was created to address common problems with existing "mood trackers", which were often needlessly restrictive, unintuitive, rarely updated or totally abandoned altogether. A striking problem among existing solutions were the tone in which these trackers spoke to their audience; often using overly simple instructions or child-like visuals. An approach was needed that could combine a clean, modern-looking UI with a respectful tone, without compromising features.

The Brief

The brief was to create a place were users could record answers to any number of custom questions, and review and compare their responses at a later point. The user should have a method to compare one set of answers against another over time. The UI should be minimal, distraction free, and clearly indicate the required action.

The Solution

Hemisphere uses a minimal palette consisting mainly of dark blue-grey and green tones. The dark theme was conducive to a distraction-free feel and was especially well suited to the most active time for users: nighttime. Pages are as few as possible and elements are often over-sized, with short, declarative text to emphasize the required user action. A mobile-friendly feel - illustrated with the liberal use of icons - was essential given the frequency with which users were expected to engage with Hemisphere from their handheld device. A minimal questionnaire system was devised and a graphing system allowed a user to compare up to three answer-sets at one time. Furthermore, an alert system was created whereby a user may create email-alerts for themselves or others in cases where they fail to check-in for more than three days.

Client-Side

The client-side application is built with Angular - including angular-router and angular-resource - with a one-to-one mapping between API endpoint and Angular resource, and a one-to-one mapping between resource and controller. For graphs, Hemisphere utilizes the D3 visualisation library. All client-side javascript is written in ES6 and transpiled using Gulp and Babel. The Less css-preprocessor is used, which is also transpiled with Gulp. Testing is done with Karma, Phantom.js and Jasmine.

Server-Side

The server-side application is built on Node.js using the Express framework. It uses Handlebars for templating, Passport.js for authentication, Stripe for payment gateway, as well as the Sequelize ORM. Hemisphere was identified as a read-heavy application, so SQLite was chosen as it's database. The AES-256 encryption method is used to encrypt all text responses from users, which are then stored as blobs in SQLite. The application sits on a Digital Ocean droplet with regular backups run via Cron to AWS S3.

Data Entry

hemisphere data entry

Questionnaires

hemisphere questions

Review

hemisphere review