Adding Colour to Screens

This is the most effective way to bring your low-fi’s to mid-fi’s. I had three colour palettes to draw from in the development of my screens. However, I felt that I wanted to draw mainly from the UI colour palette initially as the secondary palette will be utilised for icons and other illustrative elements.

APP UI COLOUR PALETTE

primary colour palette.png

SECONDARY PALETTE

secondary colour palettte.png

DESATURATED PALETTE

secondary colour palette - desaturated.png

Final Mid-Fi’s

Defining my Approach

When designing my mid-fi’s, some of my peers argued that they felt more high fidelity. While on first impression they are, all of these screens are created using flat and unresponsive elements without auto layout or creating components.

Some would maybe argue that it would be more efficient to do this as I go along however at the time of the creation of these screens I didn’t know how to use auto layout or variables, which meant there was definitely some working backwards in order to learn.

Homescreen

homescreen-1.png

home screen with active emergency appointment.png

home screen with active appointment.png

Symptom Checker

symptom checker.png

symptom checker - searching.png

symptom checker - selected.png

checking symptoms.png

Care Pathway Direction and Information

visit emergency department.png

visit urgent care.png

urgent care appointment confirmed.png

schedule a GP appointment - more info.png

visit urgent care - more info.png

book a GP appointment.png

visit emergency department - more info.png

schedule a GP appointment - more info.png

Booking Appointments