Problem
The Truist Leadership Institute website, needed more ways of displaying imagery of its campus experience so that people interested in the programs offered could see the campus amenities prior to registering for a workshop/course. At the time, Truist's design system only had flat image grids or single-image carousels available (only able to view one image at a time). Therefore, if I were to use existing components, users would either have an overwhelming experience of seeing all images at once, or a tedious experience of scrolling through an image at a time. I aimed to create a new carousel component design for the site that allowed a preview of images to see while also highlighting one image at a time. You will see in the video display a recording of me interacting with the image gallery component that I designed for the website.
Process
I collaborated with a front-end developer to create a proof of concept for the component. I also designed the arrow button states so that we would have a default, hover and focus state for all accessibility needs. We would then meet weekly with the development team to walk through the designs and answer their questions to help them understand how to build this to use in Adobe Experience Manager for future site use cases.