SELF-CARE RESPONSIVE & ADAPTIVE WEB DESIGN

hero image

Project vision

Self care is a platform on mobile and web based devices that primarily focus on user to learn first-aid quickly and easily with a single click button option to call the nearest hospital or ambulance in case of the emergency. The data visualization and sharing of digital medical identity are either non-existent, very limited or extremely outdated. Self care aims to fix that by bridging the gap in between formation of personalize digital identity and medical enthusiasts themselves.

Project goals

  1. Identify the challenges, user facing while learning first-aid.
  2. Allow user to modify digital health identity so that they can got quick medical access from any of the hospital in case of emergency.
  3. Providing the user with an option to searching for nearest hospital or call to nearest ambulance in emergency.

The challenges

  1. Create easy to understand data visualization for the first-aid learners.
  2. Providing user with a single clickable contact button to emergency services such as hospital or the ambulance.
  3. Providing a checklist of first-aid kit and notification to user while they can starting on their any journey.
  4. Bridge the gap in between shareable identity to the hospitals.

Kickoff

Starting off i have asked my self few initial questions for better understanding of the entire project.

  1. Who is our primary user?
  2. Why should someone  want to use this application or website?
  3. How large is the scope of Self Care?
  4. What are my roles during the entire project?

My responsibilities

As a lead UX designer I have more responsibility towards the entire project, but some of them are stated below,

  1. Conducting the user research
  2. Conducting the interview with participants
  3. Ideating the design concepts
  4. Creating paper & digital wire-frame
  5. Creating & modifying the prototype
  6. Designing the flow screen
  7. Final mock up design
  8. verifying the final design
  9. Conducting the usability study
  10. Further iteration of design based on user feedback
  11. Submiting the design to developer team.

Sitemap

It is a complex task for me to design a sitemap for Self-Care application. After visiting & analyzing the competitors website I had came out with 3 possible frame of design for Self-Care responsive design. After applying my own design skills and priority from user view the final sitemap was created. From main page, I have added five sub category page i.e “first-aid kit, learn first-aid, health ID, my profile and emergency profile. First-aid kit also categories as advance kit and basic medical kit. Learn first-aid tag categories as minor cut, minor burn, apply bandages, prevention to heat strokes and prescribed medicine tag. Health id page also categories as my health data and edit health data section. my profile page also categories as my profile and edit profile data. The last sub page, emergency services categories as three parts such are, call to hospital, call to ambulance and call to relatives.

Preparing the journey

Process flow of complete project

User research strategy

The first thing we focused on was our research strategy. In order to identify the flaws in the current UX and UI, we conducted a primary and an usability test by interviewing people that fit our user archetype. these were user in between age of 18 and 65. Before we began our interviews we first needed to do two things,

  1. Firstly we conducted a competitor analysis.Aside from using and understanding Self-Care this also gave us an insight in the market space and provided additional context for the problem we are working on it.
  2. Secondly we create an interview guide in the preparation for usability testing. This enabled us to conduct our interviews in a consistent and controlled manner.

Primary research questions

  1. How long does it take for you to learn any kind of the first-aid?
  2. How often do you use any app or website for learn the first-aid?
  3. If you have any primary medical problem raise, then how could you deal with it?
  4. What did you want to add extra features to an first-aid learning app so that it could be more better for user?

Usability study research questions

  1. Why would you want to keep the first-aid kit with you for always while having any travelling?
  2. Why would you want to carry a digital health identity always?
  3. How did you search for nearest hospital or ambulance in case of the emergency?
  4. What is the procedure do you want to follow when there is a medical emergency for your relatives or friends while you are on driving?
  5. In this Self-Care application how did you feel in each of processing such as from learning of the first-aid to searching for nearest hospital or nearest available ambulance and an option to modifying your health identity?
  6. Do you want any modification regarding the features and process flow in this self-care application design?

Meet the user (user persona)

Statement of concern

Problem statement is John is an educated person who needs an emergency call facility because he can get access to medical facility easily and quickly in case of emergency.”

Goal statement is, Our self-care application will let user learn first-aid quickly with an option to call emergency medical services and editable health identity which will affect both the persona John & Siri by allowing them to use the application and all of its features easily. We will measures then effectiveness by visiting rate and the bounce rate.

Competitive analysis

