Maths tutoring website
Reactive mobile interactive framework
Aug 2016
Animation, Design, E-learning, HTML5, Interactive Gaming, Microsite, UX/UI
I was tasked with bringing a very well established maths tutoring site up to date and into the mobile age. After an initial period of R&D, I designed and built a flexible and scalable UI with a full example tutorial ready for user testing and demoing to investors.
The tutorials are step by step and reactive; they will explain the same point in another way, with supporting animation, if the user didn't quite understand the first time. Technically it had to work on desktop, tablets and mobiles with an emphasis on the varied mobiles in use in schools around the globe. This spawned lots of problems in the design; trying to avoid just going for the lowest common denominator and keeping the highly engaging flow and animation to aid the understanding and retention of the lesson. The UI can work in both portrait and landscape and has a 'split' bar so the user can fine-tune the UI themselves, throughout the lessons, if they prefer the emphasis to be on the tutorial's animation and explanation or the accompanying (multi-lingual) text explanation. Flexible guided learning is key here.
The tutorials are step by step and reactive; they will explain the same point in another way, with supporting animation, if the user didn't quite understand the first time. Technically it had to work on desktop, tablets and mobiles with an emphasis on the varied mobiles in use in schools around the globe. This spawned lots of problems in the design; trying to avoid just going for the lowest common denominator and keeping the highly engaging flow and animation to aid the understanding and retention of the lesson. The UI can work in both portrait and landscape and has a 'split' bar so the user can fine-tune the UI themselves, throughout the lessons, if they prefer the emphasis to be on the tutorial's animation and explanation or the accompanying (multi-lingual) text explanation. Flexible guided learning is key here.