Case study

Alfa Marble

View the website
  • Marble & Granite
  • Research
  • Design
  • Development
  • Greece

Website Redesign Project

Mr. Hamad, owner of the company Alfa Marble, asked for my assistance with the upgrade of his website because:

the website was hard to maintain and use, even for uploading new photos and product descriptions
the design was dated and it didn’t show the real face of the company

The website was also “penalized” from users and Google because it was not mobile friendly. A responsive website was the way to go.

Special care was given to maintain the keyword ranking which the website already had in Google and other search engines and further improve them for search queries specific to the company’s products i.e. “marble”, “granite”, marble tables, etc.

Client

Alfa Marble Co. S.A.

Scope

Website Redesign

What I did

UI/UX Design, Responsive Web Design, SEO, Analytics Integration

Before

After

01.

Research Stage

Old technology

The website was built on a proprietary CMS based on Microsoft ASP.NET and was running only on Windows servers. It was both expensive and hard to maintain / upgrade.

Outdated design

The overall design was dated and didn’t live up to current expectations. The company wanted to show a renewed and fresh profile with a modern, responsive website.

Not responsive

The website was not mobile friendly and visitors had a hard time reading the content.

Difficult to maintain

The previous Content Management System was hard to use and required a lot of time and effort to add new services and products.

The website was hard to maintain and update and looked rather dated. Users visiting from mobile phones had a hard time viewing and reading the content.

Hamad HlaihelCEO, Alfa Marble Co. S.A.

02.

Understanding the goals

Increase website traffic

One of the main goals was to increase website traffic and search engine visibilty for the company’s products and services.

Higher on SERPs

Mr. Hamad also wanted his website to rank higher in search engine results for keywords related to the products and services he was offering.

Mobile friendly website

The use of mobile phones had skyrocketed since the first version of the page was available. It was important that the users were visiting a mobile friendly website.

Easy to manage

Another really important goal was to deploy a CMS that would make it easy for the personnel of the company to add new photos, products and services on the website.

03.

Keeping what works

Old URLs redirect

All the old URLs (links) where given a 301 value to maintain search engine ranking This was important because the website had to keep its 5 year keywords ranking.

Keywords

The website was already ranking for some keywords in the search engine results page (Google, Bing). Everything was carefully planned and redirected to maintain the SEO results.

Google Webmaster Tools

I added the website on Google Webmaster Tools to monitor the way that visitors find the page on Google and the search terms that they use.

Google Analytics Integration

The website was added to Google Analytics to collect, analyze and assess the way the visitors are using the website. This helped avoid the guesswork of what works and what is not.

04.

Preparation and execution

New platform

The platform of choice for the new website was WordPress, a Content Management System known for its’ ease of use and its’ customization and extendability.

New design

The website was redesigned from scratch using Figma for wireframing and mockups, giving the owner a clear picture of what the final website would look and feel.

Staging

For the development of the new website, I chose a fast and high-resource Linux server. This way, the client coud see the development process in real-time.

User Personas

We clearly defined the comnpany’s ideal customer which helped us in the overall design and the website’s tone of voice.

Color palette

The color palette was based on the company’s renewed logo and branding. Using orange for the accents and buttons (calls to action) made everything pop-out and usable.

#f6911e

#ff8800

#333333

#7a7a7a

#e1e1e1

#ffffff

Font

For the font we went with Open Sans, using bold weights for the headings and normal weights for the paragraph texts. Open Sans is a Sans Serif font (with no edges), has full support for the Greek language, is clean and easy to read, and gave a modern and refreshed look to the website.

Opens Sans Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans Regular

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>
a b c d e f g h i j k l m n o p q r s t u v w x y z

Opens Sans Light

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br>
a b c d e f g h i j k l m n o p q r s t u v w x y z

Technologies

WordPress CMS

  • Enfold theme
  • 2 languages
  • Contact form with file upload

Google Optimized

  • Google Analytics 4
  • Google Search Console
  • Google My Business

Custom Code

  • Custom CSS for mobile
  • Custom CSS for tablets
  • Custom Javascript

Speed Enhancements

  • Page caching
  • CSS and Javascript minification
  • Cloudflare CDN