ADHD affects around 4% of UK children – 90% of whom also display substantial levels of challenging behaviour. These behaviours can cause severe stress for parents, especially if there’s a lack of support around them.

To form a supportive foundation for families struggling with these issues, King’s College London, the University of Nottingham and the University of Southampton united to create OPTIMA – a research programme working in consultation with parents of neurodiverse children. 

One of OPTIMA’s goals is to research the beneficial effects of the mobile app STEPS, an app referred by GPs, initiated for families of children who show challenging behaviour by quickly allowing access to vital parental support.

OPTIMA needed a website to serve as an informational hub for their work in and outside the STEPS app.

Additionally, OPTIMA commissioned an animation that would feature on the site to further explain the functionality of the STEPS app for those in a hurry.

Further accentuating STEPS’ importance, the animation had to educate parents on the app’s value, easy-to-follow functionality, and the additional overall benefits the study itself will have for the families involved. 

WIREFRAMES

An imperative part of pre-production for the website is gathering the client’s key objectives and the end-user needs and goals. We translate these insights into wireframes, which utilise grid systems through design.

Wireframes allow us to create a consistent identity and feel across the website’s pages. From there, we develop the wireframes into clickable prototypes users can interact with and test. 

FOCUS GROUPS

To ensure our initial ideas for the website’s design were achievable and potentially expand upon them, it was essential Arke understood OPTIMA’s target audience. To accomplish this, we carried out focus groups, capturing feedback from parents of children with ADHD and staff. 

Arke also created a clickable prototype of the website as a sandbox/testing environment so we could practically demonstrate the functionality and straightforward navigation of the site. 

We conducted two focus groups with both parents and staff, running usability testing scenarios and exercises to observe the website’s performance. From there, we reviewed the website’s performance and ease of access. Following these focus groups, we reported our findings to the OPTIMA team and realigned web and animation requirements.

Animation

The already-distinguished visual identity of the STEPS app gave us a foundation to work from, allowing us to invest and experiment in the execution and narrative of the animation. 

By meticulously storyboarding, Arke broke down the script into a series of key scenes. From this, we created an animatic illustrating the pace, rhythm, and flow that the animation would have. This allowed OPTIMA to collaborate with us from an early stage, ensuring the end product was something that resonated and engaged with their audience.

To ensure timings were precise, we also implemented our own voiceover of the script alongside the animatic, giving OPTIMA detailed insights throughout pre-production.

WEBSITE

For the website, we finalised functional requirements, producing a working version of the site using a content management system (CMS). Once ready, we conducted a list of technical and functionality tests and presented the mobile/desktop design whilst illustrating the app’s visual identity in correlation to the animations.

ANIMATION

By utilising Adobe Illustrator and After Effects to rig and animate the characters, we made sure to reflect the bold and minimalist tone of the app. The geometric simplicity of the character designs allowed us to develop smooth and fluid movement throughout the rigging process.

The design and movement of the characters visually represented the accessible manner STEPS wanted to portray to its audience, emphasising the easily understandable qualities of the app and study. 

Additionally, the characters we designed and animated were done so ambiguously, allowing us to not conform to one gender or race – as we realise, the modern family comes in many different shapes and sizes.

We then utilised our professional voice artist to narrate and assist in bringing the animation to life.

THE FINAL PRODUCT

The delivery of our bespoke website, alongside our informative and engaging animation echoing STEPS’ bold identity received fantastic feedback from our clientele. 

“We’re delighted with the new OPTIMA website! We have enjoyed every step of the process, and we were very impressed with Arke’s responsiveness to our feedback. The team was very helpful in bringing everything together. In particular, we found the focus group facilitated by Arke very helpful in identifying how to optimise the designs and to ensure the best user experience.” 

“The animation is brilliant – everyone loves it! Thanks again for all your help throughout the process.”

“The animation looks great – it has received a very positive reception from everyone who has seen it, so thank you to the team!”

-Dr Kasia Kostyrka-Allchorne 

Our insights gathered via GTmetrix confirmed that the website upholds an outstanding performance score of 98/100, a key indicator of the website’s validity, reliability and usability.