RoofMaker

Mobile-first redesign for rooflight manufacturer with built-in customer quote builder

Role

Lead Designer

Industry

E-Commerce
Manufacturing

Year

2021-22

Design Tools

Sketch,
InVision

Platform

WordPress,
Laravel

The Brief

Established rooflight manufacturer based in Leicester supplying contemporary and traditional rooflights and skylights nationwide

Roof Maker, an established rooflight manufacturer based in Leicester supplies contemporary and traditional rooflights and skylights nationwide.

After working with SOtechnology on a number of previous projects primarily focusing on their internal quoting systems the next phase of work saw a brand overhaul on their existing site. Built on WordPress it had become dated and littered with age old projects and products that no longer reflected how they saw themselves in the market.

Challenge

The requirement was a website and brand identity to showcase their competencies through digital channels. Because the existing site was found to be confusing to the user the main requirement was to drive the user to order through their online quote builder.

Outcome

The final deliverable is a responsive website that delivers a great experience across all devices and a clear visual brand identity. The online quote builder utilises a quick turn around for the customer with direct integration into the manufacturing process.

Ideation & Wireframes

After the project scope and page content was agreed upon, several ideas were transformed into a more tangible form by creating wireframes. These designs were completed to a fairly hi-fi level; resulting in a comprehensive overview of each page for the site. We iterated a few times with the client to get the wireframes into a state we wanted to continue with.

To ensure the full site was accounted for, key pages were identified that would need to be wireframed before moving to design

Setting Brand Guidelines

Before the designs could take shape, the brand style guides were outlined. A geometric sans-serif typeface and use of a light but bold colour palette helped enrich the pages of the website. This helped shaped the direction of the designs, along with the personality and tone of the company.

Guidelines helped define the look and feel to the design.

Creating a Design System

Before the making of the website, the brand identity needed to be designed which outcomes can be found below. We decided to go for a timeless style that doesn’t grab too much attention as their work itself should stay in the spotlight. A recurring visual element is the ‘ink-drop’ that first stands for the impact of the company and then for the unfolding complexity of the context in which they design.

Exporting a design system kept key pages on brand and consistant throughout the design stage.

A Mobile First Design Process

“Progressive Advancement”

My role in this project was of the UI/UX designer. Focusing on a mobile-first design delivers the right user experience to the right device.

Working with a Progressive Advancement in mind, meaning designing for mobile users first the most basic functions & features were always the primary focus. When the designs moved to desktop the visuals were able to take onboard interactions and more complicated effects for a better user experience.

Delivering the final prototype

Final visuals were approved with only minor changes needed to the customer quote builder before moving on the build. Once in build stage my role was supply of all assets and imagery to the dev team exporting the visuals through InVision.

Reflection

With the site so recently going live I’m yet to see any analytical results but it has been a very well ran project and on budget from design through to launch with the client in a position to substantially grow their market share.