Creating the Prototype

https://www.figma.com/file/HZ44ptaUSBIGapCaDMdRVM/vital---adam-o-neill?type=design&node-id=10%3A264&mode=design&t=dAM1foch410oZ9Bs-1

Coming to the latter stages of this project, it was time to finish prototyping. A lot of the heavy lifting was already done when I prototyped my component library. It was really a matter of connecting each screen. Between each screen, I selected dissolve transitions mainly. This was because I didn’t want any flashy, distracting macro interactions as they can begin to threaten the accessibility and usability of the product.

Screenshot 2024-05-05 at 13.17.38.png

I split my prototype into 3 flows. In past projects I have only ever prototyped one flow to showcase all screens. However, this is definitely the most extensive project I have ever presented and due to the multi directional nature of my user flows, employing numerous prototype flows allowed me to show case the various functions and use cases of this app.

Screenshot 2024-05-05 at 13.18.18.png

Screenshot 2024-05-05 at 13.18.52.png

Preparing a Design Handover

In an attempt to work in a way that is more industry standard, I decided to focus on presenting my Figma file in a prepared design hand over style. I used sections and auto flow to do this.

Sectioning Flows and Marking ‘Ready for Development’

I used sections for the first time to group my frames into sections in order to make it clearer which screens belonged to which flow. This is a small step but one that I wanted to finally incorporate into my project. It definitely helps with making it clearer which screen belongs to each flow, and allows you to mark the screens as ‘ready for development’ which gives developers access to the code required to develop the app.

FLOW 1: SYMPTOM CHECKER - EMERGENCY APPOINTMENT, CHECK IN, CHAT TO SOMEONE - GP, CARE INFORMATION

Screenshot 2024-05-05 at 13.20.03.png