Wireframes

Interactive wireframes were developed using Adobe’s Xd software. The proposed wireframes were circulated to the stakeholders via emailed PDFs and Adobe Xd (available here).

Wireframes were circulated to the stakeholders via emailed PDFs and Adobe Xd (available here).

Home Screen

During the research phase, three user personas were developed. The persona of Kathy Caregiver was determined to and offer the most value: she would be using the app often and entering information for multiple individuals. Therefore, the home page was developed for someone like Kathy Caregiver in mind.

The architecture of the home page would consist of a large data entry button to facilitate quick and easy entry and include less often used links on the screen perimeter. Tertiary navigation would be included under a hamburger menu in the upper corner. Finally, a logo would be included for brand recognition.

Wireframes were circulated to the stakeholders via emailed PDFs and Adobe Xd (available here).

Participant Profile

To give Kathy a sense of ownership, a profile page was developed for her to voluntarily add a name, brief bio, and entry links for her patients.

The page includes the same large data entry button and persistent navigation, but also includes Kathy’s info and latest activity.

Patient Information Wireframe
Patient Information Wireframe
Patient Information Wireframe
Patient Information Wireframe

Data Entry Screens

When clicking a link, Kathy Caregiver would be shown simple entry forms.

Sample Popups

When interacting with the app, Kathy will be entering information. For feedback, the app will offer various clarification or confirmation popups.

Help page comp

Help Page

If Kathy needs help, she can always tap the Help link and find answers.

Next: Design Mockups