Skip to main content
UX Design of Medical Health APP: I See Health APP
Web Prototype
APP Prototype
Only Voice Prototype

I SEE HEALTH APP · CASE STUDY

by Bárbara C. Plasencia Lietro

OBJECTIVE

To build a medical app from scratch to final results for the visually impaired, blind, and persons who need guidance using medical apps.

ROLE

Perform competitive analysis, User personas, Business Requirements, Mobile First and Responsive Design, Information architecture & User Flows, Usability Testing, and Mind Maps.

TOOLS

Adobe XD, Photoshop, InDesign, Optimal Workshops, Voiceflow.

TIMELINE

6 months

Users can access personal health history and medical and healthcare professionals, make appointments with a doctor, search for health-related activities,  and purchase items such as gadgets, accessories & clothing. 

PROBLEM 

Many users with visual impairment struggle to find their medical exams and history and have difficulties accessing hospitals, leading to a need for voice assistance and remote access to medical information.

They also face difficulties when shopping online, as they are unable to see the items being sold.

SOLUTION 

An App that has voice guidance at all moments.  Will keep all history and medical reports accessible to users, worldwide doctors, and hospitals.

Users will have the option of doctor home assistance and having online consultations/monitoring & check-ups through medical devices.

Our medical health app will implement AI algorithms and AI technology to provide voice assistance and remote access to medical information, improving the overall user experience and accessibility for users with visual impairment.

One possible solution for individuals with visual impairments who struggle to shop online is to create a material swatch that can be sent to their homes. This swatch would allow users to feel the texture of the items they are interested in purchasing while listening to an audio description of the product. Additionally, a 3D printer layout of the item could be included, allowing users to feel the shape of the product as well. This solution would provide individuals with visual impairments with a more tactile and sensory shopping experience, improving their overall shopping experience and empowering them with greater independence and choice.

COMPETITIVE ANALYSIS 

and UX ANALYSIS

I looked for HEALTH APPS for the visually impaired, blind, and users, that need assistance achieving their tasks. There wasn’t any competition!  So I analyzed two medical health apps and one shop app to find its “Prompts” and “Points of Friction” to see what I could use and implement in the different sections of our future medical Health related App.  

One of the objectives of this APP is to have an 

ONLINE SHOP with HEALTH-RELATED ITEMS.

…I created surveys and interviews

SURVEY INSIGHTS

80% do not receive ONG or government benefits.

 – Our APP will include ONG Health-related activities and plans for the users.

100% Shop online with the help of family or friends. 

– Our App will have voice assistance, so they can shop by themselves.

The doctors are not prepared how to treat visually impaired people. Even talking to their friends instead of directly to them. 

– Create a “Seal of Quality” for the Doctors on how to treat patients with visual impairment. And this should appear on their card information and filter section. 

Places aren’t prepared for visually impaired people.

– Create a “Seal of Quality” for the places on how to prepare places for people with visual impairment. 

…I created USER PERSONAS

FRUSTRATION:

The user feels frustrated when visiting a health clinic because of their visual impairment.

NEEDS:

I find out that they need guided directions to clinics and to the doctor’s office door.

FRUSTRATION:

User’s medical records get lost and aren’t together in the same place.

NEEDS:

I find out that they need to have all their medical information together for easy access.

Diana is blind since she was 16 years old.

Slide

She makes her own health related appointments by phone

and with the help of her parents. 

Likes to exercise once a month.

Lives with her parents. Likes to go shopping.

Visual impairment 90% Age: 23 years old

Job: She has no job Location: Frankfurt, Germany

Goals & Needs

 Would like to be independent and have her own freedom. To feel safe while she is going to health related activities or appointments and get informed of her benefits. Needs a way to get fit and strong. Mentally and physically.

Frustrations

Lacking knowledge and resources to attend health related activities and places where she can be attended properly. Doesn’t have resources to pay gyms where she does not even feel welcome because of her impairment. They don’t know how to treat her or prepare the spaces. Can’t go shopping alone.

Everyday Activities

