?Digital Design and DevelopmentCA1
Submitted by:
Anand M Mathew (10387302)
Dhanya Venkatesh Rai (10394365)
Karthik Rao (10382803)
Sneha Vats (10388026)

Table of contents
Requirement specification…………………………………………………..3
Proposed website name………………………………………………….3
Target audiences……………………………………………………………4
Usability and navigation requirements……………………………..4
Content requirements……………………………………………………..6
Graphic requirements……………………………………………………..7
Digital marketing goals…………………………………………………..7
Design……………………………………………………………………………….8
Wireframe of the website…………………………………………………8
Sitemap of the website…………………………………………………….9
Mock-ups and web style guide………………………………………..11
Website design and usability principles……………………………13
Implementation………………………………………………………………….13
Key milestones……………………………………………………………..14
Gantt chart……………………………………………………………………14
Reference………………………………………………………………………….16
Requirement Specification
Proposed website name
Name of the company: Your Chef Your Call
Website address: ycyc.ie
Our Tagline: Home is Here!
Why this name: As from the name itself we can identify that our company is all about giving our customers choice of the kind of food they want to have, along with the advantage of choosing the chefs who have got expertise in making that kind of food and that too nearby to their place. So thus, the name justifies here that our website gives the privilege to the customers that not just they can order the food they wish to eat but also from whom they want their food to be cooked.
Objective of the Website: The whole and sole purpose of the company is that, being in Ireland or for that matter in any other country, it’s difficult to cope-up with the cultural ;lifestyle differences and most importantly change in the type of food people have. Whenever someone moves to a different country, food is one of the most important things which is being missed as it reminds you of your native land. So here with this website we want people who are here in Ireland, leaving their natives and miss being home, just to bring that sense of homely feeling in the form food.
Through our website we want to deliver best quality of food to people. You can just choose your country and then whatever you feel like eating. We are very sure with the aroma of your native spices our chefs will cook, you will feel like home. And it not only helps the immigrants but to those also who want their cooking to pay off. This website not only provides service to people but also helps people who don’t really want their talent as a chef to waste.
Target Audience
Our target audiences are the Expats, who are away from their home and living in Ireland, specifically people between the Age Group of (17-35) as they are the people who are studying or are searching for jobs and just married.

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!


order now

Usability and Navigation Requirements 
Navigation Requirements: 
 
To gain good traffic to website navigation plays a major role.  “Everything should be as simple as possible, but no simpler”, Attributed to Albert Einstein.  
There are three primary navigation formats that can be used to build a website:
Structural Navigation:Connects one page to another dependent on the chain of importance of the site; on any page you are able to move to the page above it and pages beneath it.

Associative Navigation:Associates pages with similar contents and topics, regardless of their location on the website.

Utility Navigation:Utility navigation connects the features that assist visitors in using the site. These pages are generally not part of the main hierarchy of the site. (Kalbach, J.) 
In our website we are using structural and utility navigation. This is the hierarchy structure where one page is connected to the other. Below diagram is the structural navigation of our website

Fig 1.1: Flowchart diagram of the website using creately tool
Usability Requirements: 
The definition of usability in the ISO 9241 standard is: 
“The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use”. (Quesenbery,W. 2001). 
 
Different usability factors include:
 
Ease of learning: To both novice and expert users, website is made easy to learn with low barrier to entry. 
Task efficiency: Efficient for the frequent user, ease of completing task in less time for the user to visit the website persistently. 
Ease of remembering: Navigating to the required page, content understanding and ordering food in the website is made easy to remember. 
Understandability: Website is built in a self-explanatory format where; the users will be able to understand what the system does. For example, process of ordering food is given in the homepage of the website for the first-time user to understand in a better way.  
Use Case Diagrams:
A UML use case is then a model for specific usage that enables identification of complete requirements and the analysis of a collection of scenarios to understand the entire system, its actors and its subsystems. (Levy, D. 2014).

Below are few use case scenarios of Your Chef Your Call website created using creately online application.

Fig 1.2 Use case diagram for a new user and existing user with login

Fig 1.2 Use case diagram for a new user and existing user with Menu option

Fig 1.3 Use case diagram for a Chef to enrol
Content Requirements
Content Format
In our website we are mainly going to use 2 types of content types:
Info graphics- This format because our website is related to food so according to us visuals plays a major role in it. So, we are going to put information along with the display image which actually is more of an eye catcher. People tend to read more of information which is tagged along with attractive images.

Video Story Telling- We are going to use this format as we feel instead of writing long paragraphs, we should video story format in which we are going to display our chefs’ introduction from them only. This can be more relatable.

