This is a thorough insight into Flare’s digital mockups.
There weren't many changes that I made compared to the wireframes and the mockups, this process was a simple process to create. To sign up, users would either tap the sign-up button or log-in options, whereas the doctor will tap ‘I am a doctor’ leading them to a separate screen. Throughout the signup process, I ensured that the content was easy to convey. The content includes adding personal details, their referral ID shared by their doctor and details about their pregnancy and eczema to authorise the personalisation of their account.
The Home Screen also showcase a thorough layout for users to understand. On this screen, I haven’t made a lot of tweaks to the wireframes. I made sure the content can be seen and categorised clearly so users can navigate it easily. In terms of interaction, users interact the Your Predictions by dragging across and tapping on it leading them directly to their predictions. The main component which users would have to use is the ‘Update Condition’ placed at the top; as I move onto high-fidelity mock-ups next semester, I will add illustrations/animations to this card element to make it stand out. Overall, it also encourages the user to update their condition.
Since this is a process of a few screens. The journey from start to finish is easy and well-understood. Users will go through a series of inputs by tapping affected areas and taking an image before adding triggers. I have made sure not to overcrowd the user with many questions otherwise it’ll look and feel like a survey - overall the process shouldn’t tire the user, especially as they’re inputting these answers daily.
Afterwards, results will appear with two columns to review. The Results column will showcase the image of the affected area taken by the user and the AI will highlight the most concerning areas by using a colour-coded system. The user will use this system and read the information below. The text contains information about the affected area; why is it affected and what triggers have caused these symptoms. The user will then tap the Treatment column which will showcase information on how to treat the condition.
When the user has finished reviewing their results, they can tap the Book Appointment CTA at the bottom to set an appointment with their doctor.
Throughout the screens, I made sure to keep a good layout, and for the Appointments screens, users can discover and find nearby doctors (if they’re not referred by a medical practitioner). When they tap on a card element, it will lead them to the doctor’s information. If a user is referred to a doctor (which in case, they are), they will already have their doctor’s contact fixed at the top of the screen. And to set an appointment, they can tap the ‘Book Appointment’ CTA leading to the booking process. ‘View’ is to read their doctor’s About, Reviews and FAQs information.
The booking process is a very simple matter, again, I made sure to keep it well-structured. The user will tap or drag across to find an available date (at the top) and tap on an available time slot. Afterwards, they can review their latest report and even notes what they want to ask or assess with their doctor. Tap confirm, then a pop will appear saying it has been booked, and when the user returns back to the Appointment Home screen, the card element changes with the date and time displayed.
Since this screen is to discover the latest predictions of the user’s symptoms, the user can view the information by tapping the heading on the cards. When they do, the card will expand as a drop-down.
To view their Story highlight, the user will tap the circular element with an ‘X’ on it (an illustration will replace the ‘X’). Every day the story will change with three different slides. Each part mention which stage the user is at before telling them to view the main prediction content.