Visual Design
Building a New Foundation
Evolving a Brand's Structure and Strengthening a Legacy
Visual Design
Building a New Foundation
Evolving a Brand's Structure and Strengthening a Legacy
Visual Design
Building a New Foundation
Evolving a Brand's Structure and Strengthening a Legacy
Overview
Role
Ui Designer, Project Manager
Date
March – May 2023
Scope
Market Research, Information Architecture, Wireframing, Content Strategy, Ui Designing.
Project Summary
Watkins-Steel, an award-winning steel sub-contractor specialising in structural steel and metalwork fabrication, wanted to revitalise its website. As the UI Designer and Project Manager, the task was to create a contemporary online presence that served as a dynamic showcase for their portfolio of steel works.
Objectives
The website redesign centres on four core objectives. Firstly, to revitalise the brand by aligning the site with the ideal of modern steel construction standards. Secondly, to enhance user experience through a clear, consistent, and simple design. Thirdly, to showcase the brand's story, history, and projects. Lastly, to implement responsive design for optimal user experience across devices and screen sizes.
Background
Crafting a New Brand Structure
Recognising the importance of a contemporary online presence, the website aims to amplify the essence of the brand. Emphasising a commitment to excellence, transparency, a rich history, and a portfolio of award-winning projects.
Background
Crafting a New Brand Structure
Recognising the importance of a contemporary online presence, the website aims to amplify the essence of the brand. Emphasising a commitment to excellence, transparency, a rich history, and a portfolio of award-winning projects.
Background
Crafting a New Brand Structure
Recognising the importance of a contemporary online presence, the website aims to amplify the essence of the brand. Emphasising a commitment to excellence, transparency, a rich history, and a portfolio of award-winning projects.
Planning Whiteboard
Workshop
Discovering New Possibilities
Engaging with the client during a initial workshop to gain an understanding of their brand, preferences, and functional requirements. This session provided invaluable insights that guided the entire design process.
Workshop
Discovering New Possibilities
Engaging with the client during a initial workshop to gain an understanding of their brand, preferences, and functional requirements. This session provided invaluable insights that guided the entire design process.
Workshop
Discovering New Possibilities
Engaging with the client during a initial workshop to gain an understanding of their brand, preferences, and functional requirements. This session provided invaluable insights that guided the entire design process.
Key Deliverables
Refreshed Branding
Updating branding to match the contemporary styles of their work.
Portfolio Showcase
A prominent CMS to showcase their large portfolio of award winning work.
Storytelling
A dynamic page to focus on the story telling of the brands rich history.
Planning
Site Map & Information Architecture
Building on the workshop findings, the website's structure was planned, considering the existing site and SEO rankings of each page. The client's emphasis on highlighting the company's story, history, and projects influenced the Information Architecture decisions.
Planning
Site Map & Information Architecture
Building on the workshop findings, the website's structure was planned, considering the existing site and SEO rankings of each page. The client's emphasis on highlighting the company's story, history, and projects influenced the Information Architecture decisions.
Planning
Site Map & Information Architecture
Building on the workshop findings, the website's structure was planned, considering the existing site and SEO rankings of each page. The client's emphasis on highlighting the company's story, history, and projects influenced the Information Architecture decisions.
Information Architecture
Planning the information architecture ensured each page had a defined purpose, aligning client expectations with the content needed for a seamless execution.
Planning the information architecture ensured each page had a defined purpose, aligning client expectations with the content needed for a seamless execution.
Planning the information architecture ensured each page had a defined purpose, aligning client expectations with the content needed for a seamless execution.
Wireframes
Visualising Structure
The information architecture was used to framework the wireframes, outlining the layout and functionality of each page. These wireframes provided a blueprint for subsequent design phases.
Wireframes
Visualising Structure
The information architecture was used to framework the wireframes, outlining the layout and functionality of each page. These wireframes provided a blueprint for subsequent design phases.
Wireframes
Visualising Structure
The information architecture was used to framework the wireframes, outlining the layout and functionality of each page. These wireframes provided a blueprint for subsequent design phases.
Wireframes
Exploration
Crafting the Visual Identity
After finalising the information architecture, approved by the client, the content gathering phase commenced. Following this crucial step, two distinct design versions were crafted.
Exploration
Crafting the Visual Identity
After finalising the information architecture, approved by the client, the content gathering phase commenced. Following this crucial step, two distinct design versions were crafted.
Exploration
Crafting the Visual Identity
After finalising the information architecture, approved by the client, the content gathering phase commenced. Following this crucial step, two distinct design versions were crafted.
Designing two options served the purpose of contextualising ideas and visualising the potential for creating a uniquely branded presence based on styling. Ultimately, the client made the decision to proceed with option 2 as the foundation for the design.
Designing two options served the purpose of contextualising ideas and visualising the potential for creating a uniquely branded presence based on styling. Ultimately, the client made the decision to proceed with option 2 as the foundation for the design.
Designing two options served the purpose of contextualising ideas and visualising the potential for creating a uniquely branded presence based on styling. Ultimately, the client made the decision to proceed with option 2 as the foundation for the design.
Visual Design
A Foundation of Clarity & Simplicity
Guided by delivering a seamless and impactful user experience, the design principles prioritised clarity in communicating the company’s narrative, history, and projects. The visual design was to allow for a strong brand foundation to be laid.
Visual Design
A Foundation of Clarity & Simplicity
Guided by delivering a seamless and impactful user experience, the design principles prioritised clarity in communicating the company’s narrative, history, and projects. The visual design was to allow for a strong brand foundation to be laid.
Visual Design
A Foundation of Clarity & Simplicity
Guided by delivering a seamless and impactful user experience, the design principles prioritised clarity in communicating the company’s narrative, history, and projects. The visual design was to allow for a strong brand foundation to be laid.
Consistency played a pivotal role, aligning design elements with principles of minimalism and whitespace. The final design expanded upon and elevated the existing visual identity. The approach was to blend bold angular shapes synonymous with steel structures, reinforcing the brand's robust character with fine lines and large imagery that showcased an impressive portfolio of projects.
Consistency played a pivotal role, aligning design elements with principles of minimalism and whitespace. The final design expanded upon and elevated the existing visual identity. The approach was to blend bold angular shapes synonymous with steel structures, reinforcing the brand's robust character with fine lines and large imagery that showcased an impressive portfolio of projects.
Consistency played a pivotal role, aligning design elements with principles of minimalism and whitespace. The final design expanded upon and elevated the existing visual identity. The approach was to blend bold angular shapes synonymous with steel structures, reinforcing the brand's robust character with fine lines and large imagery that showcased an impressive portfolio of projects.
Outcome
Reinforcing a Brands Identity
Consistency played a pivotal role, aligning design elements with principles of minimalism and whitespace. The final design expanded upon and elevated the existing visual identity. The approach was to blend bold angular shapes synonymous with steel structures, reinforcing the brand's robust character with fine lines and large imagery that showcased an impressive portfolio of projects.
Outcome
Reinforcing a Brands Identity
Consistency played a pivotal role, aligning design elements with principles of minimalism and whitespace. The final design expanded upon and elevated the existing visual identity. The approach was to blend bold angular shapes synonymous with steel structures, reinforcing the brand's robust character with fine lines and large imagery that showcased an impressive portfolio of projects.
Outcome
Reinforcing a Brands Identity
Consistency played a pivotal role, aligning design elements with principles of minimalism and whitespace. The final design expanded upon and elevated the existing visual identity. The approach was to blend bold angular shapes synonymous with steel structures, reinforcing the brand's robust character with fine lines and large imagery that showcased an impressive portfolio of projects.
Previous Project
Next Project
Previous Project
Next Project