Information Architecture. Proposal Document. Charlotte Baxter

Transcription

1 Proposal Document

2 Contents 1. Abstract 3 2. Goals 4 3. User Experience Audience Competitive Analysis 5 4. Content Page Content Audio Content Video Content Functional Requirements 8 5. Project Structure Global and Local structure 9 6. Visual Design Design Structure Identity Colours Fonts Screen mock ups 11 Appendix 1 Bibliography 13 Appendix 2 Inspirations and Influences 14 Appendix 3 Project blog 16 Appendix 4 User Testing 18 2

3 1. Abstract The Castle Spa is a new hair and beauty salon opening in the small village of South Cave. It is located on the Cave Castle Country Club which already has its own website. Because it is a separate business, I would like to create a separate website available for the clients to use. The purpose of this website would be to mainly advertise and inform. As the Salon is new, I am able to design for the user to their needs rather then developing a previous website. As I have a part time job there, I am able to receive consistent feedback and constructive criticism. This will be a great help to design and create a user friendly website. I am using this business as a basis for this unit and am aware that it may not be viewed to the public. The website will be made using Macromedia Dreamweaver and elements of Macromedia Flash. 3

4 2. Goals The main goal for this project is to advertise and inform new and old customers to the salon. I would like to include pages which will: Update current clients of any news. Provide information about the salon, products and staff. Provide Contact details. Advertise what the salon can offer to new clients. I want the website to be easy to use using lots of different types of media: text, images, video content. This can increase the site s appeal and be more fun for the user. It can also help the user to be influenced and get a feel for what the business is about. As the salon is set in neutral colours and tries to convey a relaxing environment, I want to continue with this idea and keep the tone of the website natural. This may not be suitable as it may become boring to the eye, I will have to experiment with this. I want the website to be accessible to all ages due to the wide range of clients (see Audience). The internet is used all over the world but there are still people who are not computer literate and do not feel comfortable using the web. One of my aims is to make sure the navigation is easy to use allowing the client to get from page to page with no difficulty. 4

5 3. User Experience 3.1 Audience The target audience of the website will be based on the current clients at the Castle Spa. The age range is large due to most people needing their hair cutting; this trade can be classed as a luxury or a need. Generally the audience prefer to be relaxed, especially the beauty side of the business, and so the design will be based on this. Although the business is mainly female based, it does cater for men and so it has to be suitable for both genders. It is important that the website should not just be aimed to the current users and be accessible to new users to. This will provide for a larger audience and bring in more business. 3.2 Competitive analysis After researching many salon websites, I found that most of them were very simple. Most salons do not have websites and it is becoming a growing trend. The general information displayed was details about the salon as I suggested in my goals, but in a completely different layout. The majority of the sites had very simple navigation which is good however each page depended on text and was very boring to read. Hardly any other media was used such as images. I would like to adapt this by using more images and perhaps even videos but at the same time but still keeping it easy to use. The majority of salon websites I viewed were created using html, not Flash and did not have much interaction if any. If I use Flash elements in my project, it will be much more appealing to the user and more stimulating to read. Below is an example of an existing website. 5

6 I do not like the simplicity of this website. It is not interesting to look at and the information is too much to intake. I would like to expand on this by using a set colour scheme and only using information which is necessary. The website below inspires me. I like the way this website is really simple and easy to use. It sticks to one colour scheme and has the appropriate information it need. It also has easy navigation where you can get to any page from any page, you can also jumop to the home page via the logo. 6

7 4.Content 4.1 Page Content I will briefly state below what I intend to put on each page. Some pages may change over time as I want to update the website regularly. Home Page On the home page I would like to welcome the client and give them general information about the business. I would like to give them an overview of what the business has to provide and set the tone of the salon as best as I can using the web. I would also like to put any updated news on the home page for regular clients although I do not want to restrict the website to new clients. The news will be updated perhaps every fortnight, or every month. The type of news which I will entail for example is if the salon got a new product in, new staff or recent events. About the salon I would like to include images on this page to show the viewer how the salon looks. I would like to set the scene as best I can for the viewer to advertise the salon. I will also give information about the location and surroundings of the salon, Cave Castle. The main information I will give will be what the salon can offer to all people, and details of when the salon opened etc. Products I will create a page to advertise all of the product manufacturers, for example Alterna, Fudge, and Dermalogica. Each section will have a brief description of what they can provide to the customer and an image to support the data. The aim of these pages is to advertise and sell the products better in the salon. I am also going to use a flash movie to flick through all of the products. I am also going to have this on the home page to advertise what we sell. By having this, it is showing the viewer what we have to sell without them having to look through all the pages. Staff I will have a page with details of all the staff and what they are qualified to do. This means the viewer can see who they would like book in with before they do. Treatments This will be divided into 4 pages Hair, Beauty, Lazer and Other Services. Each page will have the treatments the salon provide and the cost of each one. I will also give a full description of the treatment entails so it is easy reading for the customer. 7