Listening to music. Stay at home and hear audiobooks. Cooking with her mother. Taking walks. Brushing her dog. She makes her own health related appointments by phone and with the help of her parents. Likes to exercise once a month. Lives with her parents. Likes to go shopping.

Everyday ActivitiesMotivations

Wants to meet new people with her same visual impairments and get to do new activities with them and feel safe. Organize her medical records and make doctors aware of her impairment. Be able to shop online.

STEPHAN Stephan is visually impaired 50%

since he was 55 years old due to a medical condition.He lives with his wife. He can not read even with glasses.

Doesn’t exercise. He is very depressed and stays at home all day.

Never does anything but listen to TV. Never goes shopping. He has put on a lot of weight. 

He does get to see some shapes and lights.

Visual impairment 80% Age: 60 years old Job: Retired Location: Berlin, Germany

Goals & Needs Would like to be independent like befors

Would like to be independent like before, make his own medical appointments, and go out alone to not disturb his wife or family. He wants his family to see him strong like before. Does not like to ask for help.

Frustrations

His life has changed, and he feels incapable of going out. People think he is old, but he is not stupid. He just feels a bit lost because he can not see. Finds Apps impossible to use.

FrustrationsEveryday Activities

Listening to the TV. Stay at home and go to the bar. Takes medication to feel happier, relax, and sleep. His life has changed, and he feels incapable of going out. People think he is old, but he is not stupid. He just feels a bit lost because he can not see. Finds Apps impossible to use.

Motivations

Has no motivations. Would like to feel independent when visiting a doctor or a health physician and have his privacy with him or her.

USER RESEARCH ANALYSIS

User Stories

• As a user, I want to save and keep my data and clinical history.

• I want the health specialist to write the reports and upload any clinical history to the system.

• I want to know points of interest and activities for persons like us.

• I want to know about doctors and clinics, especially for impaired persons near me.

MENTAL MODELS

AND USER JOURNEYS

Image of a drawing of a brain in color gray, it is a vector image also including the text of a mental model stating problem for the visually impaired persons when shopping for items online. The image has the text on color green and pink Black and blue with white background.

Opportunities:

Our solution involves implementing an AI-powered system to assist users in making appointments. The AI algorithm will guide users through the process, helping them select the most convenient date and time-based on their preferences and availability. The system will also provide users with relevant information, such as the location and contact details of the appointment venue, and any necessary preparation or documentation required. By utilizing AI technology, we aim to streamline the appointment-making process, providing users with a more efficient and user-friendly experience.

To improve the shopping experience for individuals with visual impairments, our solution involves sending an image of the desired item to a 2D pad or 3D printer, allowing users to feel the shape of the product. In addition, the name of the fabric or material used for the item will be included, so users can feel the texture of the material using a previously sent sample kit from the shop at no cost. These features will be guided by AI (Artificial Intelligence) to ensure a seamless and efficient shopping experience for individuals with visual impairments.

MENTAL MODELS

AND USER JOURNEYS

Voice command design image with some squares and bubbles such as in comics which inside have text with the conversation.

DESIGNING THE SITE MAP

With the creation of Journey maps, task flows, Card Sorting and live user tests, I made sure that the designs stay user-centric, and help and guide the user to complete the desired task.

The initial design had to change, making it into a more simple version 

The site map was changed when I realized that the users were getting confused.

SOME OF THE CHANGES MADE:

– “REWARD POINTS” was relocated to “MY DATA” and re-named “MY REWARD POINTS”. 

– “ACTIVITIES WITH REWARD POINTS” was relocated to “ACTIVITIES”.

– “GET SECOND OPINION” was relocated to the new section “MY DOCTORS”.

This way we reduced the workload for the users.

For the purpose of verifying the information architecture I created, I conducted card sorting to generate ideas for the app’s structure. 

I discovered patterns that reveal the app’s most logical and user-friendly organization. After sorting the cards, it was time to reorganize and map the hierarchy.

AUDIO NAVIGATION
Initial Voice Flow – Made in Voiceflow

Accsess here Audio Navigation

LOW FIDELITY PROTOTYPE

