About the Project
Timeless Harmony Salon & Spa provides relaxation and de-stressing services that deliver an exceptional client experience. They offer a broad range of services including esthetic and hair services, massage treatments, reiki, reflexology, body treatments, hair removal, and laser skin treatments.
The old site was built years ago using WordPress. There was not so much design on it. There were broken links on the page. The contact form was not working. A lot of text content needed to be updated.
Project Goals
Transfer all the contents to the new site within a strict timeframe and ensure functionality.
Redesign the entire website to have a clean looking and make it mobile friendly
Create a style tile includes wireframes and mockups that would guide the visual design of the site
Research and Investigation
Have meetings with client to gain insight from the company and understand users’ needs and pain points.
"People cannot find where to book an appointment."
Buttons on each page
I can put a "Book Now" button at the end of the top menu bar, use a different background color to make it stand out, and make the menu bar sticky to the top.
"I want to encourage users to subscribe to our newsletter."
A pop-up window
Besides having a subscribe section on the home page, a pop-up window will show up after users visit the home page for 4 seconds.
- Study Websites in The Same Industry -
| Website | Pros | Cons |
|---|---|---|
| https://www.silverleafdayspa.ca/ | 1. Theme color: grey. 2. Page layout is simple and clean. 3. I like the fixed position for some images. | 1. Fonts are too small. 2. Not responsive. |
| https://www.elmwoodspa.com/ | 1. Theme color: blue and beige. 2. Impressive first look: Big hero/background images cover full width. 3. I like the transparent header changes to a white background when user is scrolling down. | On some pages, text content does not have enough contrast with the background image. |
| https://www.thelodgeatwoodloch.com/ | 1. Theme color: grey 2. Video on home page is attractive. | Contents take the full width of the screen and everything looks very big. |
- Sitemap -
Low Fidelity Design
- Wireframes -
The wireframes give the client a better idea of the layout of the site and where the content goes.
- Color Scheme -
The client had two versions of the logo. She preferred the one with light blue color, but also wanted me to use the other purple-ish blue on her site.
- Mockups -
What Is New
01
The website is now mobile-friendly. The home page is clean and well-organized. Font size is increased. I use images and background colors to separate content in each section.
02
The slide show on the home page provides some animation. I added a pop-up window for newsletter subscriptions.
03
The “Book Now” button is at the end of the menu bar, which is easy to find. The navigation menu is sticky on the top of the screen so that users can navigate the site easily and won’t get lost.
Reflection
This was my first client project. As I look back now, I see a lot of things that I could improve. For example, I could use the yellow color in the logo or add some grey color instead of using all blue tones colors for the site.
I was not satisfied with the slide show on the home page. My plan was to have a video instead, but I realized that the aspect ratio of my client’s video was almost 1:1. Therefore, it was not a good idea to make it cover the top of the screen and I replaced it with the slide show using pictures that my client provided. Those pictures might also not be the best ones for a slide show since they cannot cover the full width of the screen. But it makes better sense than the video.
I only had 8 weeks to complete this project, so I mainly focused design on those main pages that appear on the navigation bar. If I have extra time, I want to put more design on other sub-pages as well.