8 Contact us Here I will give all the salon contact information and a link to the Cave castle website. It may be an idea also to create an section. This will also explain how to book appointments as well. 4.2 Audio Content The only audio content which I may use is to introduce relaxing music. However I am not sure about this as for some people it can be annoying. I will user test this and see what people prefer. If I am to create a music player, it must have the action to stop or pause to give the user an option of listening or not. 4.3 Video Content If I am to use video content, it will be to advertise the products using a flash media player. It will be of mages of the different products we have to offer. I have considered using a video on the About the Salon page to show the viewer around the salon to get a better look but I think this may be a waste of time as many people will look at the images but not take the time to play the video. If I do use this video, I will have to create it myself, I would use flash to create this and have the action buttons of play, pause, stop and rewind. 4.4 Functional Requirements I will create this website using Macromedia Dreamweaver 8 using elements of Macromedia Flash 8. The user will have to have: A compatible web browser Internet Explorer 5 or above, Firefox 1.0, Netscape or Safari. An Internet Connection 256kbps or above is needed A Flash Player 7 plug in available to download if the programme is not already installed 8

9 5. Project Structure Below is the structure for the website: Home About The Salon Products Staff Contact us Treatments Hair Beauty Other Services Lazer 5.2 Global and Local Navigation The table below shows the navigation broken down into global and local entities. Home Global Local About The Salon Products Staff Contact us Treatments Hair Beauty Lazer Other Services 9

10 6. Visual Design 6.1 Design Sketches Below are my initial ideas roughly sketched: 10

11 You can see I have a general idea of what I want to produce using text and image containers. I have shown the 3 pages which are going to be most different to the standard layout. I want to keep things consistent throughout the website. 6.2 Identity The Castle Spa already has it own recognised logo and so this prevents me from having to design one. It is used on all documented paper etc and so I will continue to use it for the website. However it may have to be slightly modified to be used on the website. 6.3 Colours The colour scheme in the salon is all natural. I have decided to stick to 3 colours throughout the website. Below are the neutral colours I would like to use: I would like to use a tab bar for the navigation. I do not want these to be too overpowering and so I will make them consistent with the other colours. 6.4 Fonts The font I will be using is noted below. I have used this font because it is appropriate for all web browsers and is accessible to all browsers. Verdana Various sizes mainly pt 16 Various styles 6.5 Screen Mock ups Below is a screen mock up of what I want the general style of the website to look like, I want the site to be consistent with colour and text. 11

12 Design Notes The logo at the top left will be dominant and be used as a hyperlink to the home page. Underneath the logo will be the tab navigation. This will be on every page so the user can access pages easily. The paler colour tab will show the user which page they are on. On the Treatments page I have provided sub navigation to get to extra pages. These are only relevant to the treatment page and so can only be accessed via that. However the user can still get to any page from any of the sub divisions. Each pages content will be different depending on the text and images I will use. Above is an example of how it may look. I am going to use different sections to separate the media. 12

13 Appendix 1 Bibliography Books For Reference during Project: The CSS Anthology 2 nd Edition, Published by SitePoint Pty Ltd, written by Rachel Andrew. Software For use during project: Macromedia Dreamweaver 8 Macromedia Flash Adobe Photoshop Microsoft word Websites Other sources Product information leaflets and various other leaflets form The Castle Spa. 13

14 Appendix 2 Inspirations and influences Tabs like these made me want to base my navigation on them. They are simple to use and see what page you are on. As my website was going to based on neutral shades, I needed to make it stand out still and I think this did just the job. Here is a leaflet the company sent out to advertise the opening day. This influenced me for my background and with the colour schemes. It is very simple but effective. 14

15 A similar document to the one above. I had to keep to this scheme or the web site would have looked out of place! 15