Mobile

This was the initial prototype

Sliding panels right & left. Up and down.

Sliding panels right & left. Up and down.

This was the initial prototype

Desktop Navigation

Sliding panels right & left. Up and down.

This was the initial prototype

Sliding panels right & left. Up and down.

This was the initial prototype

USABILITY TESTING

Six participants with moderate visual impairment were asked to complete several short tasks by clicking through a prototype.

– I had to evaluate the usability of the mobile app’s features & make sure they are intuitive to users,  by asking participants to perform task prompts. 

– I observe the participant’s satisfaction and frustrations and note any challenges. Gaining insight from participants for desired functionality and future features.

See Usability Test

Usability test results and
planning for future tests

Access Excel Rainbow Spreadsheet

USER TESTING  A + B

Task 1: 

Search for a doctor and book an appointment.

A + B Testing image of two different pictures of an medical APP to make test to see which one works better.

Issue: Testers get confused by the doctor’s picture in order to book a doctor’s appointment and click on it rather than clicking the loupe to search for a doctor. Severity mayor

Suggested Change:  Change the images to a more precise one.

Results show that the updated image of the button “For My Doctors” which shows clearly an envelope and a person/doctor makes it more intuitive to them that this is where they can add information about their doctor.

In design 1.2, the user had to navigate through 3 pages in order to get to see the button “Make an appointment”  had too many steps and was confusing.

For users, it was still difficult to access “Find a Doctor”!

So to minimize the workload, and to eliminate the root of the problem, I decided to put the envelope “For the doctor’s mailbox or section” at the top right.

Finally, to reduce the workload, the “Doctors section” is relocated directly on the Tab Bar Menu which is a static Tab Bar, in the new design of this sliding page. 

See Usability REsult
See Usability test

ITERATION

Till now, I iterated the design
of the interface three times.  

To streamline the user experience and improve accessibility, I eliminated the hamburger menu and replaced it with a tab bar that only contains five icons or buttons. I found that users were struggling to locate the appropriate button in the main menu, as all six buttons were grouped together. To address this issue, I placed the most relevant buttons in the center of the screen and the less relevant ones in the top right corner.

Ultimately, I decided to incorporate the tab bar to ensure that the menu was easily accessible at all times and within reach of the user’s thumb. This change not only simplifies the user interface, but also increases the convenience and usability of the app. By reducing the workload and making the app more user-friendly, I hope to enhance the overall user experience and satisfaction with the product.

A +B testing image of 3 pictures of a medical APP. Some text explaining that number 3 was the final decision after testing users of the app. The decision to change the app design to a Tab Menu. Meaning Menu below, so it is reachable to the thumb to the handy only with one hand. Instead of the typical hamburger menu.

Reducing the filter pages from four to one.

Before, “The filter” was a process of 4 pages.

It was challenging, even impossible at times, to return to the filter page in our app. Additionally, it was confusing to navigate to the next page and remember which filters the user had selected, often requiring them to go back to review their selections. To address this issue, I created a single, scrollable page that displays all the relevant information at once. With this design, the user can quickly and easily select or deselect filters by scrolling up and down the page. This approach provides users with a clear and concise view of all the available options, ensuring that they can make informed choices without confusion or frustration. Overall, this change simplifies the filtering process and creates a more user-friendly experience for our app users.

Now

– All filters are on a single page and always  accessible

– Applying a filter button

– Changing the “Done” button for the “Show” button

– “List” and “Map” buttons are accessible

Now the Search  filter includes

– “Seal of Quality”

– Accessibility

– Audio

– Languages

– Gender  

– Voice Guidance

– Gay-friendly 

– Times added to favorites and more…

Doctor’s information card.

– I have added all the icons related to the doctor and the facilities. 

– Now we can see all the information related to each doctor.

– I have added the favorites and reviews to the card.

– I have added the option to filter our favorites by adding the heart to the filter area and also the main page of doctor’s cards.

– Now we can see when the heart is filled with red color means it is part of our favorites.

Before

Now

Alignment of pictures and buttons.

