Design Plan

Web Application Development P00803

Gabriel Soullier and Mia Bruce

Table of Contents
1. Introduction.....................................................................................................................1 Figure 1.1 The Website Planning Process...................................................................1 2. 3. Purpose...........................................................................................................................1 Target audience..............................................................................................................2 Figure 3.1 Target Audience.............................................................................................2 3.1 Geographic criteria.......................................................................................................2 3.2 Demographic criteria....................................................................................................2 3.3 Psychographic criteria..................................................................................................3 3.4 Behavioural criteria.......................................................................................................3 3.5 Target Group Need s Assessment...............................................................................3 4. General Content.............................................................................................................4 4.1 Site Structure............................................................................................................6

Figure 4.1 Structure I......................................................................................................6 Figure 4.2 Structure II.....................................................................................................7 4.2 Look and Feel...............................................................................................................7 4.3 Site Navigation.............................................................................................................8

1. Introduction
Detailed planning is vital not only in the development of a website, but also in any other similar investment to which time and other significant resources are dedicated. Creating a web site starts with a good plan.

Figure 1.1 The Website Planning Process

Purpose Target Audience General Content Site Structure Look and Feel Site Navigatio n

2. Purpose
We summarise what the purpose of our website is firstly by defining the primary and secondary goals. Primary Goal o To increase sales of our product to create profit

Secondary Goals o o o o Promote the presence of the website and the products sold Increase customer credibility Customer satisfaction and retention Referrals

Objective for Primary Goal o o o Marketing activities for acquisition of customers Feedback, reviews and rating from existing customer Limited offers for returning customers

Objectives for Secondary Goals o o o o Develop a user-friendly and attractive website to increase chances of customer satisfaction, repeat customers and referrals Engage in a dialogue with our customers to learn how to improve Use feedback, reviews and product rating to create credibility to the brand Enable social plugins in order to make it easier for customers to refer us to their friends

1. Target audience
Before conducting a market segmentation in order to find the right target group for our website, there are certain factors that need to be highlighted. Firstly, in being an online store that excludes the opportunity for a customer to feel and try on our products before purchase. However, buying fashion and accessories online has become more popular (REFERENCE!). In knowing there are people out there who are willing to buy such items online, we need to differentiate our site from the jungle of options. In order to make it more convenient for our customer to shop online, like offering clear and attractive information on delivery and returns, this might increase chances of converting a lurker (REFERENCE!) into a customer. Below there is complete summary of our target audience. Further, there is a detailed description of Geographic, Demographic, Psychographic and Behavioural Criteria.

Figure 3.1 Target Audience Gender Age Where Income Education When Lifestyle IT
Female 25-45 The UK Medium GCSEs and higher Treat for one self or gift Busy professional who likes to look good Uses IT on a daily basis

3.1 Geographic criteria

As this is a new online business and a new web site, the safest strategy is to begin in a market that is close and known to us. Therefore, the focus will primarily be for residents of the United Kingdom.

3.2 Demographic criteria

The products we are selling are jewellery suited for women. It is to be assumed that mainly women will be accessing the website even though it is likely that men as well would visit the page in cases of buying presents for occasions such as birthdays, mothers day and anniversaries.

As the products we are selling mainly do not contain precious jewels, the price level will be low to moderate which also allows a younger target group. The products are creative and colourful and not necessarily sophisticated, which further appeals to younger group of women with a medium income who can afford to spend a little extra on themselves. Further, it is to be expected that our target has a minimum educational level of having taken GCSEs.

3.3 Psychographic criteria

There are several occasions of when a person will be buying jewellery. It can be bought either to oneself or to another as a gift, as a necessity for a particular occasion or as a treat for oneself. The person who visits our website is a professional who is young at heart and likes to look good. The person is also used to using information technology and social media as a part of the daily routine. A busy lifestyle is a part of their day and it is therefore convenient to be shopping online instead of going to a store. Our target group also likes to be different and to buy items that are not easily available to everyone in order to stand out and to own items which are not likely to be owned by others in the same circle of friends. Our target group is intrigued by finding their own secret source of getting a hold on unique and fashionable accessories. Once found, the person will be likely to return if satisfied with what the site has to offer.

3.4 Behavioural criteria

