Pro Prio - Health App
An app to educate and support
The app request originated from a global pharmaceutical giant, focusing on developing a platform for patients recently diagnosed with liver cancer. The goal was to provide a space for patients and their loved ones to learn more about the diagnosis, available treatments, and navigating life with this disease.
Structured as a pitch competition within the client’s organisation, teams were formed, each collaborating with a creative agency. This specific design was one of two presented as our contribution. As the main designer, I conceptualized the design, layouts, and some features, collaborating with a copywriter and an art director to refine the designs. Due to copyright considerations, I subsequently redesigned the project for my online portfolio. Which is what I’m presenting here.
My Role
App Design
Journey Mapping
Information Architecture
Wireframing
Universal Design
In navigating the guidelines and adhering to the specified requirements, I aimed to develop a design that would be easily comprehensible and navigable, especially for an audience less accustomed to apps and smartphone usage. This involved extensive research and trials, delving into the intricacies of UI/UX design. Additionally, I revisited the fundamentals of graphic design, focusing on establishing hierarchies and thought about how to organize a substantial amount of information. To prevent overwhelming the user, I incorporated the principle of progressive disclosure.
Easy to use, easy to understand
Process & Thoughts
Low Fidelity Wireframes
We digitized sketches and created low fidelity wireframes to work out the information architecture of each page.
High Fidelity Wireframes
We added fidelity to wireframes with icons and colors to create visual hierarchy and make the app more easy to use through adding color contrasts and fonts of different weights. Throughout the process, I communicated with an art director on my team and the clients team to make sure the app was heading in the direction they had been meaning to.
Version for the visually impaired
Both versions of the app design, color scheme, fonts and buttons are made to be easily viewed and used by elders. However, some have more difficulties than others. Therefore the app has two modes. One “regular view“ and one “easy view” where the color contrasts has been exaggerated and the text enlarged.
The Outcome
Instead of going for a more modern way going though the different categories we decided to go for a more traditional website type of layout. So instead of jumping from screen to screen you will instead scroll up and down the page for longer.
This idea came about because of the target user being older and instead of introducing something new it was better to stay to a user experience the target using would already be used to managing.
Progressive Disclosure
It is a very useful design technique often implemented in UI/UX design. It’s used to present information in a user-friendly manner, by revealing details gradually, reducing cognitive load and improving user experiences.
Visual Hierarchy
Visual Hierarchy is when different categories of information is grouped together using color, shapes and sizes.
I used the software Figma to create a functional app prototype. To show investors and to test design features.
Figma Prototyping
Progressive Disclosure
As explained in the section above, Progressive disclosure is when you introduce the information gradually in several steps so not to overwhelm the user.
Profile Lists
One main purpose of the website is for user to read about other patients who have gone through a similar process. We created these Profile cards where users can see right away what treatments each person has undergone.
When clicking a Profile you will be taken to their specific profile page with a more detailed description of them, their diagnostic and treatment history, and also their blog posts.
Universal Design Features
OAs many of the diagnosed with liver cancer are older I wanted to make the app as easy to use for user who might have a visual impairment. I did so by incorporating a button that is always showcased at the top of the page that let’s users switch between two viewing modes. One “normal“ mode and one for people who has an conditioned sight. It makes the text bigger and uses stronger color contrasts to make it easier to read the texts and to differentiate between the different sections and categories.