Web Development Archives - Havish Design

Urban Fabric Recruitment

admin — Mon, 16 Jan 2023 12:47:13 +0000

Urban Fabric Recruitment

Branding UI Design Web Development

Project overview

Urban Fabric was the brainchild of an experienced recruiter, who split off from their previous company to start their own venture, a recruitment startup that specialises in property management and surveyors. As a fledgling business, they needed to create a company image and an online presence from scratch. Grounded in the property sector Urban Fabric needed a brand that reflects their connection to the balance between the man-made and the natural, and a website to match. They wanted to build something exciting and modern, with a robust visual identity influenced by topography and cartography.

Process

The goal was to kick start the growth of Urban Fabric with a completely bespoke website with an excellent user experience and a foundational brand package to create a standout aesthetic. The first step was to gather as much information as possible about the business needs and desires. A stakeholder questionnaire was distributed that collected data on the business message, current assets, potential website information architecture (IA), competitors within the area and any inspirational resources. Equipped with an understanding of the business message and what inspires the client a mood board was generated. This fed directly into the logo design, including building the colour scheme and aligning the typography, forming a foundational branding package. The remaining data from the stakeholder questionnaire informed the IA, specified in a site map, and the process of detailing the design requirements for the website. Next, an iterative design process resulted in the finalised UI design, which was then all developed in-house into a brand-spanking new website build for the very satisfied Urban Fabric Recruitment.

Client

Urban Fabric Recruitment

Agency

Havish Design

Duration

12 weeks

Discover

Stakeholder questionnaire

Mood board

Branding

Logo design

Branding package

Define

Site map

Design requirements

Design

UI design

Website build

Branding

The company name originates from the fabric of city life and the intertwining buildings and streets. The client has a strong interest in maps and topography and wanted this reflected in the company image. At first, the mood board took more of a brutalist monochromatic direction. However, it was decided to implement colours that represented the duality between natural resources and urban development. The rich greens symbolise grass and trees and the sand colours for dirt and brick. In another light, the sand can seem gold in appearance and alongside the green tones, it translates to financial progress and prestige. Two web-optimised fonts were chosen for the typography, a bold header font that suited the original brutalist direction and an uncomplicated sans that lent itself to a clean UI design. Logo design evolved from many throwaway sketches to initially form two concepts, which were put in front of the client. A direction was chosen and tweaks were made to settle on the final form.

Mood board

View this asset in more detail

Design requirements

The data from the stakeholder questionnaire provided foundational guidelines when detailing the design requirements, supplemented by knowledge of current best practices and the market landscape. Furthermore, it gave insights into what content the client expected to be on the website. Based on that, a recommended IA was formulated and laid out visually in the form of a site map. The website has two types of users; candidates and clients. Candidates looking for a new job must feel confident that Urban Fabric can provide support. Clients provide those potential jobs and must be able to use the digital service without fuss.

Site map

View this asset in more detail

A website design language that is in line with the growing company brand.

Multiple contact forms for specific user tasks, e.g. upload a CV, upload a Job and a general enquiry.

Use of topographic illustrations to enhance the design as well as photos to make it more personable.

Coded with a focus on SEO to improve searchability and Google rankings.

User-friendly admin area so content can be quickly and easily updated.

A logical layout of content so potential clients can obtain information painlessly.

An easy-to-update jobs board that will display all current vacancies on the front end.

Fully responsive website to make it desktop, tablet and mobile friendly.

Website design

Following the design requirements, the branding package and IA, hi-fi screens were designed using Figma. To set up a design environment for efficiency and agility, the design system developed by Havish Design was adapted to organise components, colours and typography for this project. First, the home page was designed and delivered to the client to present the overall look and feel. Feedback was incorporated into further iterations and the remaining pages were created. Once the dev-ready designs were signed off, the bespoke website was developed and prepared for a painless release.

Design files

View the original Figma file

UFR Website

View the live website

Project reflection

The project undertaken for Urban Fabric Recruitment was a relatively cut-and-dry process, one that has been tried and tested at Havish Design. The overriding benefit was that the client felt guided throughout and comfortable with the direction it took at each stage. This helped the project to run smoothly and relatively painlessly. The result was that the client received something that exceeded their expectations, all on time and within budget. The lesson here was if it isn’t broken, don’t fix it.

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Urban Fabric Recruitment appeared first on Havish Design.

Fallen Oak Frames

admin — Sun, 15 Jan 2023 14:54:53 +0000

Fallen Oak Frames

Branding UI Design Web Development

Project overview

Fallen Oak Carpentry deals with all aspects of traditional oak frame carpentry. Using techniques handed down through generations Fallen Oak specialise in fitting green oak frames and restoring listed buildings. As a new facet of the business, they created a range of garden frames to be marketed as relatively out-of-the-box products to complement their highly bespoke service. The company had the beginnings of a brand, albeit basic and needed it to be more functional. Their only online channel was Instagram and they needed a website to push the business, especially the catalogue of new garden products. Fallen Oak wanted a brand that respected the traditional values of their craft and a platform to show off the product imagery.

Process

