Building a digital homebase of sensorial experience through humanising Motion’s digital experience.
How do we reflect sensorial experiences that move the human spirit into the world wide web? Bonsey Jaden's Tech & UI/UX team collaborated with Motion's design and production team to create a brand new digital homebase for the experience-centric agency: dedicated to the heart and soul of Motion, about what drives the brand and the people.
Immediate impact upon landing: The Motion homepage was designed to emphasize their new moss green brand colour. A microinteraction using the 2 dots signifying Motion’s “for impact” was chosen to add prominence to the personality of the brand.
The website also uses a distinctive horizontal scrolling experience to better showcase their story, rather than the more predictable top-down way of scrolling.
![Image sow-player-2](/wp-content/uploads/2023/01/Motioncase-2-scaled.webp)
![logo](/wp-content/uploads/2023/01/Motioncase-M-2.webp)
CASE STUDIES
A montage-like card pattern was chosen to bring through the sensorial experiences across Motion’s key projects.
![Image sow-player-3](/wp-content/uploads/2023/01/Motioncase-3-scaled.webp)
![logo](/wp-content/uploads/2023/01/Motioncase-M-3.webp)
HUMANISING FORM-FILLING PROCESS
To further humanise the digital experience, a natural language form design was chosen over conventional form.
![Image sow-player-4](/wp-content/uploads/2023/01/Motioncase-4-scaled.webp)
![logo](/wp-content/uploads/2023/01/Motioncase-M-4.webp)
BUILT TO ADAPT
The design of the website was built using a headless CMS to allow further iteration, page creations and frequent updates to be seamless and simple for Motion to use.
![Image sow-player-5](/wp-content/uploads/2023/01/Motioncase-5-scaled.webp)
![logo](/wp-content/uploads/2023/01/Motioncase-M-5.webp)
DESIGN SYSTEM, BUILT TO LAST
Motion was in the midst of revamping their brand identity at the inception of the web project. By establishing a UI/UX design system as a baseline, we reached a mutual agreement between Motion’s design & branding team, with our Tech & UI/UX team on design aspects that we can use on the website.
![Image sow-player-6](/wp-content/uploads/2023/01/Motioncase-6-scaled.webp)
![logo](/wp-content/uploads/2023/01/Motioncase-M-6.webp)