Ophthalmology practices carry products needed for various patient appointments. These products need to be reordered to be used in daily appointments. Users needed an inventory feature added to their current management software. They needed to be able to add, edit, and delete products as well as suppliers.
UX Research, User Interviews, Journey Maps, Wireframes, High Fidelity Mockups
Sketch, Zeplin, InVision, Material.io, Color Contrast Checker
Research began by reviewing the dashboard, database, Material Design, and Accessibility best practices. These insights helped shape the guidelines for the new inventory feature.
Interviewing users uncovered insights with the user interface and process. These insights influenced the layout of the data columns, the placement of the buttons, the search box, several other aspects of the design.
IDEATION / SKETCHES
After collecting and synthesizing the research/user insights, it was time for ideation. Starting with pencil and paper, I sketched out some basic layouts to get a better idea of what might be viable options. This part of the process also included writing notes about the requirements of the inventory feature. This was a good exercise for coming up with some quick ideas while making sure I stayed within the design guidelines.
After sketching more detailed ideas with pen and paper I was ready to start wireframing in Sketch. Documenting the process a user takes to reach the end goal gave me a better idea of the screens I would start with. After creating each screen in the process I set up a prototype in InVision so I could conduct some usability testing.
USER JOURNEY MAPPING
A user journey map was created to understand how users were thinking and feeling during the various processes. This process uncovered insights for future iterations of the inventory feature.
HI FIDELITY WIREFRAMES
After testing the mockups with users and creating journey maps, I uncovered a few new insights. The order of the columns seemed to be different for each user. Although some patterns came up. Some users didn’t immediately recognize the icons, but quickly overcame the issue and were able to continue without any issues. After testing the grayscale version, gathering insights, I created a full-color version and set up the new prototype.
To view the full prototype and style guide, you can find the links below.
Zeplin Style Guide: https://scene.zeplin.io/project/5f275ca7b237c71f5992b84b
View Prototype Screens: View Prototype Screens