Challenge
This project aims to gather patients and doctors, prepare an environment that allows users to share medical examination results with physicians and get a professional opinion as feedback.
Real challenge was to create a user experience for the needs of 50+ age group, while making it still look good for younger audiences.
The project is under development.
My Role
On this project I was responsible of research, design strategy, user experience design and user interface design including user research, competitive analysis, design strategy and planning, ideation, wireframing and creating interface elements. Finally I designed micro interactions and animations.
Tools used: Sketch, Photoshop, After Effects
The app is in fact in Turkish language, but I changed the designs to English so everyone can understand.
1. Discover: Research
50+ age group is selected as target audience according to prior research of the client. So I needed to focus on 50+, while I had to keep the younger audiences in my mind. The good thing about designing for elderly is that it already makes great user experience, because it is designed to be use seamlessly by the group that faces trouble with the technology the most. So other audiences probably would use the app easily. The downside is that it is hard to make it look modern and sleek with all that high contrast and gigantic elements.
As you can imagine, there are a lot of health issues come with the old age. This issues can be categorized under 3 headings such as physical, cognitive and psychological.
Physical issues are mostly the problems with vision and fine motor skills. Presbyopia, which is worsening of near vision with age; yellowing of the eye lens which leads to decrease of distinguishing colors around blue and yellow spectrum; and deterioration in visual contrast sensitivity are the most common visual problems. Motor skill problems include weak hand-eye coordination, loss of sense of touch on fingertips, diseases cause to decline in movement control such as Parkinson’s.
According to these knowledge it is best to design the products with
big fonts for readability,
large elements to tap and interact,
no complicated gestures, high contrast,
avoiding using blue and yellow together,
large whitespaces,
minimum requirement for text input.
Cognitive issues are not related to intelligence nor capability loss in cognitive skills. In fact elder citizens are mostly fine on that topics. What really affects and separates them is having a different way of thinking, a different angle of view than young people. Growing up in a different era, having quite different problems and needs had them with a different mindset from their children and grandchildren. While it is very intuitive for millennials to understand mobile apps, for elderly it is something they are not used to. So when faced a problem millennials blame the product being poorly designed, elderly blame themselves for not being able to use the products. It does not occur to them that the products is not designed for them.
What we must consider here is to design with
avoiding complicated navigation and menus,
avoiding slide-out menus,
giving feedback after interactions,
no elements for only esthetical purposes, every elements must have a function,
icons with titles.
Psychological problems includes insecurity when using products, lack of trust which causes them to refrain from sharing personal data(including credit card information)
We should design
according to needs of target users,
trust worthy design and informing.
I also reviewed competitor apps and noted their cons and pros which I will not reveal here.
2. Strategy and Information Architecture
After research I started working on design strategy. With client we agreed on the doctrine which is Human Centered Design. I picked Lean UX as our main methodology so I could quickly sketch ideas and test them. For every problem I encounter, I asked why?, how? And what? Respectively. You can see the examples in the table below.
| Why? | How? | What? |
|---|---|---|
| Creating an MVP by working with short sprints and minimizing expenses | With Lean UX | Iterations and prototypes in short periods of time, and verify them with user tests |
| Having doctor’s opinions read by users easily | Letting the users know effectively | Push notification |
Basically, I defined problems, iterated ideas for solutions, and tested my ideas for verification. And I selected KPI’s to watch.
| User Goals | Business Goals |
|---|---|
| • Having examination reports shared with a doctor and getting feedback easily • To save time • Low prices • Getting a second doctor's opinion • Being able to see past reports • Paying securely and fast • Getting notified when doctor replies | • Having sales • Gathering data • High customer satisfaction • Increasing downloads constantly |
Later I created user flows according to user needs. On second image you can see what it became at the end.
3. Ideation and Wireframing
I created a moodboard and gathered good designs both relevant and irrelevant apps. I started sketching ideas for interactions. It was an interesting experience to design for such audience with too many design constraints. Everything had to be very clear, in their simplest forms. I sketched login forms, upload screen, report submission form, payment screens until prototypes worked out. Then I created the hi-fi wireframes below as a preparation for interface elements.
4. User Interface
I turned repeatedly used wireframe elements into symbols, created text styles and layer styles so I could modify screens quickly. Since it’s a medical app, client asked for a green or blue hue as application’s main color. After several experiments I decided on #359EDE. Now the problem with blue is elderly people may have problems distinguishing blue and yellow colors, so that means I had to be very careful with blue tones, and shouldn’t use yellow hue with it.
I used two styles of buttons. When they are needed to be in the middle of the screen, they are round buttons. When they are needed to be at the bottom, they are full width button to provide a intuitive flow. I had to keep away from yellow and blue hues for color, red affected audience negatively, so came up with the purple (#6C79CC)
Both blue and purple colors are vivid and have good contrast with white.
Fonts are Lato and Montserrat.
