New Sapphira Website
Sapphira has a new website at http://www.aolhamilton.com/david/webdesign1-ex3. The new site prototype was guided by the client's own business goals and a website purpose statement and a site plan that was created by me earlier in the site's planning stages.The text and images that were provided by the client have been used in the site with the addition of some stock photography that better represents some of the key Spa and Salon services.
I have incorporated the new Sapphira logo and the color scheme from the mood board into the HTML layout and populated the site with the appropriate images and graphics that directly relate to the text content and all of Sapphira services.
The overall plan for the creation of the Sapphira website was to follow certain industry standard design conventions as well as incorporate the strengths of the competitor’s sites as shown in the competitive analysis. You can now see all of these features have been successfully integrated into the New Sapphira Spa and Salon website.
The Sapphira site has a clean contemporary look and feel. Pictures, graphics and text are perfectly aligned and squared up with each other with generous white space separating each section from one another.
I have used a modern sans-serif typeface named Hind Siliguri from Google Fonts and it is imbedded into the website coding, so that all users will be able to see that particular typeface on every page of the Sapphira Website and the text will look the same, no matter which device is used to view the site.
Small text throughout the site has been given a gray color to make it easier for the user to read on a white background. Large amounts of text, has been broken up into smaller text chunks with capitalized lead-ins to make them easier for the user to read.
The navigation of the site is modern and easy to use. It is well organized into six main categories and some have drop-down menus with additional related selections. There is a hover effect on the navigation links and the active link is indicated with a different color to let the user know where they are located on the site.
There are other modern design features incorporated into the site such as a slide show, which advances forwards automatically or can be operated manually with the left and right controls. I have created nine visuals to populate the slide show which are clickable and link directly to the page relating to the image and text graphic. There are five sizes for each slide that are used for optimal performance of the slide show specifically for mobile devices.
The Home Page has been purposely designed to maximize navigation with minimal text which will maximize usability and keeps the focus of the Home page on navigation. Navigation on the home page has also been optimized by including a navigational gallery of images below the slide show. These image buttons are a quick visual navigation link to important pages on the website for the user.
I have also designed simple and modern icons to support the names of important elements throughout the site such as Appointment, Hours, Location, Refer Friend, and Newsletter for quick visual recognition by the user.
The buttons throughout the site have a simplified and modern look, and each has an interactive hover effect.
Another modern and very cool design feature is the accordion drop-down bars that are featured on the About, Services and Shop pages. These drop-down bars activate the animation using powerful JavaScript coding which also controls the plus and minus signs.
The e-commerce portion of the website definitely gives the Sapphira Website an advantage over the competition. It allows the users to quickly scan and select the services which they wish to buy and add them to their shopping cart.
Another strong advantage of the Sapphira website over the competition is the appointment page. The user fills out the required text fields with the requested information and submits it to Sapphira for confirmation of their next appointment online.
Responsive and Mobile Friendly Website:
If we look at the competitive analysis and the two-by-two, Age/Features Comparison, it clearly indicated that there was an opportunity to appeal to all age groups by using more modern Design Features on the site and creating a mobile friendly website. The Sapphira website is totally responsive and mobile friendly, and because of this, has improved usability for mobile users as compared to the competition. This definitely gives Sapphira a superior advantage over the competition by attracting more mobile users, which currently represents about 60% of all traffic on the web.
Areas to be completed at a later date:
As you can see, a few elements of the website are not yet fully functional at this time and these areas will be finished up later. These elements are as follows:
The html, CSS and JavaScript coding for all pages of the Sapphira Website has been checked and validated. I have tested the website on multiple web browsers and found that it functions perfectly and works great on most devices from desktop to mobile.
In conclusion, I am sure you will agree that the new Sapphira Website design direction, colors, content and features successfully meet all of Sapphira’s business goals and closely follows the purpose statement. The website also accurately follows the approved site plan which was based on sound research and a comprehensive competitive analysis.
From every aspect, this new website clearly displays that Sapphira’s is Hamilton’s Premier Spa for a Fully Relaxing, Energizing, and Luxurious Experience and this will ensure its’ future success.
If you would like more information about the professional graphic and web design services which I can provide your business, or if you require a free quote, please follow the link to my website located at http://www.littlefield.ca and you will be able contact me from there.
Sapphira has a new website at http://www.aolhamilton.com/david/webdesign1-ex3. The new site prototype was guided by the client's own business goals and a website purpose statement and a site plan that was created by me earlier in the site's planning stages.The text and images that were provided by the client have been used in the site with the addition of some stock photography that better represents some of the key Spa and Salon services.
 |