16 Appendix 3 Project log Below is a brief project log. I have tried to note down each weeks progress and put forward next weeks aims. This helped me to plan what I needed to do and tick off the tasks complete. Week Ending: Friday 8 th February Today we were given the brief. I took this away and considered my options. I thought about what I was going to base this project on. Collect ideas and speak to any potential businesses. Friday 15 th February Spoke to the company I work for and they are happy for me to create a website for them, whether it is used or not. We were also asked to research websites which we like and which we don t to give us some ideas and influences. Note down general ideas ready to propose to the client. Friday 22nd February I have got all the salons leaflets and price lists. I spoke to Kelly (one of the managers) about the content and pages she would like. Using the leaflets, sketch a general design and propose colours which are suitable. Highlight information to put on each page. Friday 29 th February Showed Kelly the general idea I am going to use. She liked it but also gave me ideas to expand. I explained the sketches and what does what. Design the navigation, gather a few ideas to propose. Friday 7 th March Friday 14 th March After showing Kelly 2 navigation ideas which I could create (vertical or horizontal, horizontal using tabs) she preferred the latter. I also discussed about whether it was possible to get hold of the logo from their printer or whether to recreate it. I managed to get an with all images from the other company. Get designs off paper and onto the computer. Created a prototype on Photoshop showing the general design and where I plan to put everything. Double check with Kelly this is exactly how she wants it and make alterations before building the site. 16

17 Friday 21 st March Friday 28 th March Friday 4 th April Friday 11 th April Friday 18 th April Friday 21 st April Friday 2 nd May I went to the salon to get images of the staff and of the salon area. I decided to put these in sepia to fit in with my plans for the site. I then resized these appropriately ready for the site. Design images to advertise. Kelly has asked me to create an advertisement for products. I have decided to create a flash movie clip. I will have the images roll over advertising all of the products they sell. This will be located on the main page as well as on the product page. I now need to start building the website. I have now started to build the website. I have created the style sheet and the navigation is complete. All of the colour schemes are put into place and you can see the general design. Input content. I have now completed all of the other pages. There are 10 so far. I have been inputting the content and taking notes of what does not look right etc and what I need to alter. Meet with Kelly to show my progress and receive some feedback. I have met with Kelly and she is pleased with how it is coming along. She made alteration to the content. I also got some user testing from some clients which helped me to improve the site. I have now input images, text and the flash movie I created. Collect ideas and speak to any potential businesses. I have collected more user testing form family, staff and fellow students to make the site better. I have also asked them to proof read it to avoid mistakes. I have now been making small alteration to try and make the site better. Make sure everything is complete ready for the hand in date. I have generally been checking that everything is complete and on track. I have also been working on the documentation and the book review. 17

18 Appendix 4 1. Overview Collecting feedback Method Used Feedback Received Conclusion 20 18

19 1. Overview The brief for asked me to produce a proposal document for the website I was going to create for a specific company. It also requested user feedback from the audience to help me constantly improve my work. 2. Collecting User Feedback 2.1 Method used To get my feedback, I chose 4 different audiences to test and evaluate the site. I asked: Clients This helped me with what the clients wanted to see and what they expected. Family By being brutally honest, they mainly commented on colour schemes, choice of wording and images. They were more biased towards the structure side rather then the content. Fellow students Helping me along the way with creating the website and giving me more ideas. The Castle Spa Constantly speaking to the staff of the firm helped me to produce the product exactly how they wanted it. They mainly spoke to me about the content and what they wanted to include in it. 2.2 Feedback Received When asking the audience to analyse the website, I asked them to think about the layout, colour schemes, navigation, content, images and other media. The response I got from each of these audiences were very helpful yet in different ways. I thought that if I handed out a questionnaire I would get limited answers as the questions were already set. My aim was to get various opinions and note them down by having a conversation as they browed the site, allowing myself to get their first initial thoughts. Parts of the site which I changed due to the feedback were: Using an outcontainer to keep the website features from floating around. Fellow Students. Content on the home page needed to be changed to what the staff wanted. Staff Images would look better if they were not too bright and more subtle to suit the genre of the site. Clients. Information about booking needs to be clear, and about cancellations. Clients The logo needs to stand out against the background with no border. Family Many spelling mistakes were spotted. Family The general reaction was that the site looked really good and was easy to use. The most positive reactions were commenting on how the colour schemes fit so well with the salon and portrays The Castle Spa very well. 19

20 3. Conclusion The only problem with the way I did my user testing is that the some of the people may not have been entirely truthful and may not wanted to say what they truly felt. However by asking family and friends, I know they are not scared of what they think. Alternatively I could have set up a questionnaire and asked people to anonymously answer and comment on the site however this way I would not know who had done written what. It is likely that I would not get a detailed answer if any from the clients and the specific audiences that I wanted. Fortunately, I feel my way of user testing was sufficient and provided me with some honest and helpful comments. I feel that user testing has been a great help to my overall product as it has expanded my knowledge to what people want. It has helped me to cover more aspects of advertising and I feel The Castle Spa site has benefited from it greatly. 20