abrdn
abrdn
abrdn
abrdn
PROJECT Description
After a multi-billion pound merger, the UK's largest asset management company underwent a rebrand. As part of this, they sought to apply the new brand to their website.
Alongside another UI designer, I was tasked with applying the excellent new design guidelines to hundreds of components, variants and pages in a digital format.
PROJECT Description
After a multi-billion pound merger, the UK's largest asset management company underwent a rebrand. As part of this, they sought to apply the new brand to their website.
Alongside another UI designer, I was tasked with applying the excellent new design guidelines to hundreds of components, variants and pages in a digital format.
PROJECT Description
After a multi-billion pound merger, the UK's largest asset management company underwent a rebrand. As part of this, they sought to apply the new brand to their website.
Alongside another UI designer, I was tasked with applying the excellent new design guidelines to hundreds of components, variants and pages in a digital format.
PROJECT Description
After a multi-billion pound merger, the UK's largest asset management company underwent a rebrand. As part of this, they sought to apply the new brand to their website.
Alongside another UI designer, I was tasked with applying the excellent new design guidelines to hundreds of components, variants and pages in a digital format.
Client
abrdn
Year
2021
Type
UI Design, Design System
Client
abrdn
Year
2021
Type
UI Design, Design System
Client
abrdn
Year
2021
Type
UI Design, Design System
Client
abrdn
Year
2021
Type
UI Design, Design System
The branding, completed by Wolff Olins, was extensive and contained plenty of elements that I could use to influence my designs. After initial discussions, animations, and concept designs, the client agreed upon an approach using the circles within their new logo as a brand element.
One of the most interesting parts of this project, related to the colour options. As with many asset management companies, there are different sectors contained within their own website, that due to legal responsibilities must remain separate. To help make this visually clear, three distinct colour schemes had been established, alongside and overarching corporate level monochrome range.
The branding, completed by Wolff Olins, was extensive and contained plenty of elements that I could use to influence my designs. After initial discussions, animations, and concept designs, the client agreed upon an approach using the circles within their new logo as a brand element.
One of the most interesting parts of this project, related to the colour options. As with many asset management companies, there are different sectors contained within their own website, that due to legal responsibilities must remain separate. To help make this visually clear, three distinct colour schemes had been established, alongside and overarching corporate level monochrome range.
The branding, completed by Wolff Olins, was extensive and contained plenty of elements that I could use to influence my designs. After initial discussions, animations, and concept designs, the client agreed upon an approach using the circles within their new logo as a brand element.
One of the most interesting parts of this project, related to the colour options. As with many asset management companies, there are different sectors contained within their own website, that due to legal responsibilities must remain separate. To help make this visually clear, three distinct colour schemes had been established, alongside and overarching corporate level monochrome range.
The branding, completed by Wolff Olins, was extensive and contained plenty of elements that I could use to influence my designs. After initial discussions, animations, and concept designs, the client agreed upon an approach using the circles within their new logo as a brand element.
One of the most interesting parts of this project, related to the colour options. As with many asset management companies, there are different sectors contained within their own website, that due to legal responsibilities must remain separate. To help make this visually clear, three distinct colour schemes had been established, alongside and overarching corporate level monochrome range.
As we applied colours at the sector level we could keep each area distinct at a glance. However it provided the interesting challenge of ensuring that each element or component of the design system would pass accessibility standards against the various possible options.
Overall we created hundreds of variations of components for desktop, tablet and mobile that covered the extensive needs of all areas of the site. Using these we were able to create page templates that met any desired requirement.
As we applied colours at the sector level we could keep each area distinct at a glance. However it provided the interesting challenge of ensuring that each element or component of the design system would pass accessibility standards against the various possible options.
Overall we created hundreds of variations of components for desktop, tablet and mobile that covered the extensive needs of all areas of the site. Using these we were able to create page templates that met any desired requirement.
As we applied colours at the sector level we could keep each area distinct at a glance. However it provided the interesting challenge of ensuring that each element or component of the design system would pass accessibility standards against the various possible options.
Overall we created hundreds of variations of components for desktop, tablet and mobile that covered the extensive needs of all areas of the site. Using these we were able to create page templates that met any desired requirement.
As we applied colours at the sector level we could keep each area distinct at a glance. However it provided the interesting challenge of ensuring that each element or component of the design system would pass accessibility standards against the various possible options.
Overall we created hundreds of variations of components for desktop, tablet and mobile that covered the extensive needs of all areas of the site. Using these we were able to create page templates that met any desired requirement.
Using an atomic design system was key with these components, the smaller elements (typography, colour, actions etc) flowed into a separate Figma file for components. Along the way if any element needed changing or updating it could automatically update components along the line.
I also prototyped several pages that allowed the client to test interactions and experience real time feedback, this helped eliminate design choices on the go without needing to wait for live websites.
Using an atomic design system was key with these components, the smaller elements (typography, colour, actions etc) flowed into a separate Figma file for components. Along the way if any element needed changing or updating it could automatically update components along the line.
I also prototyped several pages that allowed the client to test interactions and experience real time feedback, this helped eliminate design choices on the go without needing to wait for live websites.
Using an atomic design system was key with these components, the smaller elements (typography, colour, actions etc) flowed into a separate Figma file for components. Along the way if any element needed changing or updating it could automatically update components along the line.
I also prototyped several pages that allowed the client to test interactions and experience real time feedback, this helped eliminate design choices on the go without needing to wait for live websites.
Using an atomic design system was key with these components, the smaller elements (typography, colour, actions etc) flowed into a separate Figma file for components. Along the way if any element needed changing or updating it could automatically update components along the line.
I also prototyped several pages that allowed the client to test interactions and experience real time feedback, this helped eliminate design choices on the go without needing to wait for live websites.
As a final deliverable of the project, I was tasked with creating a Digital Styleguide document for each atomic element, through to the final components. This included notations, instructions for use, dimensions for developers and each possible state.
As a final deliverable of the project, I was tasked with creating a Digital Styleguide document for each atomic element, through to the final components. This included notations, instructions for use, dimensions for developers and each possible state.
As a final deliverable of the project, I was tasked with creating a Digital Styleguide document for each atomic element, through to the final components. This included notations, instructions for use, dimensions for developers and each possible state.
As a final deliverable of the project, I was tasked with creating a Digital Styleguide document for each atomic element, through to the final components. This included notations, instructions for use, dimensions for developers and each possible state.
This deliverable was very positively received, the client loved the depth I had gone into regarding all possibilities and the quality of the work.
Overall the project was rated very highly and the client was incredibly happy. This became known as the gold standard of design systems within the agency and requests for my work on many similar projects.
This deliverable was very positively received, the client loved the depth I had gone into regarding all possibilities and the quality of the work.
Overall the project was rated very highly and the client was incredibly happy. This became known as the gold standard of design systems within the agency and requests for my work on many similar projects.
This deliverable was very positively received, the client loved the depth I had gone into regarding all possibilities and the quality of the work.
Overall the project was rated very highly and the client was incredibly happy. This became known as the gold standard of design systems within the agency and requests for my work on many similar projects.
This deliverable was very positively received, the client loved the depth I had gone into regarding all possibilities and the quality of the work.
Overall the project was rated very highly and the client was incredibly happy. This became known as the gold standard of design systems within the agency and requests for my work on many similar projects.