Published on | Prototyping: From UX to Front End — Medium Shay Ho

The Black Dog Institute (BDI) is a non-profit organisation who is dedicated to understanding, preventing and treating mental illness in Australia, who is a client who I have had a continuing opportunity to work with. This short post is going to be about one of the latest tools that they have been added to the current website where the users can test themselves for Temperament and Personality, from which they can print the results out to give it to their doctors to seek help if needed.

Goals:

Keeping the look and feel of the current website while implementing the questionnaire with over 100 questions from the current test on paper in an intuitive way for the digital platform.

Problems:

Technologically, the current platform is limited to the CMS used (Sitefinity) and the current look and feel of the website needs to be consistent but the client doesn’t have a design system or pattern library on hand.

On the users’ end, people would prefer using the paper version, especially the older generation, because it’s familiar and the test is 2 sub-tests (which have to different ways of showing the results, one is showing the highest scores and the other would show the lowest scores only) in one so there is a need for a flow that needs to make sense to them, especially because the users need to fill in all of the questions to have a correct result.

The other tests are much shorter and easier to fill out on a website. And the structure of the new test needs to be kept as these old ones.

Lastly, the client have an idea of what it should look like and they would need some guidance of how the new test will work.

Solutions:

Since there’s only content for the parameters that need some attention, after receiving the client’s wireframe, I create an adjusted version where I group the results together so the page could be shorter and more focused instead of having repeating output without any real data.

The form already has got the step-by-step structure, which was also recommended to break this huge test into digestible bites without leaving the users feeling lost. I also want to add the ‘Reset’ button to the wireframe as this functionality has been a presence in all of the other tests.

Lastly, by removing the ‘Next’ and ‘Previous’ buttons, the wireframe looks cleaner and no overlapping functionality is presented on the test.

The said wireframe is now approved with one exception, which is the ‘Next’ and ‘Previous’ buttons because the client want to make it clear to the users that you can go to different pages (not forward if you haven’t finished the current set of questions) and not confused the pagination with it only showing the steps, we move to the hi-fi mockup stage to adapt the from to different screen sizes.

This step is fairly straight forward, I pick out the UI elements of the current website by manually going through the website specs and adapt it to different screen sizes as seen below.

On mobile, the pagination is now scrollable horizontally and needs to be anchored when you go through test.

Moving to development, we need to iterate the design even further because of the limitations of the platform.

Firstly, the anchor of the page is on H1 so the page would scroll too far to the top of the page instead of leaving the users at the beginning of the next step of the test when they finish one set of questions. And when they go the last step of the test, the auto-scrolling and animation is too slow and leaving an odd jump because the pagination jumps too late compared to the form.

Secondly, because the step-by-step pagination is on the bottom of the page, the user wouldn’t know where they’re up to when they’re back on top of the form, which can increase the exit rate, especially on mobile devices due to the length of the test.

To fix these 2 issues, we decided to move the pagination to the top of the form with the animation anchor now attached to it, leaving the ‘Next’ and ‘Previous’ buttons on the bottom of the form.

Results:

The form was implemented and pushed live correctly for a happy client to enter their latest content for this test.

Shay is a Vietnamese UX designer based in Sydney, Australia.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Designing a self-test questionnaire — a case study was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing a self-test questionnaire — a case study

Cool stuff, every week

More Articles