To develop my wireframes and low-fidelity screens further into mid-fidelity and also help start to build up my component/ design library, I began researching different page components that I could incorporated into my app, as well as exploring various design styles.
This process helped me think more carefully about how each screen could function and what elements would be needed to support the user experience of my app. Using Mobbin I explored examples of existing app and the components they use such as navigation patterns, cards, buttons and layout structures. This helped me to identify what styles are the most popular and commonly used within interfaces.
This exercise not only helped me understand and identify current design trends but also helped me identify components and styles that could work well within my own app. It also gave me inspiration for how certain components could be implemented while still keeping the interface clear, consistent and user-friendly.
I started by looking at the rating component and how that is commonly used as I want children to be able to rate how they are feeling throughout their hospital experience. I found that many interfaces used star based ratings systems as this is quite familiar and easy for children to understand. However I also found multiple applications used other styles such as emoji ratings and sliders to help submit their satisfaction/ how the user felt.
From this, I was able to recognise that although star ratings are a widely used and familiar method for measuring satisfaction, they may not always be the most suitable option for younger users as they need to interpret the scale. Therefore emoji or icon-based ratings can be more effective in this context because they visually represent emotions such as happiness, neutrality, or disappointment and helps children feel more comfortable expressing how they feel.
For the onboarding experience, I explored stepper and progression components that guide users through a sequence of steps. I looked at how current apps use step indicators, progress bars or numbered stages to help users understand how far they are in the process and how many steps remain. This helped highlight how users value clear feedback and guidance during onboarding. By using concise instructions, minimal text and strong visual hierarchy, it allowed users to quickly complete each step without feeling overwhelmed. Some designs also used illustrations to make the experience more engaging.
This feels like a very important element for my app not only for the onboarding section but also for the overall narrative journey as it can help children and their parents know what part of the journey they are at and how close they are to the end.
Navigation bars are one of the most used components in an app as it allows the user to freely use and explore the app quickly and easily. Using Mobbin, I looked at a range of bottom nav bar styles including tab bars and floating navigation as well as how many options each nav bar has.
From these examples it was clear that no matter the style, current mobile apps prioritise simplicity by limiting navigation options to four or five main destinations as well as using icons with short labels to make each section immediately recognisable and using simplistic component styling such as highlighted active states, rounded containers and subtle shadows to separate the navigation bar from the rest of the interface.
This research helped me determine what navigation structure would work best for my app as well as what styles I could experiment with to help create a clear navigation that children and parents can use to access key features in a clear and intuitive way.