Design
After the stakeholders approved the wireframes, the design process began. Design comps were created in Adobe’s Xd software and circulated via PDF and online. Interactive mockups are available at https://xd.adobe.com/view/c871d6cf-65a3-435a-a747-ee73083796e2/.
Home
With Kathy Caregiver guiding the creative direction, the homepage takes shape using the wireframes as a foundation.
This design features:
- bright colorful imagery featuring happy diverse subjects to welcome the user.
- persistent navigation elements in familiar places to allow easy navigation.
- adherence to UNC-CH’s branding guidelines.
Participant profile
Kathy’s user profile page features:
- large easy to use data entry button.
- easy access to her and her patients’ profiles.
- listing of recent activity with quick-edit links.
- high-contrast text with clear section heading to comply with WCAG accessibility standards.
- persistent navigation and branding.
Data Entry Screen
When Kathy clicks the New Entry button, she is taken to a data entry screen allowing her to enter heath information for herself or a patient.
The design features:
- large, simplified, easily-recognizable icons.
- grey helper text in fields.
- Help link added to footer.
- persistent navigation and branding.
Confirmation Popup
Once Kathy’s task is complete, she taps Save and receives feedback indicating success.