In order to construct a solid foundation for Self-Care, i had to venture out and  see what the prominent competitors were not reaching, i evaluated the several features deemed vital from user surveys and identified which ones Self-Care could capitalize on top have a leg over other applications.

  • I found that non of the competitors offered checklist facility to first-aid kit to the user.
  • I found that only two competitors offered directly call to hospital facility but have only limited features.
  • Only one competitors offered the shareable digital health identity facility but that are not editable by the user.

Prioritization plotting

Plotting a list of the possible features onto a graph helped narrow down what was absolutely crucial for the user while moving down the roads. this graph help me to identify the important features that could be essential for the user journey, Main priority,

  • Checklist option
  • Profile screen
  • Emergency call services

Affinity diagram

After conducting the usability study research and preparing the research audit report, i was found much more opinion and feedback from the user. I was arranged them in a logical manner according to the project goals and user needs, such are presented below,

Ideation Principle

Before starting the design it was necessary for me to find out the possible solution for app design base on the user needs and user research.I was started with crazy 8 principle to identify the possible user action to achieve their goal. I was found 8 different most important screen that can accumulate user needs and wants. I was included the screen such as, checklist screen, health id modification screen, call to nearest hospital screen , edit profile data screen and most important learning first-aid easily.

Wireframe & prototype

Final mock up and prototype

After completing the paper wireframe and digital wireframe its time to convert the design into real looking design by adding real text, iconagraphy, images and logos. Its a time consuming stage and most importantly the part of Interaction design. The design of Self-Care app contain simple clear text with modern layout and simplest navigational flow of application.The final design is presented below,

Responsive design

This project is not only to design the dedicated application but also design a responsive website, which can be view in every web-based devices. It was a main task for me to arrange the content in a logical manner as per the responsive web devices. Self-care app is not only portable for mobile devices but also portable for web based devices such as computer,laptop and tablet. It is easy to view as a website in all responsive web devices. i was made this responsive design in order to target the NBU (next billion user).

Challenges I was faced & the way I overcome it

The challenge,

  • Designing a dedicated and responsive application that allow user to learn first-aid easily and quickly with an option to make emergency call to medical services in a single clickable button.
  • Also it was a challenge for me to understand the user needs and what they feel about the entire application process.

Overcome process,

  • I had split up the solution into five parts such as empathize, define, ideate, prototype and testing, which are already stated above in this case study.

Category of main challenge,

Challenge 1

Audio integration facility

I had a challenge that how could a low visualized person or a busy gentleman can learn the first-aid? In order to solve this problem i was added audio integration button so that user can learn all the first-aid by audio. Volume icon just below the hero icon of following screen represent the audio integration option.

Challenge 2

Call to emergency services

As simple and as quick as possible an user can get medical access from nearest hospital or ambulance in case of emergency, I have added an option for  directly call to nearest hospital, nearest ambulance and to selected relatives of user. This can be use in case of any emergency in accordation with google map.

Challenge 3

Checklist for first-aid kit

In order to remind user about missing first-aid kit, i have added a checklist of first-aid kit so that user can select them which are available and if user forgot any thing a notification will send to user mobile phone. User can turn off the notification setting as per their need but I suggest not to do that.

What I have learn from this project?

User flows should focus on retention not on revenue

  • A key UX design lesson that i discovered early on was that i needed to concentrate on keeping our customers than generating revenue. UX is vital because it has a direct impact on reputation.
  • In the Self-Care project i prefer to maintain constant retention to user by adding multi navigational flow of screen such as moving to any of the screen from any part of the screen.

Social sign is is better than Email sign in

  • To improve the conversion rate of the home page, i came up with an idea to enable social sign-in by using Facebook, Twitter, LinkedIn and Instagram , which is further results in retention value of the application.

Be clear with UI labels

  • The last thing i want to share with you is something that i’ve been thinking about for quite a while, it’s the issue of being clear with them. Most of the user may not like the color, text or design pattern of certain part of the application but it is a constant iteration process to further change in the application design.

Style guide

After completing the project its time to put all the UI elements together, which is termed as style sheet or style guide. All the UI elements put together to formed a design system. Design system helped me to modify the design very easily as per the user needs.Here style guide consisting of typography, iconography, color code and logo design.

About me

I’m an eager and passionate UI/UX designer with hand on experience from Google, Accenture, Adobe and Figma corp. Having 15+ satisfied clients and 4+ brand new UX project experience.

Contact me