DesignDevelopment

Our recent work – March 2023

Written by Finn - 31/03/2023

It’s been a couple of months since we last chronicled our recent work and since then we’ve been busy on a number of projects. There’s definitely more of a design focus ahead in this article, as I take a look at recent website designs, wireframes and branding work.

 

HART PMS

We have begun working on a project with HART PMS, which involves branding and a new website. HART provide a property management system for the hospitality industry, with a predominant customer base of high-end boutique hotels. Their software allows hoteliers to manage all aspects of their property, from room booking and front office management to taking golf course bookings, inventory control and room maintenance and reporting.

Prior to beginning a project with us, HART had an existing logo and a website, which was built several years ago and now feels dated with a tech-heavy focus. Since that site was built, the HART software has changed significantly and one of the main goals for the project was to create a modern website and brand that reflected the true luxury feel of the hotels HART work with while retaining a technological undertone.

 

Website wireframe

Before mapping out the pages for the new HART website, we identified the key pages and the journeys the client wanted users to take. With a push to generate enquiries, we recognised the importance of clear signposting to the relevant pages that would result in conversions. These were identified as the individual modules and booking engine pages, covering the features and benefits of each. With this in mind, a sitemap was finalised and work on the interactive wireframe could begin.

 

 

Focusing on clear messaging and calls to action to provide users with key information and direction to internal pages, the homepage introduces both the HART system and HART as a company, while also highlighting exactly what the software can do.

 

 

Following on from the homepage, many of the internal pages follow a similar approach, giving the client complete flexibility going forward to easily add new content blocks. With this style of approach to the wireframe, we were able to map out a variety of content blocks, which cover different types of content, from stats and feature lists to video content and testimonials, making it easy for future additions as the system and its features grow.

 

 

Alongside the modular considerations, the wireframe followed a mobile-first approach, with a focus on the responsive nature of the website, as well as the experience for mobile users. This included smooth menu transitions and prominent placement of key content and links on smaller screens. We also noted how imagery may benefit from changing between devices, such as showing a mobile website mockup on smaller screens, while a more standard browser mockup would be better suited to desktop devices.

 

Branding

The existing HART logo had been in place for some time and like the website, had started to look dated. Making use of bed-like features in the logo’s ‘H’, it lacked scalability and our client also wished to move away from brighter primary colours that often suggest a tech-heavy brand.

 

 

Creating a few different concepts for our client to consider, one was chosen and refined. The new logo gives a subtle nod to what came before, making use of a symbol that triples up as a view of a bed from above, from the end and as an ‘H’.

 

 

Alongside the brand’s primary logo, variations were also designed for the individual HART systems, which included strapline additions and colour changes, which began to form the brand colour palette.

 

 

With the logos and primary colours confirmed, we also looked at brand fonts, putting together a couple of brand cheatsheets. The new branding meets our client’s criteria of combining luxury with technology, unanimous with hoteliers.

 

 

Now that the branding basics and website wireframe are in place, we’re ready to move on to the next stage of the project, the website design. We can’t wait to get started on this and it won’t be long until the designs are completed, followed by the development work and eventual launch of the website. Keep your eyes peeled!

 

An Oakpark proposal

We’ve been working with Oakpark Security for several years now and in the last few, they’ve approached us to help them with designing proposal documentation. Recently we revisited a document they presented to Magnus Group, updating content and imagery and adding new pages for a new proposal they were submitting.

 

 

Making use of Oakpark’s professional image library and prominent use of their client’s branding, the resulting document reiterates Oakpark’s care, diligence and mindset for keeping businesses and their premises secure.

 

Collabow website designs

A recent project for us involved the wireframing and designing of a new homepage for Collabow, as well as key sections for other pages and copywriting on the homepage. Collabow is a file-sharing and management tool that allows its users to organise their documents and collaborate online. With options for secure cloud storage, file transfers, chats and task lists, Collabow helps to streamline your processes into one system.

 

 

Starting by researching Collabow’s competition and reviewing the current homepage, signposting and key features were identified and agreed upon before work on the wireframe started.

 

 

With the wireframe complete, work on the homepage design and additional assets could begin. Giving Collabow a modern feel and creating imagery to match, the new homepage highlights features, demonstrates Collabow’s uses and directs users to their signup options.

 

Schools’ Choice document generation app

Having created a new website for Schools’ Choice last year, we’ve recently started working on a new project for them; a document generation app. The project started with a system sitemap being drawn up and a feature list being identified. We then started working on the interactive wireframe, having ongoing discussions regarding options we give to users and data retrieval from Schools’ Choice’s third-party system, iTrent.

 

 

The document generation app allows its users to create documents by retrieving personnel data from iTrent and combining that with data types created within the system. For this to exist, we also had to give users the ability to create paragraphs, business rules and document templates, while also providing options to manage users and add customer data to the system.

 

 

During wireframing, we considered the different user levels. Admin users have the ability to add and manage data and users, preview data and templates and generate documents. The standard users, known as Creators only have access to preview templates and their components and generate documents.

With the wireframe now complete, Jonathan has started working on the build for the application and we’ll be sure to talk about that once complete.

And that’s it for now. We’ve been busy on various projects and those that are ongoing, we’re excited to see them through and hope to be able to share updates when the websites and systems are launched.