Introduction

The online digital products lacked consistency plus designs and features needs improving along with the user experience flow. My vision is to create a new living digital product for the company: Design System. To create a consistent look and feel and to design a better experience for users. The design system will have reusable UI components which creates a quick, efficient work flow. I have been continually improving and updating the design system as ongoing.

Result

Once a got the design system where I needed it to be, ready for use across all the digital products, I worked with developers so they can implement the UI component library based on my design system, I also educated the stake holders to get them on board in the early stages. We started to roll out the design system across all the digital products and as a result we have had positive feedback from clients and across the business. There was better branding consistency on the look and feel and better improvements for the user flow as we've tested this.

Normal header image

Normal header image

When you scroll down the page then the nav will disappear and the menu button will appear

Navigation dropdown

Menu with hero

When you start to scroll down the page blue menu bar will disappear whilst blue menu button will show

Menu on hero with dropdown

For homepages hero collections

For homepages hero collections

4 column info card (blog/article align centred and left):

4 column info card (standard, test align centred):

4 column info card (standard, text align left):

3 column info cards:

3 column info cards:

2 column info card (image aligned left and content right):

4 column info card with out image:

3 column info card with out image, centred & left aligned:

2 column thin info card with image left aligned:

Search results:

Info cards spacing guide:

Image size guide:

Image size guide:

Option 1:

Option 2:

Option 3:

Option 4:

Option 5:

Option 1:

Option 2:

Option 3:

Option 4: