Nova Cosmetics Shop Website Design - Coursework Example

Nova Cosmetics Shop Website Design Table of Contents 3 Research strategy 4 Purpose 5 Fit For Purpose 6 Decision/Planning Phase 6 Flow Diagramming 10 Now under the products there will be the product names. 10 The general layout of the website will then consist of the following pages 11 1.Homepage 11 2.Search 11 3.Products 11 4.Contact us 11 After the flow chart is developed, a website contract is established between the designers and their client. 11 Website Development Contract 11 Domain Name Registration / Website Hosting 11 Design Phase 11 Custom Designed Website 12 In Progress Viewing 12 CSS Style Sheet 13 Site Map 14 Site Content 15 Customer registration 15 Testing 17 Works Cited 20 Abstract The current business environment mandates that each company develop and maintain an E-Commerce website for its success. This is because all of the business entities have shifted to online sales. Consumers have also embraced the practice rather than the traditional sales. E-commerce websites provide customers with a widened variety of products that they can choose from in addition to allowing the customer view the reviews and experiences of the previous buyers of the product they want before making a purchase. It also improves accessibility of the company’s products. In line with these advantages of the E-commerce websites, Nova Cosmetics UK has adopted the same strategy. The following describes the stages of their website design. Research strategy It is imperative that before beginning the website design stages the stakeholders undertake a research strategy. This is to help in the determination of the functionality of the site. The primary objective of an e-Commerce website is to provide clear information between the consumers and the sellers. It is beneficial for the designers together with the management to have a clear understanding of the shop, its products, and the intended market. The developers also need to obtain information regarding the target audience and the possible keywords they might use to find the shop and its products. This makes sure that the store does not waste money on attempting to reach or trying to convert the wrong type of customers. After coming up with the functional requirements of the website, we should put emphasis on the specific functions that must be included in the site. In this case, the site must be comprised of a shopping cart that allows users to buy more than one item. Once the users’ book an item they, place it in the shopping cart. The website should also enable users provide their credentials and create their profiles (Lawrence & Tavakol, 2013). Here is the description of the Nova Cosmetics UK. The web site is designed for the cosmetics shop. The administration and departmental heads can make their profile and upload cosmetics descriptions and prices online for the customers to visit and buy. This website will include the ability to buy more than one good among other events and promotions in the cosmetics shop. User requirements should also be another priority in the research strategy. Once we have classified the user types it, is essential that we proceed to identify the key elements that we will need to build the website. Even though user needs vary with the different user groups, it is worthwhile to find a common ground to satisfy each and every user group. User needs include psychological aspects. We will achieve this by developing a simple user interface that abstracts the complex work. Users will not be required to master the complex task of creating their profiles through SQL. The user will only need to click buttons that are self-explanatory to achieve maximum functionality of the website. The SQL queries will be performed in the background by the website. The website should also meet social, cultural, environmental and educational needs of the users. The choice of colours and the various interfaces should not negatively affect some user types. Because this website requires that, the user pay their bill over the internet the design of the site must be in such a way that the privacy of the customers’ information is maintained their credit card information especially. Purpose The primary objective of the website is to provide the cosmetics shop a platform for selling their products online. This is to satisfy customer needs. All of the products available in the store will be made available through this website. The target is to include all of the functionality is that the shop and its customers can communicate with each other entirely on the site. The internet site, on the other hand, contains a database that is used to store all of the information that pertains to the business operations. This information includes customer details, payment information product prices, and available products. Each person involved in the enterprise will have their profile to access the services of the website. This website will, therefore, comprise of the following: Already existing customers it will make their login entails and compare them with what is in the database. Fit For Purpose After the identification of the various user types, their requirements and choosing the best model to follow, we should find out whether the proposed plan will meet our needs. In this stage, we try to correct the complaints raised during the initial phases of the development. In this case, we decided that we should design a website that gives the users a number of mechanisms to view the cosmetics and browse our catalogue. The website should also include video demonstrations that will enable users acquire the relevant information. I addition we realize that not all users can access high-speed internet that is necessary for viewing online videos. In this regard, we shall provide an alternative information page that is entirely composed of static text. Decision/Planning Phase Planning involves setting down all the requirements for the website, as well as its users. During this stage, we determined the requirements for the customers of the Nova Cosmetics Shop by finding out the knowledge their clients had about their products. We discovered that some of them knew about the products, but others could be reached by enhancing the design so that whenever they searched for specific keywords the shop was among their hits. The planning phase is among the most important phases of website design because what is planned and mapped in it becomes the blueprint for the project that goes to determine the overall success of the project. In this phase, Nova Cosmetics Shop will provide us with the details of their desired functionality of the website. They will also inform us of any intentions of including particular functionality and interactivity with the customers. These include the need for the consideration of specific groups such as the deaf and the blind. The shop will lastly provide us with the total number of pages they require for the website. These pages are the separated documents such as the ‘about us’ ‘homepage’ ‘contact us’ and the ‘products’ pages (Dixon, 2015)’. The planning phase requires interaction between the designers and the client. The following are achieved from the planning stage (Reimer, 2011) Requirement analysis Requirement analysis includes the customer’s goals, their desired audience, and future expectations. From the requirement analysis, we will advise the shop accordingly. Project charter The project charter is the document prepared that sums up the information that has been acquired so far. These reports are made to serve as future reference in the entire duration of the project. Sitemap A site map is prepared to guide for easy information access. Contracts that define the roles, copyright, and financial points This is one of the vital documents for the designer as it includes payment terms, termination clauses, copyright and the timeline. We must be careful to cover ourselves with this document. Gaining access to servers and building folder structures The most common information, to hunt for, includes the FTP host and username password. Required software and resources The last stage of the planning phase is finding out any additional requirements for the project. This includes software. The additional resources for this phase include: Jump chart, a client developer tool, and the Dropbox, a file sharing, and collaboration tool After the planning phase, a flow chart is constructed to show the general layout of the website to be designed. Once the above have been achieved, the following deliverables are completed. Storyboarding. A website storyboard is a visual plan for the site. It includes the expected pages to gather with the sketch, content, and navigation. When designing the pages the layout must be consistent so that users do not get confused whether they have moved out of the website when accessing other pages through the navigation links. Website name Name of the page logo banner Heading Link Content Link Link Link Navigation Copyright Information The storyboarding form will look as follows Structure The website plan must include a clear representation of the site structure or the website map. The structure of the website must show how the homepage connects to the other pages of the web pages and the possible navigation routes that can be followed. There are two means through which users can be directed to this website, pull and push. In the push, we advertise the presence of the website. This involves coming up with an inviting advertisement that includes links to other websites. In the pull, we make sure that the sites appear among the first hits every time a user searches for its keyword. We carefully adopted Meta tags so that they help our website rank high among the browsers. The other strategies we used include research on the most used keywords with Google keyword tool and keyword discovery, provision of specific words likely to be used by potential users, identification of the most popular keywords and making the keywords that are highly associated with the website. Flow Diagramming To obtain the basics of the design of the website the flow diagram is constructed that portrays the structure of the site. The development of this website will start from the development of a flow chart that will aid in the envisioning and construction of the site plan. The program that is used to accommodate the initial objectives of the business while at the same time help the shop in his future expand and update the system.This is a vital step as it is the skeleton on which the website is built (Mott, 2015). Organizing the site into a flow chart gives a good visual representation of how the site will look like, fundamentally a flow chart is the map of the website and all its pages (Plumley, 2012). Let’s begin with the flowchart and the site map. All websites have a homepage. The homepage is the first page a visitor sees and is often called the root of the site. Other pages such as ‘contact us’, ‘products’ and ‘about us’ will follow from the homepage. The flowchart for the above will look as follows Now under the products there will be the product names. The general layout of the website will then consist of the following pages 1. Homepage 2. Search 3. Products 4. Contact us After the flow chart is developed, a website contract is established between the designers and their client. Website Development Contract Once an agreement on the project details, timeline and the cost we develop a website development contract for the shop to review. The shop will in turn return the signed contract for us to provide them with a copy of the fully executed contract. Domain Name Registration / Website Hosting The next step is to secure a desired domain name for the organization. The domain name is registered in the name of the shop so as to ensure that clients can easily locate and find it. Keywords provided include cosmetics so that anyone searching the internet for Cosmetics has the shop among their hits. The recommended hosting service for the website is ‘surpass hosting’ because they provide a competitive server uptime, many more features, and intelligible customer service. Design Phase Project Begins The design stage is where the information obtained from the planning phase is converted into reality. The client must be provided with the documented site structure and the visual representation (MCNEIL. The following are the goals achieved in the design phase. Wireframe and design elements planning The visual layout of the website takes shape. The information gathered from the planning phase is used to construct the plan by the use of wireframes. At the completion of the above phases, the project kicks off. We email the shop about the requirements and anything that is needed from them during development. These will include the required navigation links the store likes to the homepage, about us etc., and all the text that should be included within the site. To add to the store will also be required to supply as with their logo, their product images, etc. Custom Designed Website We will provide customized homepages for the shop give their recommendations. After they have reviewed the design and provided their recommendations we, will modify it until the perfect outcome is achieved. Once the best look is achieved, we will create the interior lookout and convert it to HTML. In Progress Viewing In this phase, we will establish private directories for the website so that the shop administration can view the website development progress at any time. In addition, we will communicate to them whenever there is an extensive update so that they can review it. Website Development / Coding Phase Programming / Coding In this stage, we will do all the website development coding to include features such as user interactivity. CSS Style Sheet We develop CSS style sheets to define the layout of the web pages. These include font size, faces and colors through the entire website. CSS is, for this reason, used to describe the presentation semantics of the website (McNeil, 2013). We have three options for linking the CSS to the site: Placing the CSS rules in another separate style sheet that is outside of our page by using the ‘@import’ function. Putting the law in another yet internal style sheet within the form element. Setting the rules in a separate and external style sheet that we reference by processing instruction. This website will include all of the above CSS options. Website Pages In this stage, numerous static and dynamic pages are created as is required to complete the project. Website Navigation In this stage, we create navigation links, drop down menus and rollover effects. Site Map This project consists of more than seven pages. It is, for this reason, mandatory that a sitemap is created that includes the functionality for easy one click to access all the other pages on the website. Website Favicon A website favicon is an image that is displayed in the address bar on the favourites menu when a user bookmarks or even adds the site to their “favourites”. We will create the favicon in this stage. Response Forms / Email Contact Forms We will include one contact form for the visitors. This will make it convenient for users to email the shop because it makes it possible for them to email the shop without opening their email addresses. This is vital because users do not have their email addresses at their disposal each time especially if they are not using their computers. This also provides security because it prevents unwanted spam. For the prevention of spam, we will use captcha security images to validate that a genuine user is filling out the contact form and not a spam bot. After the above have been achieved, it is important that navigation links be provided. Navigation links are supplied by the use of HTML and other software applications. Navigation can be achieved through the deployment of graphics and images that are designed according to the website specifications. Text is also used as hyperlinks that direct users to other pages. We decided that textual hyperlinks be used to direct users to the other pages within the site. This is because using graphics makes the document huge so that the loading time becomes too long. For this reason to ensure that users load the system as fast as possible hyperlinks will be entirely based on text. Site Content 1. The website content should be accurate and appropriate implicating that during site implementation all errors must be checked and eliminated. This is mostly achieved through databases that facilitate dynamic web page creations (Sleeth & Garner, 2014). However, we must ensure that each page’s content is filtered accordingly to ensure that they remain objective to the functionality of the webpage. Scripting languages such as Javascript can be used to help in ensuring content accuracy. The websites content should also be in line with the websites purpose. This site uses tables to provide a number of options for summarizing the information and grouping the elements together (Sleeth & Garner, 2014). In site content, we also make sure that the logo, cosmetics images, and the required text are included in all the pages. The administrator will be given privileges to add products to the catalogue, update and deletion of products, altering the products details such as prices and quantity available, stock controlling, dealing with customer details, as well as verifying customers among other functions. Customer registration This module serves to register customers before they can access the website and buy. It takes the customers details and saves them in the customer_info table in the database. However, for the Search Engine Readiness Check In the testing phase, we will use Meta tags, page titles, page headings, link text, and page body text evaluation all through the website. HTML and CSS Validation per W3C (World Wide Web Consortium) Coding Standards Because we are a reputable organization we, will make sure that all the HTML and CSS codes used are in compliance with the latest W3C standards. This will ensure that all of the website will be consistent in all the browsers. Browser Compatibility Testing The website will then be tested on a number of browsers to ensure that it is functional in all the browsers. If it fails to display in any of the browsers we, adjust the coding till it does. Grammar, spelling, dead link and forms programming check Before launching the website, we perform a grammar and spell check to ensure that no mistakes are available. We then perform a thorough examination of any dysfunctional links and missing files. We lastly check the contact forms if they are functioning as is required. Launch Phase Launch Website All the files and scripts are transferred to the domain and databases set up. Error Testing After launching the website, the scripts are thoroughly checked to ensure that they work appropriately as they were designed to function. Website Files After we launch the website for the shop we, provide them with a burned CR-R on their site and an archive of all the information on their website. Basic Search Engine Submission After the above processes, we then perform a hand submission and an automated search engine submission. Completion Phase Minor Adjustments / Changes After thoroughly accomplishing the website uploading phase, we provide the shop with a small changes service. This means that we can do small changes to the website such as changing adding, deleting or changing of text and photos. Testing The key to ensuring that the website is adequately tested is in inviting the users for their feedback. This ensures that we receive feedback on how the site performs according to the users requirements. However, there are also some things that we must note when providing the feedback mechanism for the users. We do this by ensuring the following. That the feedback mechanism is visible in the entire website.This ensures that al the users can see the feedback mechanism. The t the feedback mechanism is consistent in all the browsers so that it maintains the position it is placed regardless of the browser the user is using. That the feedback mechanism is stable so that users do not have to leave the page, they are viewing in order to provide their feedback. That the feedback mechanism is both accessible and anonymous so that the feedback mechanism can be easily accessed with one click yet, the user feedback is provided anonymously. After introducing feedback mechanism that meets all of the above, we should consider how the feedback takes place. The preferred feedback in this project is to provide questionnaires for the customers to fill. . Content test Content test is the first test to be performed on any website (EndSley, 2015). This is because the content of the website determines the perception of the customers towards the shop. The foremost test on content is hyperlink and hypertext test for broken links. This involves determining format errors among others. Content checking also involves checking the tables for content and their formatting. User acceptance testing User acceptance testing was done based on quantified user acceptance testing that relies on the three-dimensional model: linear, recursive and adaptive testing. The concepts that should be tested are internal consistency checks, major system service checks, and real-time regression tests. It can be conclusively said that the website development project above was successful. The site allows the Nova Cosmetics shop administrators overlook the functionality of the website. They have the privilege of adding verifying users, adding new products and even deleting products. Users, on the other hand, can create and maintain their profiles while at the same time view customer reviews of the products they are about to buy. This shows that the website is functioning as was required. Works Cited Dixon 2015,Website Design & Development Phases, accessed January 13, 2015, http://www.icycolors.com/website_development.html ENDSLEY, K. (2015). Website design. New York: Wiley. LAWRENCE, D., & TAVAKOL, S. (2013). Balanced website design optimising aesthetics, usability and purpose. London, Springer. http://site.ebrary.com/id/10230216 MCNEIL, P. (2013). The Web designers idea book: the ultimate guide to themes, trends, and styles in website design. Cincinnati, Ohio, HOW Books. Mott, E 2015,The Key Project Stages for the Development & Launch of an eCommerce Site, accessed January 12, 2015, < http://smallbusiness.chron.com/key-project-stages- development-launch-ecommerce-37027.html> PLUMLEY, G. (2012). Website design and development 100 questions to ask before building a website. Indianapolis, IN, Wiley. http://www.books24x7.com/marc.asp?bookid=40875. Reimer, L 2011, Following A Webdesign Process, accessed January 14, 2015, http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/ SLEETH, S., & GARNER, S. (2014). Website design. Lawrenceville, NJ, Cambridge Educational. Read More