Patient Coaching App: Johnson & Johnson
A medical mobile application (iOS & Android) which will record and analyze daily health status and help maintain successful drug doses using the built-in trackers.
Role
Secondary Research, Task Flows & IA, HIG & Material Guidleines Study, Visual Strategy, Illustrations, UI, Quality Check
Duration
6 weeks
Professional- Globant India Pvt. Ltd
Team
Sooraj Ramachandran
4 Developers
1 Project Manager, 2 QA
Project Brief
A Native iOS and Android offline mobile application for Patient Coaching which will support both English and Arabic language for J&J customers of Saudi Arabia.
Process & Planning
Parallel Design & Development cycle
Planning was necessary for smooth handover from IxD to VD to the development team due to the aggressive timelines and parallel design and development cycles
Understanding Patient Coaching
Medicines are associated by their shape & color
After speaking with a couple of people, we gathered the insight that people identify the medicine by the shape and color instead of their names. In the afternoon “I need to take 3 pills- two blue circle, one triangle.
People tend to take their medicines around meals
When we looked at the prescriptions that were written by the doctor most them were written in 0-0-1 or 1-0-1 format. This signified that it was around breakfast, lunch and dinner.
Converting Business Requirements
to Task Flows
Task Flows
The process began with analyzing the client requirements, user needs and goals were broken down into detailed task flows which lead to the foundation for our screen designs.
Information Architecture
Based on the task flows, the information was naturally grouped into 6 modules
How to Handle Bi-directionality in UI?
Numbers & Graphs
Another important limitation of mirroring is bidirectionality, common not only in Arabic, but also Eastern Asian scripts. Namely, while text is aligned to the right, numbers are still read from left to right.
English - Arabic Proportions
Arabic characters tend to be shorter and wider than Latin characters. This means that they take up more space horizontally while not being particularly readable when using the same text size as an English version therefor the font size need to be 3 times more than English.
Iconography & Pictorial Representation
The most important icons for mirroring are back and forward buttons. Back and forward navigation buttons are reversed. An icon that shows forward movement should be mirrored.
Block Diagrams
The 6 modules from the Information Architecture informed the design and helped create the structure of the application
Detailed Wireframes
Based on the screen flow and block diagrams, detailed wireframes and flow diagrams were created
Setting up the Visual Language
Typography
SF UI Display for iOS
SF UI family has been utilised for typography as it is highly legible, with a wide variety of weights and dynamically optimized for various screen sizes.
Roboto for Android
According to Material Guidelines, Roboto is used. Due to its structural characteristics, legibility and readability are its major features.
Color
Palette
The colors have been derived from the Brand Guidelines. They have been tweaked in order to suit the digital platform
Graphical Elements
Illustration
Iconography
The iconography was kept clean and minimal.
The aim was to keep the representation universal.
UI Iteration. Iteration. Iteration
All your Prescriptions in one place
User adds the medicine details, start date, end date, frequency and dosage time and the reminder time. The user can set a predefined shape or take a photo of the medicine to remember
Your Health at your fingertips
The user will be able to enter their health metrics in 3 categories
1. General Health 2. Gastro Health 3. Rhuema Health
On choosing a category, the user will be taken to a step by step wizard wherein they can answer the questions in that category.
They will also be able to see the History of the Health Diary in a graphical view
Keep a track of your dosages
The user can log in their dosage, postpone it by one hour or skip the dosage entirely by giving a reason. They can also edit the previous 7 days of dosage.
iOS & Android Highlights
Reflections
What I learnt
This project was one the most fast paced project I have worked on. Within 6 weeks we had to have 6 modules designed for iOS & Android from scratch while also ensuring that the design works for Arabic translation as well. I enjoyed the rush but also understood how to work with a base structure of these guidelines while also giving a unique visual language to the product.