Below are the improvements I have made to certain screens, including newly added screens.
I have expanded this feature by adding new input questions and separating it into five separate screens (Eczema Check-in, Triggers, Sleep and Diet Check-ins. The questions do not require any typing unless their symptom is not listed. It is a thorough process which is not overwhelming to complete. I’ve added a process bar to let users know how much they have left to fill in.
As for the Result screens (Results and Treatment columns) of the report of the symptoms, my tutor told me to redo the UI by placing the content as card components. Taking this advice, I’ve also created an illustration of an affected area (this is to make the purpose of this screen easier to understand) and labelled each part using ABCs. Users will be able to identify the highlighted area more easily. Each ABC has its own section showcasing the zoomed-in area, and then below the illustration is an overview of what the problem is before explaining it thoroughly underneath it. The treatment column quickly explains what Flare advises the user to do.
The main update on this screen is the expanding card component. Focusing on the ‘What to expect: Itchy Skin’ segment, the component will enlarge with information that could affect their current symptoms. The arrow icon will also turn 90º degrees down whenever it is open. The transaction is embedded to the ‘Possible Triggers’ section (section to ‘What to expect’).
All these screens are connected together. On the social screen, I have created a ‘Create Post’ screen, which can be accessed by tapping the ‘+’ CTA. Users can tag their location and even add images before sending a post.
On the Profile screen, I've adjusted the position of the QR code icon and placed it next to the profile picture icon. Instead, I've replaced it with the Settings icon, leading the user to the app’s settings content.
Another two screens I have developed is the Points/Streak feature (Which can be accessed by tapping the Trophy icon on the Profile screen). The user’s current points can be seen at the top. Below displays, all completed and incomplete tasks the user should fulfil to receive points to unlock coupons (second screen). Whether the user has unlocked a coupon, they can tap on them and it will take them directly to the linked website to authorise its code.
The Profile Settings screen allows the user to edit their profile information, personal details about their eczema, pregnancy and medication information. As for Favourites, whenever the user taps the Favourites section (on Profile Settings Screen), it will lead them to contents they have saved, such as articles and coupons. This is quick access to the content they like.
