In week 8, after showing the wireframes to my tutor, I was asked to make some adjustments. Some adjustments included small tweaks to the UI, but the main issue is to add more screens. This is so the screens could be understood more and know how the app will function to have a smooth transition between screen to screen. Since this is a pregnancy/eczema app, I was even asked to expand and add new features because the app feels a bit niche, which is why I should discover what kind of potential it has.
My second task is to start my design research on rebranding the logo. I expressed that the current logo looks underwhelming and I wasn't impressed by it. My aim for this week is to create a mood board of the type of styles I’m leaning towards.
The Diet and Sleep screens are new features on the app. These features are linked to the AI tracker and Prediction/Timeline features. When the user is updating their condition, they will be asked to add their sleep activity and diet, and food triggers, meaning when it comes to the result, the result will also be linked to the Timeline. The AI will predict how they should improve their sleep and diet due to the flare-up triggers throughout the day and night.
The Diet and Sleep screens have the same layout. At the top of the home screen, the ‘Check out your prediction’ is the main CTA button - leading the user to the prediction content. There are also Tips available and a Discover feature. The Tips are personalised to the user, which means the app will showcase Tip articles related to the prediction they receive. As for Discover, the user can find different articles about Diet or Sleep in relation to pregnancy and eczema.
Diet screens, Sleep screens, Profile (pregnant user) Setting screen and Doctor’s Profile setting screen, Favourites screen (for Pregnant user)
Another feature added to the app is a Story Highlight, during my tutorial, my tutor requested I should create an infographic type of content showcasing information about the user’s condition and I thought that I should incorporate the infographic as a story highlight feature. This feature can be entered from the Home and Prediction/Timeline screen, this is by tapping the circular element at the tip of the screen. Once tapped, the user will see contain a summary of content showing which stage they are on to flare-up recovery, the condition of their skin, what their skin is doing to repair itself and what the user should do next. Also, as the user taps forward, the circular elements will animate and pan to the next circular element as part of the UX experience. Once they reach the last slide (the story consists of 3 slides), there is a ‘View prediction’ CTA leading the user to the Prediction/Timeline screen with predicted content ready to read.
Prediction/Timeline - Story Highlight
Reflecting on last week’s wireframes, I’ve decided to improve the Prediction/Timeline Screen and Home Screen. I’ve changed the layout of the contents; instead of scrolling, the user will now slide across the screen to view other contents. Placing content like this would be more effective since it requires less time to find information. The boxes are also drop-down elements, meaning whenever the user taps on a card, details about the information will appear.
Just below the number of dates, there are a story highlight feature and two menu functions called ‘Sleep’ and ‘Diet’. These new features on the app can be accessed on this screen or the Home screen. On this screen, the ‘Sleep’ and ‘Diet’ functions differently. By tapping the menu elements, it will lead the user to the home screen of the features, whereas, if the user taps on the card elements below, it will take them directly to their Sleep prediction or Diet prediction of the day.
I’ve only changed half of the layout on the Home screen. Similar to the Prediction/Timeline Screen, the Highlighted Story, Sleep and Diet screen is placed at the top, allowing easy access. The Highlight Story can be seen on the home screen because it is one of the main components of the Prediction/Timeline Screen and is part of the user journey when using the app. It is a CTA button that users should interact with.
I’ve changed the UI of the ‘update Condition’ element by taking advantage of the space available and making the CTA text stand out for users to easily tap on. Below this, is shortcuts to view the user’s latest prediction. Equivalent to the Prediction/Timeline Screen, the Diet and Sleep elements function the same way as the Home screen. The layout of the social content will stay the same as the original Home screen.
Updated Prediction/Timeline screen and Updated Home screen
This is an extra screen linked to the Doctor’s Home screen. Users can access this screen by tapping the ‘New Reports’ menu button. The New Report screen display reports the doctor needs to review. Urgent reports are labelled with an examination point telling the doctor that the user’s condition is serious and should be assessed immediately.
Doctor - New Reports screen