Product:
Imprivata Cortext is a secure messaging platform for healthcare. HIPAA compliant, it enables coordination on care teams.
Problem statement:
As a Cortext user, I want to add a status to my availability to better communicate my availability and coverage. I would also like to set an expiration on that status, so I don't have to remember to change it after, or during, my busy shift.
My Role:
Visual Designer and Product Lead for UX design. I worked with another UX designer, product management, and engineering (managers and developers) to craft this solution.
The process:
1. Question the problem
2. Market research, and inspiration
3. Collaboration and workshops with UX designer, Product Manager, and Developers
4. Iterate, iterate, iterate
5. Prototype, test, and iterate more.
6. Delivery
2. Market research, and inspiration
3. Collaboration and workshops with UX designer, Product Manager, and Developers
4. Iterate, iterate, iterate
5. Prototype, test, and iterate more.
6. Delivery
Product ready design
These represent the final designs for the feature. Many concepts were tested and iterated on, including different UI layouts (stacked, accordion, and more). Through user testing and validation, and understanding of the user base, their challenges, and assumptions, this design rose to the top.
In the settings view, the user will be able to choose a status, set an expiration and set details for that status. The Status preview shows what the final status will be to other users in Cortext.
Receiver view of the custom availability status
Start with sketching
After meeting with the UX designer to discuss the intended workflow, her research to date, and some initial layouts, we worked together to solve some affordance concerns and other open questions. After the workflow is understood, I usually start by sketching out rough UIs to understand a possible end-point, it gives me a goal to work towards and create some artificial boundaries.
Prototyping & Review
To better iterate on the UI, I built multiple XD prototypes to work through several interactions and workflow concepts. This allowed me to better communicate the solution with engineering, PM, as well as the lead UX designer on the project.
In order to demonstrate advanced interactions for the banner (receiver) view, I also created an animation in After Effects.