Francesco D'Agostino
Digital Designer

Design system and UI design for the giemme.it website

Website redesign for content management and marketing campaigns

Services
Project
Client
TL;DR:

This is a redesign and web development project for the new website of Giemme, a leading Italian manufacturer of customised merchandise. As part of the company’s marketing strategy, the website acts as a central hub, bringing together all content which is then reworked and reposted on various channels.

Team:
Deliverables:
  • Analysis of existing website and competitor benchmark sites
  • Wireframe and sitemap content for the new website
  • Website UI and Design System
  • Development of the website on the WordPress CMS with a custom theme
  • Website user guide
Screenshot of the hero section from the home page of the giemme.it website in desktop version
Screenshot of the hero section from the home page of the giemme.it website in its mobile version

Project and goals

An operational centre for communication and marketing

The main objective of the Giemme Srl website is to serve as a central hub where all content is gathered and presented in the most comprehensive form possible before being reworked and redistributed across various marketing channels.

Giemme designs and manufactures a wide range of promotional merchandise. The website reflects the breadth of the product and service catalogue and organises related content into different “content types”, including product and service catalogues, a portfolio, a news section, and landing pages for more specific marketing and advertising campaings.

UI Design

Design System

A Design System was created to guide the development of the website’s user interface. Drawing on the work carried out on Giemme’s brand identity, it defines the rules that the various components of the theme must follow. The components of the UI are:

Elements: fonts, colours, spacing, separators.

Blocks: buttons, images, icons, text blocks.

Patterns: sets of multiple blocks that form complete sections.

Templates: define the layouts of entire pages with specific content such as: content archives, case studies, individual service pages, and blog articles.

Below are some of the blocks and patterns designed for the website.

Primary button style
Primary title style
Secondary button style
Quotations
Card for catalogue pages
Card for case studies
Website menu on the mobile version

Implementation

Content map and CPT

To facilitate interaction with content – both internally within the company during production and publication, and externally for users visiting the website for the first time – a series of Custom Post Types have been created with specific fields, categories and tags that guide content entry and allow it to be easily retrieved via queries where necessary on the front end.

These include portfolio case studies, product catalogues, service lists, manufacturing techniques, and posts for news and events.

Header and website menu interaction on the desktop version

Implementation

Website UI

Some of the blocks, patterns and pages designed for the website.

Implementation

Landing pages for marketing campaigns

In addition to the CPTs described above, a series of templates has also been created to allow the company’s sales, marketing and SEO staff to create landing pages for use in specific campaigns.

Place your mouse or tap over the image to scroll through the landing page.

Results

Increase conversions and engagement on the website

Comparing the first half of the year with the new redesign with the same period last year shows an increase in contacts received through the website, greater overall engagement with and interaction with content, and more visits to the website from mobile devices.

Time spent on the website
+ 0 %
Visits from mobile devices
+ 0 %
Number of contacts via the website form
+ 0 %
Place your mouse or tap over the image to scroll through the landing page.
Place your mouse or tap over the image to scroll through the landing page.
Mobile menu on the mobile version of the website

Thinking about a similar project?

Get in touch so we can make it happen together!

Similar projects