LBG
Working 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
![](assets/images/LBG/01-Promo card --desktop.png)
LGB - BoS
Promo card illustrations desktop
![](assets/images/LBG/02-Promo card -- illustrations --desktop.png)
LGB - BoS
Promo card enhanced desktop
![](assets/images/LBG/03-Promo card --enhanced --desktop.png)
LGB - BoS
Promo card
![](assets/images/LBG/04-Promo card.png)
LGB - BoS
Promo card 70-30 desktop
![](assets/images/LBG/05-Promo card -- 70-30 --desktop.png)
LGB - BoS
Promo card video desktop
![](assets/images/LBG/06-Promo card -- video --desktop.png)
LGB - BoS
Hero desktop
![](assets/images/LBG/07-Hero --desktop.png)
LGB - BoS
Promo banner desktop
![](assets/images/LBG/08-Promo banner --desktop.png)
LGB - BoS
Text styles
![](assets/images/LBG/09-Text styles.png)
LGB - BoS
Carousel desktop
![](assets/images/LBG/10-Carousel desktop.png)
LGB - BoS
In page nav
![](assets/images/LBG/11-in page nav.png)
LGB - BoS
Accordion + tabs
![](assets/images/LBG/12-Accordion + tabs.png)
LGB - BoS
Scroll follow
![](assets/images/LBG/13-Scroll follow.png)
LGB - BoS
Document download list
![](assets/images/LBG/14-Document download list.png)
LGB - BoS
Adaptive image
![](assets/images/LBG/15-Adaptive image.png)
LGB - BoS
Cautionary
![](assets/images/LBG/16-Cautionary.png)
LGB - BoS
Anchor List and Details
![](assets/images/LBG/17-Anchor List & Details.png)
LGB - BoS
Product
![](assets/images/LBG/18-Product.png)
LGB - BoS
19-Table
![](assets/images/LBG/19-Table.png)