While I have a design for a home screen and onboarding flow as part of my mid-fi prototype, I am not fully happy that it is as good as it could be. While I am getting feedback on it from my first round of user testing, I wanted to explore other possibilities for these two key flows to see if I could make improvements and include fixes based on feedback from initial user testing.
While I have discussed the user testing feedback I have received in a separate blog, the feedback that stuck out to me was a suggestion to allow users to select their own questionnaires based on their needs. While I may consider offering users the ability to build their own custom journey, rather than relying on the default version, this got me thinking: what type of journey would my users take in my project, and how could I best facilitate them getting what they need as quickly as possible?
My original onboarding started by getting users’ permissions for data collection and making an account before they could take any questionnaires. This was even though the first questionnaire (the AQ-10) is a screener questionnaire, used mainly by GPs to see if a person requires a referral to specialist services. While this is not a massive issue for those users who get a score that suggests they have autism on this questionnaire, for people whose score indicates autism is very unlikely, they have given data permissions and created an account with a product they are likely not going to use any further.
This made me think that to make these users’ journeys easier, it may be best to allow users to take the AQ-10 questionnaire (which only takes 5 minutes) prior to making an account. This would give users value much quicker and allow those who are just curious to leave the product without having to make an account with another provider, it would also help my product as it would not have to maintain lots of dormant accounts wit could add cost and security weaknesses into the system.
Taking the AQ-10 questionnaire first would also have benefits for users who do continue with the process, as, rather than arriving at a home screen after making an account, which involves lots of empty cards that need them to complete the AQ-10 before they can see their journey map or initial likelihood of autism, now these would be available. They would have also completed the first step of the journey, so I could visualise this for them, which would be psychologically important as there are several tasks to complete and feeling like you have completed work already, but still finding yourself with 0% journey completion could be disheartening and reduce motivation.
Another piece of feedback from initial user testing was to link a user’s unique logo in some way to the autistic traits they show, while I’m not sure in practice how this would work, I could not offer that unless I had a user complete a questionnaire before generating the logo, which was not the case in my initial design, so making this change will leave that option open. It also allows me to combine the steps of waiting for the AI to create both their logo and journey map, before these were separate, and I’m sure they would need to use different AI agents. For the user, this could be one step, where they get the journey and logo at the same time. This would also hopefully connect the logo and the journey more, which was the intention of the logo representing their journey through the process.
My initial home screen design included 4 vertically stacked cards, one for a user’s next task, one for their journey map, one for their likelihood of autism and one for information about same different. While this was functional, the more I thought about it, it didn’t bring the user directly to the value of the app, which was a clear set of steps they could take from not knowing if they had autism to being added to the waiting list for a specialist assessment. This wasn’t clear in my initial design, and the only way to see this was to click into their journey map.
This also didn’t fully consider how I thought my users would arrive at same different, I have always maintained that there is lots of information online about what autism is, what traits it has, etc. websites for organisations like the National Autistic Society and the NHS provide this already, what is lacking is a clear direction to take after reading this information if you want to explore the possibility of being autistic further. This is where same different is designed to step in.
Assuming I am using my new onboarding flow, where a user completes the AQ-10 questionnaire first and then creates an account if they feel that would benefit them, I want them to arrive at a home screen that sets out what they need to do to achieve their goal of discovering whether or not they are autistic straightaway. My current home screen design does not achieve this; it emphasises the next step, but doesn’t show the full journey unless they click through to the journey map. From this, my thoughts were to make the journey the home screen.
I got my sketchbook out to quickly sketch out the basic idea, to get a very early indication as to whether it would work or not, before moving to digital tools.
I started to iterate on this idea in lo-fi using Miro. This would allow me to put it together quickly and see if it could work before investing large amounts of time into creating a hi-fi version. Below, you can see my initial Miro version.
As you can see, the core of the idea was to make the journey map, the main feature, with all other elements working from that. To support starting the next task more easily, which, for users partway through the process, is their most likely need, I will set the scroll position to have the next question in the middle of the screen.
I do want to offer other information on the home screen, but without taking focus away from the journey. To do this, I want to use an app/header toolbar containing a link to a profile card and a menu. The menu will contain all the secondary and functional elements of the app, such as settings, about same different, etc. Users need access to these elements, but significantly less than the core elements of the app, so having them accessible from a menu is ideal. Clicking on the profile icon (which will be a user’s profile image in the finished app) brings up a profile card giving a user basic information, such as their current likelihood of autism and a brief summary. To make changes to their profile or for more detailed information, they can visit their profile screen.
With this lo-fi mock in place, I decided to convert it to hi-fi to see how it worked in practice. Below is version 1: