Self Initiated Project – First Design (+ 2nd Design explanation)

Based on my client feedback, all research and what I already had in my head (ideas) have quickly sketched wireframes of home page.


sketch

 Next step was to create design using this draft

1st design

 

 

Navigation bar

I wanted to minimize amount of links to minimum and I think It is better than previously.

Home – navigates to Main page.

About – I am going to write what is already on home page (from ‘Welcome to Irena…’         section) and also each individual hairdresser will be shown there (picture, personal info,     experience). Whole about page will be editable with CMS.

Services – Visitor will find out about all the services/offers available, including prices

Contact – As always contact form, with map(directions) address etc

Book now – booking appointment system


 

Salon image

– I am planning on some kind of auto slider gallery with images from salon. I have seen         plenty of these sliders, even responsive. so there won’t be problem with finding and           implementing one. 

– Below there is a little bit information about salon, with telephone number and ‘book now’     at the bottom.


 

Salon offers

Many Hair salons, have their special offers or services which might have nothing to do with standard hair services. When it comes to Irena hair salon, apart from hair services, they have:

beauty treatments including nails tips, spray tanning, waxing and more

Hair extension, which isn’t done very often and it is more of a special service taking up to
4-5 hours

Four Sunbeds ready to use at any time.

Usually customers/visitors know about standard services. However to promote other services and offers, which either people might not know about, or never seen/heard of them. I have decided to add ‘salon offers’ with these three listed above.

I still don’t know how should this section be named. Salon offers isn’t in any way appealing, and it would as well be about standard services that salon has to offer.


Footer

At the bottom there are three sections.

Salon information with address, telephone number and map of location. Opening times and Contact form.

I have decided to put these three as that’s what I have usually seen on other websites. However, i still might change location of opening times, as this kind of information should be visible immediately.


 

2nd Design

I have decided to do one more design so I can show them both to my client and let him decide which one she favors more or what she would like to be changed / added etc.

This time, I will be focusing more on ‘blocky’ design which is based on blocky square grid layout.  as you can see below.

http://www.regissalons.co.uk/
reggis

Square blocks used as a buttons. So it is easier to navigate on smartphones and tablets.
It is visually attractive if designed and created right.


Some websites combine square blocks images with text on any side. And again, it really looks amazing and beautiful. example below.

http://www.colour-lounge.co.uk/colorloungecouk

We can combine text with images in multiple ways when building blocky website.
Another great example, again from colour-lounge. I could ‘Salon offers’ section similar to
what you can see below.

louge

 

 

Self Initiated Project – Competitor Analysis(further research)

I have decide to do extra research on competitors. This time I have decided to go onto 11 Hairdresser websites (which I haven’t previously saw) and find out what usually hair salon websites consist of.


What I have been looking at exactly is:

Main page – what hair salon websites usually have on their home page

Navigation Bar – what their Navigation usually/mostly consist of

Text Amount – amount of text reading on home page

Colours – Mostly Grey, black and white are used nowadays in web design. So I have been looking for use of these three colours

Responsive – whether website was responsive or not

COMPTETITOR

Links to visited websites:
http://www.spirithairteam.co.uk/
http://kayapati.com/demos/milan/
http://www.cssigniter.com/preview/beaute/
http://www.kiwasalon.com/
http://www.rush.co.uk/
http://www.francescogroup.co.uk/
http://www.browns-hair.co.uk/
http://www.sallyexpress.com/
http://bleachlondon.co.uk/
http://www.nickyclarke.com/
http://davidrozman.co.uk/

Self Initiated Project – Competitor Analysis

I have decided to analyse three first Hair salon websites from hull that will come up in Google after typing ‘hair salon hull‘ and look for  hair salon websites world wide looking for anything new, usable and helpful that other hair salon websites might be using.

I will start with few Hair salon websites from Hull that have came up in top 5 in Google.

ORIGINALS HAIR ROOMS
http://www.originalswigsandhair.co.uk/

originals hairrooms

First things first. It is not responsive neither adaptive. Loading time of this website is pretty long, and few times I had to refresh pages, because either they didn’t load correctly or didn’t load at all.

what had most of my attention was amount and use of fonts.fontsdiff

Just below Navigation bar, you have few sentences here and there each one of them using either different font size or style.

Home page looks more like a blog, but with no posts added yet. Content on the website is not up to date, there is no gallery at all, neither pictures of staff working there. I expected to see more about staff and their pictures in ‘About us’ page, but I was wrong. Just a bit of text about the salon and stuff overall.

They are using Online Booking system – http://www.mylocalsalon.com.au/
However, when I click on book appointment, and it redirects me to the software, I can’t do anything, nor click anywhere to proceed.salons offline

I though that it is because their salon is closed for today, But on Facebook it says they are still open.. open
My rating – 2/5


ALEXANDER HAIR & BEAUTY
http://alexanderhairandbeauty.co.uk/alexander pic

Another website not being responsive or adaptive. In my opinion there is way too many web pages (sections), some of them consist only of few sentences, some have just a picture inside, while other mix of both, but still not enough just to create separate page for it. Whole content could be organized much better.

Another big problem is drop down menus used in Navigation bar. It is quit a problems as these are not tablet-friendly, and when building responsive website it is recommended not to use drop down menus.
drop down

I have found SOMETHING NEW, that I was looking for on these websites.
recommend
Recommend a friend option, while booking online and you get discount 50%. I will have to discuss this with my Client and see what she says. I don’t know how does that work on that website as they don’t have any online booking system.

We all know that first impressions are most important ones, and in this situation this website hasn’t impressed me much. I have expected to see some form of invitation to their salon, or button to book appointment online, but no. there is just text about how talented whole staff and salon is..
awards winning

What I think of this website.. there is way too much text to read, as mentioned earlier people/users/visitors prefer to see and interact rather than just TO READ. isn’t reading outdated nowadays? when it comes to websites obviously..

Overall, spending 10 minutes on this website felt like looking into someones CV. there is so many information regarding that one person named Alex and at the end it didn’t felt like hair salon website, but more of a ‘Me Alex & my salon’, where he focus most on his achievements awards, and how these influence their job etc.

My rating – 3/5


MARIE CLARE HAIR SALON & BEAUTY ROOMS
http://marieclarehair.co.uk/
Marie clare

Before I start talking about anything, I just don’t understand and don’t get it how come this websites comes first in Google after looking for ‘Hull Hair Salon’

respons
I was a little bit surprised and didn’t expect to see this website being responsive. Also their booking system software which they are using is also responsive, and it was created by i-Salon.

This website doesn’t have any navigation bar, there are two buttons.. I actually don’t know if these are two separate buttons or just one, because both of these after clicking, scroll your page to section where map is and that’s all.

What does this website mainly consist of? TEXT! text hurts

However, this text just look gross and it isn’t easy to read.
Just below all that fat text there are two links to Hair & Beauty Menus. but instead of taking you to different page. These two redirects user to PDF files. Below you can see Beauty Menu.pdf

Below you can see these two links to PDF files, and just below these are only images found on the website.

hair beauty menu pics
T
here is no gallery, nothing about staff, not to mention no pictures of staff. One page website with big fat BOLD type.

What I liked is their booking system, or software that they are using. very easy to book an appointment, and when you are done you receive one mail with information regarding appointment, and second one with confirmation of appointment.

I will have to look more into this booking system, as it seemed to be very user friendly and easy to use.

My rating – 1/5 (if (NOT their) booking system would count towards rating, I would give maximum 2/5)


Overall, I have realized each one of these are far from being perfect. having different issues, errors and problems. None of them is using their own Appointment system, which means that either it might take long time create my own, or it is hard. Will have to research and plan something.

question of the day.. How the heck Marie Clare Website is always on top in google results? Just look at it..

Tom’s Planner – Online Gantt chart

No doubt, lack of planning & scheduling in any project will most likely end up with total failure. As I have been working on my projects, I used to plan more less and what has to be done and when. But most of that was only in my head – no hard copy.


 

toms plannerr

I have been recommended by few people to try Tom’s planner website where I can create On-line Gantt chart. Its not only 100% more efficient, but also using it is  professional.

There are some advantages of using On-line Gantt Charts. Main one  is to try and make things clearer and simpler not only for me but for the people that are taking part in project. However, when working on my SELF-initiated project, it creates picture of complexity. It helps with time management and demonstrates visually  what I am currently working on.

 

Self Initiated Project – Initial Idea

My initial idea is to..

totally revamp website which was built by me for Hair & Beauty Salon Irena. (www.salonirena.co.uk) and this is how it currently looks:
irnea
At the moment, it is purely static website, with no dynamic content, no PHP included neither CMS. It consist mainly of containers with texts, few pictures and YouTube video link and It isn’t neither responsive nor adaptive.


My goal Is to:

  • rebuild website, to make it more user friendly and easier to navigate.
  • Create CMS which would allow to Dynamically add content on the website, in every section.
  • Make it Fully responsive, as my target audience will be not only PC/Laptop users
  • Appointment booking system
  • Main priority – SIMPLICITY