Profession
- Massage tables
- Holistic therapies
Services
- Research
- Development
- PSD to WEB
Country
- Greece
Massage Tables
Mr. Michael Christopoulos (a.k.a. Paribodha) apart from being a good friend and a good man, is my Reiki teacher from whom I got my Reiki degree.
We started working together when he wanted me to update the content on his website. The CMS (content management system) on which his website was created was old, difficult to use and very hard to maintain.
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
After spending a lot of hours on simple tasks that would normally take a few minutes, I advised him to switch over to WordPress and he agreed without any hesitation.
Mobile responsiveness played a big role in his decision. Visitors were having a hard time viewing the website’s content and navigate between pages, product and important information.
Special attention was given to maintain the keywords that the website was already ranking for in Google and other search engines. The major keywords were focused around search queries like “massage tables”, “massage chairs”, “massage consumables”, etc..
Client
Healing Touch
Scope
Website Redesign
Deliverables
PSD to WEB, Responsive Web Design, SEO, Analytics Integration
Before
After
01.
Research Stage
Old technology
The website was built with an old, proprietary HTML/PHP based CMS which was not maintained or updated anymore.
Outdated design
The overall design was dated and didn’t live up to current expectations. Michael wanted to show a new, fresh and updated face for his business with the help of a new, modern and mobile-friendly website.
Not mobile friendly
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 upload new products and photos.
”My website was so difficult to update that I had to rely to Manolis to upload new products and information. As a result, I was wasting time and money on a website that also lacked a modern design.
Μιχάλης ΧριστόπουλοςFounder της Healing Touch και του Massage Tables
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
Michael wanted to increase his website’s visibility in search engines for the keywords of his products and services.
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.
Convert a Photoshop mockup to a website
PSD
WEB
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.
PSD to WEB
The website design was created by an independent designer. I was assigned to transfer and translate the Photoshop design to a website.
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 analyzed the ideal customer of the website which helped create the right the tone of voice for the copy. View below for more information.
Color palette
The color palette was based on the company’s branding guidelines.
#04D9C4
#049DD9
#0487D9
#0D0D0D
#DDDDDD
#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.
Open 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
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
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 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
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
- Bridge theme
- Greek language
- Privacy plugins
Google Optimized
- Google Analytics 4
- Google Search Console
- Google My Business
Custom CSS
I wrote some bits of custom CSS code to replicate the layout from the designer’s Photoshop mockup.
Speed Enhancements
- Page caching
- Javascript & CSS Minification
- Image resizing and compression
