This document showcases the process that I follow while working on a UI/UX project. It's a case study of a health care app called My Kin Health.

1. How would you keep a track on
your kin’s health if you live miles
away from them?

2. How would you keep a track on
your kin’s health if you live miles
away from them?
Hello, I am Aniruddha and this is the case study of a health app that I worked on
recently while being a part of 17dnorth, Hyderabad. This presentation showcases
the process that I follow while working on a UI/UX project. The app is in a
developmental stage and is called My Kin Health.

3. My Kin Health is a unique B to C service that is built for those people who live
away from their parents and wish to ensure that their kin receive the best
medical attention on a regular basis. The service model is simple - trained staff
of MKH pay regular visits to the registered kin and make sure that their medical
needs are well attended to. From performing regular check ups at home to
safely taking the kin to doctors/hospitals for tests, MKH makes sure that their
service is human-centric. The user is notified about the test results,
recommendations etc so that s/he can actively participate and remain in the
loop.
Our challenge was to neatly tuck all the various actions and features into an
app that would have a comprehensible and engaging user experience.

4. Step One : Understanding the user
and creating persona

5. Step One : Understanding the user
and creating persona
My Kin Health is an app that caters to a very specific target audience. It is meant for
those who live away from their loved ones. This app allows them to receive first
hand information abut their kin’s health and take necessary steps depending on
doctors’ recommendations. It is safe to say that the app is very niche, and we mainly
had two types of users involved :
The Guardian is the main user who wishes to use the app to track his/her kin’s health.
This person is the one who can perform all the front-end actions in the app.
The Kin is at the receiver’s end. This person is obviously involved in the process, but
s/he cannot perform any action in the app. His/her medical information only gets
updated on the app by the service providers for the guardian to see.

6. As mentioned earlier, the Guardian is the one who performs all the actions on the
app. And so, we created a guardian persona to keep in the centre of our design.
say hello to Sandeep, our primary
guardian persona

7. Sandeep is a 32yr old NRI who teaches
clay modeling at the Los Angeles
Academy of Figurative Arts
He studied Art and Animation at LAAFA and later took up a faculty position at the
institute. His parents are well settled in Hyderabad and he visits them often. His
father is a retired Police officer and his mother is the Principal of Hyderabad Public
School. Sandeep is married to a practicing pediatrician and they have a little girl
aged two.
Sandeep wishes to ensure that his parents receive good medical facilities in
Hyderabad and also wants to personally stay in the loop to receive details about
their wellbeing. And so, he registers his parents with My Kin Health.

8. Step Two : Creating the
Information Architecture

9. Once we got a clear idea of who the app is meant for, we started de-constructing all
the various components of the app. Through Cognitive grouping, we created a
hierarchy of information and categorised the elements for the two kinds of people
involved - The Kin related and the Guardian related.
My Kin Health deals with two types or categories of information - One that includes
everything about the kin (this section contains most of the components of the app
as this app is meant to provide information about the kin). The second category
includes features meant for the guardian. This includes profile details, account
details, adding / removing kin etc.
Step Two : Creating the
Information Architecture

10. 01. THE MYKIN MENU
This section contains all the kin related information that a guardian should be able
to access quickly. We decided to tuck these into the Hamburger menu.
MEDICAL RECOMMENDATIONS
SCREENING TESTS
MEDICAL TESTS
CONSULTATIONS
WELLNESS PLANS
EXERCISE PLAN
NUTRITION PLAN
RISK CALCULATOR
TEST RESULTS
LAB TESTS
IMAGING TESTS
LIPID PROFILE
BLOOD PROFILE
METABOLIC PROFILE
URINE ANALYSIS LAB
BLOOD GLUCOSE LAB
OTHER..
MEDICAL RECORDS
VITALS
CONDITIONS
PROCEDURES
SOCIAL HISTORY
ALLERGIES
MEDICATIONS
SUPPLEMENTS
IMMUNIZATIONS
LEGAL DOCUMENTS
APPOINTMENTS
CHARTS PROGRESS NOTES
// We added some generic information later to this section.