We have aligned the pictures of the doctors on the left side.

Now all the vector images are aligned on the grid on the right side. This way, we get rid of the workload for the user, making it faster to search for the options on the same side.

I created a complete guide for the End Design

As a designer, it’s important to ensure that your designs are accessible to all users, regardless of their abilities.

To follow design rules and design for accessibility, it’s important to take into consideration the Best Practices, such as the Web Content Accessibility Guidelines (WCAG).

The WCAG provides a comprehensive set of guidelines for making web content accessible to people with disabilities, such as considering contrast and ensuring that the contrast between text and background is sufficient using color contrast checkers to ensure that the contrast meets accessibility standards, and avoiding using color alone to convey information.

Also, using Clear and Simple Language in the designs to ensure that everyone can understand the content. Avoiding using complex vocabulary or industry jargon.

Open End to End Design

APP PROTOTYPE

I’ve created the app in Adobe XD here we can see the connections

Here we can see the APP Images

Web Design

Web Prototype
APP Prototype
Only Voice Prototype

PROJECT REFLECTION

Having the privilege to access user information and needs throughout the surveys and interviews, encouraged me to find ways throughout the Mind Maps and user paths to implement the design several times.

With the “User testing A & B” I have implemented the “AI” Information Architecture of the App, making it possible for the user to have a detailed search and not to have a bad experience when they go to a doctor making sure their accesses, surroundings and practitioners know how to take care of them. 

I created the “Visually impaired Seal of Quality” for health Physicians, practitioners, and Health-related places and activities. 

So, users will be able to access friendly and saved places where they can feel understood.

Now, users will be able to shop online for gadgets through voice guidance. 

I created the  “Ship me how you feel” in order to have a palette of materials shipped from the clothing shop to the home of the user, so he can feel the material of the clothing or items before buying them since they are not able to see it online, and the Voice guidance to describe how the item feels to the touch and of which material is it made, it is important to increase the sales. 

Even do, this requires a team to activate this campaign to be able to contact the shops and find the users creating online surveys and within their databases, It will definitely make the effort pay.

In addition, being able to put together all the information in connection with their doctors, to a global database, so doctors and practitioners will upload or insert, or even by voice command their indications and recipes for their patients, therefore the users will have such a difficulty reading this papers or losing them will be able to listen or print them out in connection with their braille printer or braille pad.

I am proud to have had the tools and the understanding of the personas to make this APP worth it.

I’ve concluded that a designer’s job is not only to delight users but also to bring value to the business, since this app has the potential to activate a global market of 237 Million people who are thought to have moderate or severe distance vision impairment. 39 million people are believed to be blind globally in 2020. This is set to increase to 115 million people in 2050. 

Only in Germany, there are 1,901,252 persons with moderate to severe visual impairments.

In conclusion, this is a million-dollar APP.

To only think that with the right team and funds, this APP could be implemented and help users and activate a Global market leaves me speechless. 

To have the opportunity to explore thoroughly the markets and implement the Surveys and interviews. And to have a technical department to implement the connection of gadgets to the system. 

In addition, being able to put together all the information in connection with their doctors, to a global database, so doctors and practitioners will upload or insert, or even by voice command their indications and recipes for their patients, therefore the users will have such a difficulty reading this papers or losing them will be able to listen or print them out in connection with their braille printer or braille pad.

I am proud to have had the tools and the understanding of the personas to make this APP worth it.

I’ve concluded that a designer’s job is not only to delight users but also to bring value to the business since this app has the potential to activate a global market of 237 Million people who are thought to have moderate or severe distance vision impairment. 39 million people are believed to be blind globally in 2020. This is set to increase to 115 million people in 2050. 

Only in Germany, there are 1,901,252 persons with moderate to severe visual impairments.

In conclusion, this is a million-dollar APP.

To only think that with the right team and funds, this APP could be implemented and help users and activate a Global market leaves me speechless. 

To have the opportunity to explore thoroughly the markets and implement the Surveys and interviews. And to have a technical department to implement the connection of gadgets to the system. 

 

UX Bárbara