LBG
AWorking in a small team of dedicated designers I worked on 3 concurrent UI Kits for three LBG properties. Lloyds, Halifax and Bank of Scotland. I translated UI designs into Mobile and Tablet and created a UI Kit for each of the properties as UI designs were being continually updated.
Below I have shown the Bank of Scotland UI Kit as an example. It shows most of the components with their variations and is fully annotated to explain how each component is put together and its relative spacing, padding and margins. All of this information can be gleaned by using inspector mode ( within Figma ) and by simply selecting the component within the kit to examine and switch variants on and off as required.
Tools used for these visualisations included Figma, Photoshop, Illustrator
UI Kit and UI/UX Design for Lloyds, Halifax and Bank of Scotland
-
LGB - BoS
Promo card desktop
-
LGB - BoS
Promo card illustrations desktop
-
LGB - BoS
Promo card enhanced desktop
-
LGB - BoS
Promo card
-
LGB - BoS
Promo card 70-30 desktop
-
LGB - BoS
Promo card video desktop
-
LGB - BoS
Hero desktop
-
LGB - BoS
Promo banner desktop
-
LGB - BoS
Text styles
-
LGB - BoS
Carousel desktop
-
LGB - BoS
In page nav
-
LGB - BoS
Accordion + tabs
-
LGB - BoS
Scroll follow
-
LGB - BoS
Document download list
-
LGB - BoS
Adaptive image
-
LGB - BoS
Cautionary
-
LGB - BoS
Anchor List and Details
-
LGB - BoS
Product
-
LGB - BoS
19-Table