mflDirect's website allows car dealerships to buy ex-Motability vehicles. My role was to build up and strengthen mflDirect's design system from a visual and accessibility perspective.
While overseeing the UI and motion design, and adhering to WCAG AA guidelines for accessibility I collaborated with the UX team to integrate their user research findings into the design system.
The project presented several considerations, including building out an interface that stayed intuitive while presenting a lot of information.
As part of the Motability Group accessibility was key, so we made sure to keep this in our minds as we hit WCAG's AA guidelines.
The website had to handle various user accounts, facilitate the purchasing process, and provide information on shipping and stock - balancing speed with functionality.
I used Brad Frost’s atomic design approach to build out the design system, although I added a foundational section for spacing, movement and transitions, and typography. It allowed us to build using the existing brand foundations, then expanding to more complex components such as cards, page layouts, and interactive elements.
Working closely with the dev team dev team I used Zeplin to hand over screens and symbols. Design tokens were marked up and detailed specs noted to help build out a Storybook site as a single source of truth for the brand. This process bridged the gap between design and development nicely, and keeping a few sprints ahead made sure we never stepped on each others digital toes.
Blackout wanted to build a profile that would allow employers and educators to prohibit the use of mobile functionality, such as cameras, voice recording apps, and web browsers based on user GPS location, geofence, or proximity to beacons. This project included a wider brand application and the development of mobile apps and a desktop PWA.