Language used
In our website we are providing service to people who are home sick and want to feel home so the best way to connect to them is using Informal language so that they don’t feel like they are surfing any company’s website but should feel connected to us instantly. For our chef’s sign up we are going to use Formal language because for them we are working as an employer, so that’s how it is going to work.

Content Goal
Our whole purpose is to make our customers feel homely by just the look at our website. Our content should be that relatable that people should not feel obligated at any point and they feel happy to order with us instantly.
About the Website
Reviews of the customers
FAQ’s
Food Description
Blogs
About Chefs
Graphic Requirements
Mock-ups – Smartmockups
Wire frame – Mock-plus
Use diagram & navigation – Creately
Logo – Logojoy
Entire website development – Wix
Digital Marketing Goals
Primary Goals:
To create brand awareness
Convert leads to customers
An increase in visits to our website
Secondary Goals:
Reducing bounce rate on our website
Enhance customer relationship
Tactics used:
Social Media Optimization/Campaigns
Re-branding
Membership Card
Events
Design
Wireframe of the Website
Wireframes are the blue print, with black and white layouts. It outlines the specific size, placement of page elements, website features, conversion areas and navigation of the page. Wire framing is one of those parts of the web process that should not be skipped, just as one wouldn’t build a house without a blueprint or live in it without decoration. Every small step in website building has an important place in a larger process. (Haas, N. 2011.)
Wireframe for our website is created using mockplus. It is a user-friendly application which helps you to focus on designing rather than the tool with drag and drop option.

Fig 1.4: Wireframe of the website
Sitemap of the website
Sitemap is just a map of the website, on a single page entire website structure is made visible. A sitemap is a simple XML file that lists pages on your site individually, with optional values for how often your content changes. (McGaw, 2010, p. 242)
For user, sitemap will enhance the navigation capabilities while making the overall website user-friendly. (Bigby, G. 2018).Thisway users will be able to view all the section in website and get a better knowledge of how the website works or what exactly is in the website.

Home Page
-Food Menu
-Indian
-Brazilian
-Chinese
-Search Food
-Indian Food Menu list
-Brazilian Food Menu list
-Chinese Food Menu List
-About Us
-Who we are?
-What we do?
-Blog
-Login/Sign up
-Pages
-Gallery
-Team
-Know Our Chefs
-FAQ
-Contact Us
-Chef Enrollment
-Customer Reviews
Fig 1.5: SiteMap for the website
Mockups and Web-style Guide

Fig 1.6: Mockup for home page creation

Fig 1.7: Mockup for logo
Fig 1.8: Mockup for mobile page display
Website Design and Usability Principles
The good practice aspects need to encompass aspects of design associated with usability, coding of pages, accessibility and metadata of Website implementation. (Stepehen, 2009, p. 169)
Few design principles to make the website design effective:
Make Calls to action clear
Make navigation easy and sensible
Page elements and designs should be attractive
Make the media available interactive (Yerian, N. 2012)
Implementation
This is the process that covers all the steps of creating the website from planning and design to building and putting them online. Here the strategies and plans are turned into actions to develop the website. The implementation process involves use of various programming languages and codes to construct the website as per the design CITATION Kyr17 l 16393 (Kyrnin, Jennifer ; December , John;, 2017).
Common Gateway Interface (CGI): It is a standard way of communication when a web user requests a web page through web server. This is a method of passing data back and forth between server and the application CITATION Rou17 l 16393 (Rouse, 2017)Hosting – Internet hosting services enables the website accessible via World Wide Web. To make a website we must use website domain name.

Domain and Sub domain- This will enable the user to access to the website, also having a sub domain is necessary to maintain branding in the URLs for member click pages
SSL certificate – It is required for all member clicks implementations to ensure secure links in the pages.

Accessibility- The usability and accessibility of web page in various browsers must be analyzed in order to improve the user experience in different platforms.

HTML – Hyper Text Markup Language is a standard language for creating web page. It describes the structure of web pages using various tags.

CSS -Cascading Style Sheets used along with mark-up languages as a style sheet describing the presentation of document written.

JavaScript – It is a programming language commonly used in web development. Its mainly a client-side scripting language meaning the code is processed on the client web browser.

Key Milestones
A Milestone is a reference point used to track progress in the project development timeline. They include clear marked task which must be completed according to the timeline. It basically acts as a guideline to provide way more accurately estimate the time will take to complete a project One of its function is to track the progress and estimated finished time as per the project plan CITATION Wes18 l 16393 (Westland, 2018).

On our website development process, there were ten major milestones were needed to be accomplished with in ten weeks. They were Reserch, Planning, Design, Review, Content assumby, Coding , testing, Final review, Maintance and website launch.