11. 02. MY PROFILE / GUARDIAN PROFILE
The Guardian related information had to be clearly segregated from the Kin related
elements, so we decided to create a new section called My Profile where the user
can access these elements.
MY KIN
EDIT / VIEW KIN
SELECT A KIN
INBOX GUARDIAN
DETAILS
APPOINTMENT
VIEW APPOINTMENTS
MAKE APPOINTMENTS
INSURANCE
DETAILS
TRANSACTIONS MY SERVICES MY PLANEMERGENCY
CONTACT
ACTIVITY LOG
03. NOTIFICATIONS
This section contains all new notifications like emails, appointment reminders etc.
04. SEARCH
This feature allows a guardian to search for doctors and hospitals based on various
filters
05. The Generic information
We created a subsection at the end of the menu that contains elements like About
us, Blog, Health News, Contact Us, FAQs and Forum.

12. Step Three : Wireframing / Proof
of Concept

13. Before sketching out the framework of an app, the I.A is usually followed by making
task flows to get a clear picture of how a user would go about performing the
various actions in the app. But in this case, since we already had a functional
website running, the tasks were pretty much laid out. And so, we directly started
making very basic skeletons of the screens. These layouts are devoid of colour or
imagery as they are only meant to present the hierarchy of information on every
screen.
Step Three : Wireframing / Proof
of Concept

14. Wireframes / proof of concept help the designers and client understand the basic
framework of every screen type in an app or a website. These wireframes are also
used to perform user testing wherein a bunch of users are shown the screens and
asked to perform certain tasks. Based on how efficiently a user performs the tasks,
necessary changes are made to the wireframes and validated again.

15. We followed a similar process while designing this app. The wireframes were first
validated and only then taken forward for visual design. Directly making the
visual design makes it more time consuming for any changes to be made to the
design. Since wireframes are quick representations, it’s much faster to edit them.

16. Step Four : The Visual design

17. After getting all the wireframes validated, we moved on to flesh them out by adding
colour, typography and representational imagery. We began by first choosing a
suitable colour palette that would go with the brand colour. This was followed by
selecting a right typeface that would be legible and modern. Later, the iconography
and image styles were added.
Step Four : The Visual design

18. THE COLOUR PALETTE
THE TYPOGRAPHY
MYKIN BLUE
#4F80FF
PROXIMA NOVA - LIGHT, REGULAR & BOLD
MYKIN DARK BLUE
#154961
ACTION ITEMS
REPORT-ABNORMAL
#FE4E50
REPORT-BORDERLINE
#F9D33E
REPORT-NORMAL
#8ECEB5
TEXT ITEMS
#2D363D
AaBbCcDdEeFfGgHhIiJjKkLlMm
NnOoPpQqRrSsTtUuVvWwXxYyZz

19. keep a track on your loved ones’
health from anywhere in the world..
this is MyKinHealth

20. { LOG IN | SELECT KIN + OPTIONS | MY PROFILE | KIN DASHBOARD }

21. { DASHBOARD | ACTIVITY PLAN | NUTRITION PLAN }

22. { ACTIVITY PLAN | NUTRITION PLAN | MEDICINE REMINDER }
Please note that we used the darker blue to show the second level of navigation.

23. { SEARCH DOCTORS | FILTER DOCTORS | HOSPITAL SEARCH | FILTER HOSPITALS | INBOX }

24. { MYKIN MENU | SUB MENU | SELECT A DIFFERENT KIN }

25. { MYKIN MENU | APPOINTMENT - PREVIOUS, UPCOMING, LATER | HEALTH NEWS }

26. { ACTIVITY LOG | NOTIFICATIONS | TEST RESULTS - TABLE & GRAPH | EDIT PROFILE }

27. And, that’s how you can keep a
track on your kin’s health from
miles away from them..

28. And, that’s how you can keep a
track on your kin’s health from
miles away from them..
This app is currently being developed under the supervision of 17dnorth,
Hyderabad. None of the designs that have been shared in the presentation can be
copied or shared, by any means, without the permission of 17dnorth.
- thank you