| The Sapphira website uses colors from the mood board. |
I have incorporated the new Sapphira logo and the color scheme from the mood board into the HTML layout and populated the site with the appropriate images and graphics that directly relate to the text content and all of Sapphira services.
The overall plan for the creation of the Sapphira website was to follow certain industry standard design conventions as well as incorporate the strengths of the competitor’s sites as shown in the competitive analysis. You can now see all of these features have been successfully integrated into the New Sapphira Spa and Salon website.
The new Sapphira Website successfully follows certain Business Goals which are:
- Promote the business by providing basic information on the spa’s services: pricing, hours, contact information, and so on, as well as provide customers with a relaxing, energizing and luxurious experience.
- Use new ways to grow the business by marketing the site through email marketing, interactive site features and other features that are similarly offered by the competition like: newsletters, online scheduling, and slideshow tours.
The Website also follows the Purpose Statement which is:
- Promote and position the Sapphira Spa and Salon as the Premier Spa and Beauty Salon in the Greater Hamilton area, providing customers with a relaxing, energizing, and a luxurious experience.
- Grow the business by marketing the site through the use of email marketing, interactive site features and other features that are similarly offered by the competition like: newsletters, online scheduling and slideshow tours.
- New Sapphira logo in the top left of the header on every page, which when clicked navigates back to the home page.
- Global navigation with links to major levels of the website, including drop-down menus and sub-navigation links are located at the top right of every page.
- Slideshow tour at the top of home page displaying all major salon services available with clickable links which navigate to the related pages.
- Positioning headline on the home page that relates directly to the original Sapphira Website Purpose Statement.
- Gallery style navigation on the home page, which the user can use to quickly navigate to the major areas on the website with modern interactive buttons that are animated to increase in size during hover.
- Book appointment button on every page except the appointment page, which navigates to the appointment page.
- Spa hours conveniently located on the home, appointment, and contact page.
- Location map, address, and phone number on the home page and the contact page.
- Refer A Friend link is located on the home page to collect email contacts from website traffic.
- Newsletter promotion form on the home page, collects email addresses from website traffic. Collected email address data is sent to my email address.
- Footer bar located on every page contains duplicate global navigation links, social media links and link to Littlefield.ca portfolio website.
- Animated Back to the top button is located on every page in the lower right side of every page.
- At the top of every page except the home page is a relaxing and calming image of a relaxation room furnished with comfortable overstuffed massage beds, candle lanterns on a wood floor and surrounded by whimsical olive sheers. This relaxing scene sets the tone for the site and the color has been matched to the header of the page.
- About pages include animated accordion drop-downs that reveals Spa, Owner, Staff, Mission, and Video Tour sections.
- Services pages include animated accordion drop-downs that reveals Massage, Nails, Makeup, Hair Removal, and Facials services.
- Shop pages include animated accordion drop-downs that reveal Gift Cards, Spa Packages and Special Events sections.
- Appointment page includes appointment form and spa hours.
- Contact page includes address, phone, google map, contact form, spa hours and book appointment link.
The Sapphira site has a clean contemporary look and feel. Pictures, graphics and text are perfectly aligned and squared up with each other with generous white space separating each section from one another.
I have used a modern sans-serif typeface named Hind Siliguri from Google Fonts and it is imbedded into the website coding, so that all users will be able to see that particular typeface on every page of the Sapphira Website and the text will look the same, no matter which device is used to view the site.
Small text throughout the site has been given a gray color to make it easier for the user to read on a white background. Large amounts of text, has been broken up into smaller text chunks with capitalized lead-ins to make them easier for the user to read.
The navigation of the site is modern and easy to use. It is well organized into six main categories and some have drop-down menus with additional related selections. There is a hover effect on the navigation links and the active link is indicated with a different color to let the user know where they are located on the site.
There are other modern design features incorporated into the site such as a slide show, which advances forwards automatically or can be operated manually with the left and right controls. I have created nine visuals to populate the slide show which are clickable and link directly to the page relating to the image and text graphic. There are five sizes for each slide that are used for optimal performance of the slide show specifically for mobile devices.
The Home Page has been purposely designed to maximize navigation with minimal text which will maximize usability and keeps the focus of the Home page on navigation. Navigation on the home page has also been optimized by including a navigational gallery of images below the slide show. These image buttons are a quick visual navigation link to important pages on the website for the user.
I have also designed simple and modern icons to support the names of important elements throughout the site such as Appointment, Hours, Location, Refer Friend, and Newsletter for quick visual recognition by the user.
The buttons throughout the site have a simplified and modern look, and each has an interactive hover effect.
Another modern and very cool design feature is the accordion drop-down bars that are featured on the About, Services and Shop pages. These drop-down bars activate the animation using powerful JavaScript coding which also controls the plus and minus signs.
The e-commerce portion of the website definitely gives the Sapphira Website an advantage over the competition. It allows the users to quickly scan and select the services which they wish to buy and add them to their shopping cart.
Another strong advantage of the Sapphira website over the competition is the appointment page. The user fills out the required text fields with the requested information and submits it to Sapphira for confirmation of their next appointment online.
Responsive and Mobile Friendly Website:
If we look at the competitive analysis and the two-by-two, Age/Features Comparison, it clearly indicated that there was an opportunity to appeal to all age groups by using more modern Design Features on the site and creating a mobile friendly website. The Sapphira website is totally responsive and mobile friendly, and because of this, has improved usability for mobile users as compared to the competition. This definitely gives Sapphira a superior advantage over the competition by attracting more mobile users, which currently represents about 60% of all traffic on the web.
Areas to be completed at a later date:
As you can see, a few elements of the website are not yet fully functional at this time and these areas will be finished up later. These elements are as follows:
- Refer Friend page which will have a form that will collect user registration data.
- Video Tour. This video tour will be produced at a later date and added to the site. When completed the video will start when the video image is clicked by the user.
- Add to cart page. This page will be created later and integrated into the website to allow users to make online purchases of Sapphira Salon and Spa products and services from the website.
- PHP coding to allow data collection from the appointment page form.
- Google maps integration with the contact page and the home page of the website.
- PHP coding to allow data collection from the contact form on the contact page.
- Facebook page and Instagram page.
The html, CSS and JavaScript coding for all pages of the Sapphira Website has been checked and validated. I have tested the website on multiple web browsers and found that it functions perfectly and works great on most devices from desktop to mobile.
In conclusion, I am sure you will agree that the new Sapphira Website design direction, colors, content and features successfully meet all of Sapphira’s business goals and closely follows the purpose statement. The website also accurately follows the approved site plan which was based on sound research and a comprehensive competitive analysis.
From every aspect, this new website clearly displays that Sapphira’s is Hamilton’s Premier Spa for a Fully Relaxing, Energizing, and Luxurious Experience and this will ensure its’ future success.
If you would like more information about the professional graphic and web design services which I can provide your business, or if you require a free quote, please follow the link to my website located at http://www.littlefield.ca and you will be able contact me from there.
Comments
Post a Comment