-430530-777240
Fig 1.9: Milestone for the development process
Gantt Chart
A Gantt chart is a type of horizontal bar chart that displays the graphical project schedule and its status. It was named after Henry Gantt who designed this type chart. It is frequently used in project management to help plan, coordinate and track specific tasks in the project since it provides clear illustration of project progress.

left198783
Fig 2.0: Gnatt Chart
Reference List
Kalbach, J. ‘Types Of Navigation’. Available at: (https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/ch04.html. (Accessed: 01 November 2018).

Quesenbery, W. (2001) “What Does Usability Mean:Looking Beyond ‘Ease of Use’.” Available at: https://www.wqusability.com/articles/more-than-ease-of-use.html. (Accessed: 02 November 2018).

Levy, D. (2014) ‘Use Case Examples-Effective Samples and Tips’. Available at: http://www.gatherspace.com/static/use_case_example.html. (Accessed: 02 November 2018).

Haas, N. (2011) ‘What Is a Wireframe? 7 Reasons Why Wireframing Is Important In Web Design’. Available at: https://www.orbitmedia.com/blog/7-reasons-to-wireframe/. (Accessed: 03 November 2018).

McGaw, J, (2010). Beginning of Django E-Commerce. Talk to Books Apress.

Stephen, B. (2009). Effective Web Presence Solutions for Small Businesses. Talk to Books IGI Global.

Bigby, G. 2018. ‘Do Sitemap Help SEO? The Importance of Sitemaps for SEO’. Available at: https://dynomapper.com/blog/22-sitemaps/277-do-sitemaps-help-seo-the-importance-of-sitemaps-for-seo.(Accessed: 03 November 2018).

Yerian, N. 2012. ‘6 usability Principles for Effective Web Design’. Available at: https://www.adherecreative.com/blog/bid/127302/6-usability-principles-for-effective-web-design. (Accessed:04 November 2018).

BIBLIOGRAPHY Kyrnin, Jennifer ; December , John;, 2017. december. Online Available at: http://www.december.com/web/develop/implement.htmlAccessed 3 11 2018.

Rouse, M., 2017. whatis. Online Available at: https://whatis.techtarget.com/definition/common-gateway-interface-CGIAccessed 11 2018.

Westland, J., 2018. projectmanager. Online Available at: https://www.projectmanager.com/blog/milestones-project-managementAccessed 11 2018.

Individual Reflection
The purpose of this project was to design and develop a website with the acquired knowledge and skill in the class learning process. We as a team of four, came up with the idea of Your Chef Your Call (YCYC) website design and planning. YCYC is a food service given to the expats with the help of the chefs enrolled in our website. It also offers chef enrollment who wish to make use of the cooking skills.

The first step was to figure out the idea for the website, to understand the pros and cons on designing the site. After planning and understanding the goals of the website the work was equally distributed among the four members in group. The main phase included Requirement specification, Designing and Implementation plan. I had the responsibility of creating the navigation requirement, usability requirement, wireframe and sitemap.

As a team member, my first task was to understand the usability and navigation requirements of the website. I started with the navigation requirement of the site. The goal was to provide a very pleasant user experience so in turn the customers revisit our site. Navigation here plays a major goal; the navigation should be made easy to the users. After multiple scribbles on the notebook, I finally made a navigation flow in the form of a flowchart. Once the navigation requirement was up to the mark, I started with the usability requirements. I read many articles online and understood the general usability requirements for the website through the research gate website which had posted Six styles for Usability Requirement. I have also used use case diagrams in perspective of the user usage.

Secondly, I started with the wireframe and sitemap for the website. Sitemap was the beginning because starting with sitemap I could get a clear picture of what is necessary on the home page, followed by other pages. I referred few websites to name a few- foodandwine.com, deliveroo.ie and few more. This gave me a rough idea of how a sitemap should look. After the sitemap, a rough sketch of how the wireframe of the site should look was created, followed with a team discussion with many questions; what is important for the website? What are the main tabs to be placed on the home page? Where each tab must be placed, so that the user can have a good user experience? After all the brainstorming I created a wireframe for the website with the help of the sitemap that was already ready.

As a learning process I have used different tools for the navigation, use case and wireframe creation. Tools that I have used are Creately and Mockplus, this project made me understand how different online tools can be used to create flowcharts and UML’s to make it look attractive instead of using Microsoft word, a traditional way of creating a flowchart or any other diagrams.

Each of us played a different role and contributed in designing, documenting, developing of the project and have completed the task successfully. We also reminded everyone in the WhatsApp group to ensure that everyone remembered to do their parts and not lag. One thing that I loved working with my team was we worked together as one group and not as an individual.

x

Hi!
I'm Mia

Would you like to get a custom essay? How about receiving a customized one?

Check it out