Profession
- Marble & Granite
Responsibilities
- Research
- Design
- Development
Country
- Greece
Alfa Marble
Mr. Hamad, owner of the company Alfa Marble, asked for my assistance with the upgrade of his website because:
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
Under the hood, this website is full of technology that helps it in delighting the visitor and rank higher in search engines results.
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