The proposal for Fallen Oak was to build a completely bespoke website with an excellent user experience and to create a foundational brand package to boost their company image, showing off their refined craft. First, a stakeholder questionnaire was distributed to gather insights into the current state of the business, including their needs and desires. This provided an understanding of the business message, current assets, potential website information architecture, competitors within the area and any inspirational resources. Next, a mood board was produced based on what Fallen Oak stands for and the features of the client’s inspiration. This drove the development of the branding package, which comprised the logo design, colour scheme and typography. For the purposes of the website, a competitor analysis was conducted leveraging data collected from the stakeholder questionnaire, allowing the design requirements to be defined. Next, the UI design was developed through an iterative process working closely with the client, aligning with their needs. Once finalised the website build was developed in-house resulting in a website that allows for Fallen Oak’s beautiful craft to shine.

Client

Fallen Oak Frames

Agency

Havish Design

Duration

12 weeks

Discover

Stakeholder questionnaire

Mood board

Branding

Logo design

Branding package

Define

Competitor analysis

Design requirements

Design

UI design

Website build

Branding

At the heart of Fallen Oak Frames is the knowledge and respect for traditional carpentry techniques and oak timber, which has been passed down through the family. This needed to be worked into the brand and the client was keen to integrate tools that have been used for hundreds of years. One requirement for the logo was that it also needed to work well as a stamp either embossed into a metal plate or branded straight into the wooden frame. As a result, the inspiration gathered in the mood board led the logo to be monochromatic and to use simple clean lines ensuring it pops from the background. Initially, a lighter palate was considered, however, the client preferred much darker colours using dark earthy greens and black as the primary colour scheme. These were complemented by a bright gold hue to be used for the accents and interactive elements, together achieving a distinguished and natural feel. A soft linear font was customised, swapping out the “a” for a traditional divider tool, and used only for the logo itself, whereas a web-optimised sans font was utilised in the UI design to maximise utility. Two logo design concepts were developed that evolved from a series of sketches. After presenting to the client, there was a standout direction that closely matched the one initially discovered in the mood board. A few iterations later, the final form was finalised, including responsive logo alternatives to optimise functionality.

Mood board

View this asset in more detail

Design requirments

The recommended information architecture (IA) and design requirements were detailed using the data gathered from the stakeholder questionnaire, which provided insights into the client expectations and needs, as well as the competitor analysis that improved understanding of the market landscape. Before proceeding with the design the IA and requirements were approved by the client. Users’ desired behaviour and the end goal are simple; to make an enquiry about booking in Fallen Oak for a project. However, the site provides two clear journeys for the different services, the first being for a customer that needs large-scale framing or restoration, the second being for those interested in garden structure products. The structure of the website is anchored on this distinction and the information is organised to guide the user effortlessly to their goal.

Competitor analysis

View this asset in more detail

The website design must follow the specifications of branding guidelines and build the company image.

Potential clients must be guided to a simple contact form for them to enquire about a new project.

Built with a user-friendly admin area to ensure that content can be easily maintained.

Created using a component library and a style guide to streamline the design process.

Logical IA that painlessly guides users through their journey to the intended goal.

A page that displays the garden structure products that can be easily managed by the webmaster.

Use of professional photos that showcase the services and products that the company provides.

Designed to be optimised on desktop, tablet and mobile making it fully responsive.

Website design

After client approval, the design requirements and IA informed the initial page structure and the branding package fed into building a component library, based on an ever-growing design system developed by Havish Design. This helped set up an effective design environment in Figma, enabling using components, colours and typography with agility. The first delivery to the client was the overall look and feel presented in the home page hi-fi UI design. The feedback captured was incorporated into the design of the remaining screens. This iterative cycle of feedback and improvement continued until the design was completely aligned with the stakeholder requirements. Following this, the dev-ready designs were developed into a website, tested and then released with minimal friction, resulting in a made-to-measure digital experience for the user and a highly satisfied client.

Fallen Oak website

View the live website

Design files

View the original Figma file

Project Reflection

The project detailed here for Fallen Oak Frames followed a format that has matured throughout the process of completing various projects at Havish Design. This helped to build confidence that an extensive project could be completed with agility and delivered according to the client‘s needs within a relatively short time frame. They felt in control of the direction of the project while feeling supported, ultimately resulting in a digital transformation that assimilates both the stakeholder and user needs. Fallen Oak now have a robust brand and user-friendly platform that brings awareness to their unique services and products, with the potential to boost company growth.

More projects

AI Learning Concept Design Gamified UX

Yapari: AI-Powered Learning

AI-powered learning that transforms curiosity into action, generating gamified courses on any topic for accessible, engaging education.

Read case study

Agile Iteration Design Systems Usability Testing

Simplifying Ticket Buying

Elevated the Event Details Page with a modern design and smoother ticket selection, delivered through incremental improvements.

Read case study

Concept Design Research Synthesis Vision Strategy

Redefining the Smart Queue

A fan-first vision that makes waiting painless through proactive prep, guidance, transparency, and a flexible, accessible UI.

Read case study

The post Fallen Oak Frames appeared first on Havish Design.