Yasmin Pessoa

accessibility description goes here
accessibility description goes here

User experience design and front end development for the UI Health Department of Cardiology. Vessil allows patients to store and manage data related to their cardiac stents and insurance cards.

Vessil was built in collaboration with Elaine Guan, Enrique Padilla, and John-John Miranda, as part of the Mobile App Design and Development course at the UIC School of Design.

This app was developed with Xcode, using Swift and the Interface Builder. We used Figma for prototyping and designing the interface. Because the app's target demographic is elderly patients, who are more likely to have heart health concerns, and less likely to be comfortable with technology, we tested our prototype with family members within the demographic and adjusted the experience according to their feedback.

Vessil aims to provide an accessible, uncomplicated interface for doctors, health organizations, and the patients themselves to access their cardiac implant information. Users can photograph or manually input information from their stent cards and insurance cards, export and/or share the data with their doctors, and access educational articles about cardiac health. The data can optionally be secured with a custom passcode. The application includes light and dark modes, and is also localized for the Spanish language.

after meeting with the clients and receiving their brief, we researched the target demographic and existing applications within the market, and determined the features that we should include in the application. this flowchart shows our initial plan for the screen flow of the application.
1 / 13

UI flowchart

after meeting with the clients and receiving their brief, we researched the target demographic and existing applications within the market, and determined the features that we should include in the application. this flowchart shows our initial plan for the screen flow of the application.

after presenting the clients with details on our research and map of the user flow, we created a wireframe laying out the basic functions and content for each screen in the application.
2 / 13

wireframe

after presenting the clients with details on our research and map of the user flow, we created a wireframe laying out the basic functions and content for each screen in the application.

through several iterations of the UI flowchart, we discussed which features were critical to include and which were unnecessary for the main purpose of the application. once the clients and our team were both satisfied with the details of the application, we developed a high-fidelity storyboard of the application's interface design.
3 / 13

storyboard

through several iterations of the UI flowchart, we discussed which features were critical to include and which were unnecessary for the main purpose of the application. once the clients and our team were both satisfied with the details of the application, we developed a high-fidelity storyboard of the application's interface design.

user interface for the dark mode theme
4 / 13

storyboard

user interface for the dark mode theme

5 / 13

Vessil logo

6 / 13

style guide

7 / 13

stents screen

passcode entry is required to view insurance and saved ID information
8 / 13

IDs screen

passcode entry is required to view insurance and saved ID information

9 / 13

saved insurance card screen

10 / 13

learn screen

11 / 13

article page

12 / 13

add stent screen

13 / 13

saved stent page