Wellness

I was approached by St John of God Burwood Hospital in early 2015 with a proposed project to develop an mHealth iOS application that would serve to digitise their mental health patient discharge plans. The app would replace the traditional paper based discharge plans that patients complete throughout the duration of their stay at the hospital. 

Freelancer
St John of God Burwood
2015

Project and team management
Requirements gathering

Functional specification writing
Prototype development
UI Creative design
HTML prototyping
Website design
Brand identity


 

THE PROBLEM

Patients are given an A4 paper plan workbooklet to complete while staying at the hospital. They work with their Doctors and Counsellors to complete their plan, it becomes a resource that they can refer to once they return home.

The current plan workbooks are a collection of worksheets bound together, this has resulted in a largely inconsistent look and feel. Being made of paper, the plan workbooklets are often lost, damaged or simply discarded by patients and because of its A4 size, it is difficult for patients to carry them on their person at all times. The current workbook is also extremely text heavy, many pages are overwhelming at first glance which makes it not particularly motivating to complete.

THE SOLUTION

My brief was to transform the original paper based plan workbook into a digital mHealth iOS application. The app had to include the ability for users to create a wellness plan, view their plan and make updates over time. We hoped that by having their plan in a digital format on their personal devices, it would both increase the likelyhood of use after returning home and decrease the risk of patients losing or discard the plan.

It was critical that managing plan elements must be extremely straightforward, users are in a state of cognitive exhaustion throughout this process, so overly complex interactions or design elements will only frustrate them. The app would need to cater to a wide range of users and had to be appropriate for users of all digital literacy.

The client was looking to move away from clinical terms such as 'patient' and 'discharge' and instead move towards a brand and tone that focused on the term wellness and wellbeing. As such the visual style of app would include natural images and colours, with a focus on engaging imagery.

wellness-intro-topwellness-intro-top
wellness-intro-bottomwellness-intro-bottom

ST JOHN OF GOD WELLNESS

iOS Application

 

PLAN LANDING PAGE

From within the plan section the user can create and manage their personal wellness plan. The wellness plan is made up four key components: goals, strategies, appointments and pleasant activities. Users complete each of the four sections with their counsellors during their stay at the hospital. The content they enter during their stay will assist them once they have returned home.

The client noted that often patients were not motivated to complete all sections of their plan. While we didn’t expect that a digital version of this plan would necessarily solve that issue entirely we did want to use the opportunity to include elements that would encourage the user to explore all ares of their plan. To address this I included a dynamic landing page for the plan section and a progress bar that tracked the users plan completion. The key icons for each category start off as grey and change to green once the user has created information in that plan section. Additionally, for each section the user sets up, the progress bar increases 25% and a message appears to motivate them to continue their plan.

wellness-clp-output2wellness-clp-output2

SECTION LANDING PAGES

From the plan landing page users can traverse to a specific section of the plan (goals, strategies, appointments or pleasant activities). 

The sections of the plan are presented with unique individual landing pages featuring engaging imagery. User input is presented in a horizontal card carousel that allows users to easily swipe through the information they have previously entered.

The reason I opted for the horizontal carousel instead of a more common vertical feed is because I felt like the horizontal carousel encouraged the user to stop and focus on each individual piece of input on their plan as they navigated through. User's will often come back and reflect on their plan and the information they have included in it. I didn't want to include a navigation pattern that was more commonly suited for scrolling quickly through vast volumes of content, such as with social media or ecommerce.  

PLAN CARDS

Each plan entry that a user makes is recorded on a single card. So for example, in the goals section each goal is represented by a single goal card. By isolating the user’s input like this I wanted to provide the user with the opportunity to reflect on each entry before swiping to the next one. By isolating the individual plan elements (goals, strategies, appointments, activities) it reduces the visual noise of the design, something important for users in a cognitively fatigued state.

Cards are also an increasingly frequently used design pattern, something users would be familiar with and scale well across all device sizes. 

 

 

FORM DESIGN AND WIZARDS

I wanted to be quite deliberate in my approach to form design for this application. Lengthy, tedious forms were one of the key reasons the original workbooks were unpopular, I did not want to simple replicate that in the mobile interface. 

I decided to employ a multi-page wizard design pattern presenting each single question on it's own page. I opted for the multi-page wizard because by presenting each question on it’s own screen, the user need only need only consider the current question and answer before them, making for a very simple to follow process.

I didn’t want to overwhelm the user with seven form fields on top of each other and this approach also provided more real estate on each screen display the question and options.

READING UP ON WELLNESS

The read section includes a number of articles on wellness topics for the user. The content pages emphasised readability. Georgia was deliberately selected as the body font for these pages as it is a great pairing with Helvetica and provides good legibility even on the small iPhone models.

wellness-readwellness-read

CRISIS SUPPORT CONTACT

The contact section incudes a list of popular crisis support helplines. Each module included the name of the helpline, operating hours, brief description and a tap-to-call button providing instant access to support services for users in a moment of crisis. This is a small feature inclusion in the app but an opportunity to provide a critical service in a time of need.