KS.

Kazuma Shimizu

Work

About

Get in touch

KS.

Kazuma Shimizu

Work

About

Get in touch

KS.

Kazuma Shimizu

Work

About

Get in touch

KS.

Kazuma Shimizu

Web Design

Building a New Foundation

Evolving a Brand's Structure and Strengthening a Legacy

Web Design

Building a New Foundation

Evolving a Brand's Structure and Strengthening a Legacy

Web 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

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

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

Information Architecture

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

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.

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

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.