It is a fact that our website is completely new and our visitors will be completely new to it. Our target group will to begin with be first-time buyers on our site but may already be well familiar with buying fashion items online. As mentioned previously, our customers might be looking for something for themselves or as a gift. As Christmas is just around the corner it is highly likely that the behaviour might have been triggered by the holiday season and that the goal is to find the perfect gift for someone special. This means that it is likely for men as well to be searching our website to find a gift. However, considering the low to medium price levels of our products, it is important to keep in mind that women tend to buy more often for themselves and at low prices while men tend to buy only for important occasion and spend more ( http://findarticles.com/p/articles/mi_m0EIN/is_2004_Nov_23/ai_n7073545/ ).

3.5 Target Group Need s Assessment

Here there will be a discussion of what our chosen target audience might need, want and expect from a website like ours. Factors include usability and accessibility. The reason customer come visit the website is initially to take a look at what we have to offer and secondly to purchase. Motivational factors can be that she wishes to find something nice for herself or to give as a present. As she is already a daily user of information technology and frequently shops online, she is used to navigating around websites. However, it is important that the structure is similar to the structure of the biggest fashion websites which already exist in order to offer the familiar structure to our customer in order for the customer to spend the least amount of effort as possible. Therefore, there must be a focus on usability and accessibility so that it is easy to navigate and to find products and other important information. As our target group lives in the UK, it makes sense to adapt the web page to this audience and use other big websites which are big in the UK as inspiration for navigation and structure. Also, Social Media is big in the UK and the 3 biggest are Facebook, YouTube and Twitter (HITWISE), which make it possible to enable social plugins in order to respond to that trend and integrate that into our website.
Conduct needs assessment

2. General Content
12The contents elements you choose for your website must support the purpose and meet your target audiences expectations. 1.Determine your sites home page and underlying pages.

2.Ensure that the homepage answer visitors who, what and where question. 3.Determine the visual identity contents to be added to all pages that will brand your site. 4.Determine the value-added contents for your pages.
5.Plan a file folder organisation for your HTML, CSS and content files. 13A website home page should contain elements that draw the visitor in and encourage further exploration. The home page should be different enough to stand out as the primary page, but still

connect visually with otherpages in the site.Ensure that the homepage answer visitors who, what and where question. Who: Elements which clearly identifies the company. LOGO What:Elements that show visitors what content is available on the site. PICTURES Where:Easily identifiable navigation links to other pages. LINKS 15For each underliningpage at the site should include same elements, such as name logo, typeface, colour scheme, etc as its home page to provide unity and promote visual identity.For a typical e-commerce website

Products page Checkout information Customer account information Contact information Privacy policy and security information
A business blog

Logo, typeface, colour scheme and link placement maintain visual identity with the home page. Visual identity is one of the efficient part in creating a strong brand. Value-Added Contents 19 Value Added Content is information that is relative, informative and timely; accurate and of high quality and reusable. Does the content elements: Add value to the site? Further the sites purpose? Enhance visitors experience at the site?

We expect the website to have a satisfactory programming quality. The code has to be as light as possible, easily re-usable and appropriately commented while respecting the W3C rules. It is also expected that the website meet the requirements of accessibility and usability through an appropriate use of actual web technologies and practices. We will take into our consideration that some of the sites users might be visually impaired, elderly etc. We wish to organize the site in a way which makes it as easy as possible for the visitor to find what he or she is looking for and that critical information is being clearly displayed such as promotions and information about delivery and returns.

To further enhance the reputation of our brand online, we wish to make the most out of social networking tools as they may contribute towards online marketing if used in the right way. This also allows customers to discuss our brand and products in a completely safe an open environment which can help us improve our site the products offered. We also wish to offer customer the possibility of writing reviews and feedback directly on the site so that it may lead future visitors one step further towards the decision of purchasing a product. Also, this may work as an excellent tool for the company to get an insight in customer perception and which products are popular and which are not. Pages to include Front page: welcome, brand presentation, best/limited offers Search page: list of products according to price range and/or categories and/or keywords Product detail page: single product Minimum for now About us and contact us Terms and conditions, privacy policy, return policy and delivery policy Options to leave a review on products + perhaps customer testimonials Content (to make it look actual) Products categories rings earring bracelets necklace Products price description customer rating comments associated, reviews and feedback zoom option (use cloud zoom plugin) discounts Slideshow of best offers (based on rating) Search engine (price range, keywords, results sorting options)

Connectively tool to encourage user interactions Social networks links (send offer via Facebook, twitter, mail, rss feed) Stars rating Comments

Usability and accessibility solutions Use of div and headers in the HTML sources to enhance the use of screen readers.

1.1 Site Structure

Figure 4.1 Structure I

Landing Page

Welcome, Brand presentation

Best/Limited Offers

Products

Search Option

About us/ Contact us/T&C

Figure 4.2 Structure II

Product Categories

Necklaces

Earrings

Bracelets

Rings

Price

Description

Customer Rating, Reviews ans Feedback Picture with Zoom option (plugin)

Evaluation methods

HTML validator CSS validator User testing Page load time testing (That software which test usability for visual impaired people, can't remember)

4.2 Look and Feel

The Latin word for jewellery (in plural) is Gemmae, and this will be the brand name. We wanted a look that suits our target audience and wanted something that looks feminine and elegant:

http://marketplace.veer.com/font/Adios-Script-UMT0000431?skeywords=UMT0000431 Colours have to be used carefully, as they are not visible by all the same way (daltonian for instance) and the preferences vary a lot according to people. We will avoid the use of red and green as they are the most difficult colour to see for visually impaired people. Also, the colours need to be appropriate for a person in our target group. It must look young, professional and tasteful. We have therefor decided to utilise the tool (NEED THE FING SLIDE NOW!) to find colours which are naturally related to each other by using the colour wheel. Colours that might fit our Webpage is something that gives a feminine feel and makes the page look elegant and aesthetically appealing. Primary/Background colour: A cream colour like #FFFFCC Secondary colour: A dark brown like #35170C Font Colour: Black #000000 For a web application it is preferable to use sans-serif fonts as it is easier for the eye to read on a screen, and more precisely system fonts, which are readable by all browsers. Among those fonts only a few are similar on windows and mac, they are: Arial Verdana

Tahoma Trebuchet The most common on the internet is Arial (size 11) so we will use this one to keep users habits. Also very likely to be compatible with most browsers as well as it is easier to read as it is sans serif. We will use a dynamic menu displaying products categories to navigate through the website using JQuery most common plug-ins such as superfish. We will use a dynamic slideshow also based on Jquery to display best offers on the first page of the website. Image selection

4.3 Site Navigation