Assignment 3 Detailed Design Document Rajiv Devgan 11606873: Table of Contents 1. Design Overview 3 2. Project Scope 3 3. Project Requirements 3 4. Assumptions 3 5. Design process 3 6. Interface Design 3 7. Usability Testing 4 1. Design Overview In this particular project, designer represented the Graphical User Interface for the selected online gift shop namely Rose Online Gift Shop. In these days of modern era, the trend of online gift is increasing day by day in the live of the world of information technology. As the days past, everything is going digital. Therefore, the owner of the business in every industry tries to represent their business worldwide through designing the e-commerce website. Low, Hui and See (2015) cited that online presence of the company allows them to bring more customer and sale the product more transparently. Therefore, this assignment describes the requirements of the user through designing the interfaces of e-commerce website. The interfaces of the online present of gift shop is created for the Rose Gift Shop company with keeping in mind the interface usability for the people. The interfaces of the online gift shop is designed simply and made it attractive so that different user can use it easily in any system. People can easily access the page from their desktop and mobile as well. The interface design presents the emergence of e-commerce for Rose Online Gift Shop that helps customer in viewing the products including their prices as well as discount offer remotely. Total 10 page design created for Rose Online Gift Shop including Home Page, Log in page, Contact Us page, Track Order, Cart, Currency, Help, About Us, etc. The home page the of the interface demonstrate the new and upcoming products along with the top selling products for Rose Online Gift Shop. The about us page describes the company overview. Help page is created to allow the customer in getting help of their every query. The e-commerce page for the company is designed with keeping the responsive page and drop down menu for the navigation along with the proper labelling. 2. Project Scope In designing the user interface of a e-commerce project need is kept responsive so that the customer can get all the details about the company along with the products and their unique services. The pages of the website needs to be created properly so that it can load frequently as well as up to date about the company’s information (products and offers) so that customer can easily buy and show their interest in visiting the site repeatedly. Online presence of any company also allows the people in selecting their own choice as well as the current discount offer on every products. Apart from that, in these days of busy scheduled life, buying online is the best option for people. Furthermore, it is also to be noted that buying online also allows the customer in choosing the items from a wide range of available products online along with their suitability and affordable price. An online support option can also help in bringing more customers and making them loyal towards buying the products from that particular page only. The master page (home page) of the website can also need to have contact to the technical experts along with admin so that people can share their view if they face any problems. Therefore, following are the project scope for this design – • Develop and create an assimilated user interface of a online gift shop that projects consistent images and consolidate the information along with the view of top selling products. • In order to portray the progressive image, serving the firmly grounded crunch that needs to be designed with the requirement of the community. • In order to increase the visibility of Rose Online Gift Shop for their marketing and services options • To offer the interactive features that allows the crunch part of the customers’ daily functions in buying the products from online. • To allow the customer in live tracking their purchased products according to the booked address. • To allow the customer in buying products of Rose Online Gift Shop according to their currency such as $, INR, EURO, USD, etc. • To assure the technical support and required training is in the place for maintenance of the site and helps the daily functions of members. • To provide the facility to people for bypassing the phone as well as e-mail to contact the crunch. 3. Project Requirements Aykin (2016) opined that functional requirements of any project can explain the core functionality of the created application. Foe any online gift shop designing project, there are several functional requirements such as requirements of data, requirements of functional process, requirements of operational process, etc. Requirements of data explains the data requirements by developing the logical model of the application that consists the entity definition, entity relationship diagrams, attribute description and definitions, etc. The functional process requirements explain the features of the application that relates with the attributes and entities from the required data to the users needs (Dumais et al. 2016). Apart from that, operation requirements explains the non-business characteristics of the application. Therefore, following are the project functional requirement of Rose online gift shop – I. The website can allow user in visiting the site easily and navigate the page according to their needs. The top selling products along with the highest discount can be appear first. There will be a different section that allows customer in reviewing new and upcoming products of Rose Online Gift Shop. II. The user of the website can view the products category wise such as Birthday gift, Mother’s Day gift, Anniversary Gift, Occasions, Type of Gift, Same day Delivery, Cities, International, etc. III. The user of the webpage can ask for the unavailable products by selecting their choice and they can also allow getting notification on their registered e-mail id as well as registering mobile number. IV. The User of the web page can track their purchased order real time through Google Map application. It also allows the user in paying for the purchased order according to their region currency along with the several payment options such as Cash on Delivery, Online Banking, Online Wallet and Credit or Debit card with the most reliable digital payment sources. V. The interface of the website for Rose Online Gift Shop is easy to navigate and simple to use. VI. The user of the Webpage can leave their message as well as can able to make live chat with the site operator any time. VII. The user also able to contact through phone call or email for any type of technical support. VIII. The user of the webpage of Rose Online Gift Shop can add their products on cart and continue with the purchasing. 4. Assumptions Assumption 1: Designing if Simple and Easy Interface – This is the key assumption for this project. In these days of busy schedule, people always looking for easy and simple interface to navigate. Therefore, designing simple interface can make the user happy and attract them to visit or purchase products repeatedly. Assumption 2: Designing of Responsive Interface – Need to design the interface with proper responsive so that user can view from every devices such as desktop, laptop, tablet, mobile, etc. Assumption 3: Responsibility to enter proper details in to the content management system – The interface should use the proper view and enter box according to the needs so that user can put proper details in to the content management system that will allow the company in delivering perfect order on required address. This is the basic assumption that can have the potential impact on the delivery and schedule of the company’s daily functionality. However, proper content can allow the company as well as user in underestimating easily at the coordination and level of efforts. Apart from that all the inputted information must engage with the internal content team that helps in managing the information as well as identify the gaps in terms of producing the require amount of quality content. Moreover, providing information to the managers and other stakeholders of Rose online gift shop company can help in prioritizing the triage and efforts for more marketing and selling products online. Identification of out dated information or the used content must need to mitigate during the designing of the e-commerce site for online presence of Rose Online Gift Shop. Assumption 4: Size and Format – The interface of the website should be dynamic with the five page designing according to the content complexity and available options of selling products. The design of the website should be with the 0cm margin along with the 14px font size. The font family of the interface is Arial along with the default colour and 1.5cm line spacing. Assumption 5: Baseline Inputs – For this particular interface to represent the organization in online, proper form of baseline definition for the functionality has been applied that accepted with the system Z. Following baseline definition has followed to design the interface – “Schedule A: CLARIFICATION DOCUMENT; Technical and Financial Proposal for SYSTEM Z (395-1.4-1-1.0), COMPANY ABC, May 2, 1994; XYZ Request for Proposal 008 D 94 PBS 70 - SYSTEM Z; The precedence of these documents and other project deliverables is defined in the Statement of Work;” Apart from that gap analysis and content audit also defines the effort level that required to design a responsive online interface for Rose Online Gift Shop. Also, the organization must arrange a customized training program through the CMS training that will help in developing the awareness and easy way to purchase a product or Rose Online Gift Shop. The testing as well as the acceptance plan will be incorporated with the content of the interface through quality analysis cycles for this particular interface. 5. Design process Xie et al. (2015) explained that the design process of the website design is not like the other communication process. The interaction design of the website should be familiar with the creative design, a proper communication plan, a proper public relations plan, development modelling, etc. There are several characteristics of the interaction design that has followed in this designing project such as – Focus on User requirements through the process of design: This design project formally focuses on the needs to evaluate the design of the project. The designing of the project focused on simple and easy view of the interaction for Rose Online Gift Shop Company. The users are also involved through the design process for this particular design work. Interaction of the Design Process: Hsu and Shiau (2013) opined that interaction of design allows to be refined the responses of user feedback. Therefore, this particular design created with the process where the font size and colour has been promptly applied. Each content of the interaction project is clearly visible to the user. Users Experience Goals and Specific Usability: The goals of this designing project is to represent the interaction of the online presence for a selected organization namely Rose Online Gift Shop. Therefore, the designer used low fidelity prototype design because the development cost is lower (Rehberg et al. 2015). Also, it allows the proof of concept properly. Apart from that it can helps in evaluating the multiple design concepts as well as the more useful communication device for the user. Furthermore, the activities that followed in the interaction design for this project are as follows – Develop with Alternative designs: For this design, a detail design and conceptual design has been followed for this particular project. The Index cards for this interaction is 3 x 5 inches. The every cards of the interaction represent the part of screen or the one screen. The interaction also made with the early expectation of standard users through providing the wide range of functionality but kept in short details (Larsson 2016). There are lot of details for the few functions such as track your order, and product details, etc. Identify and Develop with the User’s Requirements: At the start of the design, needs of every requirements for the user has been maintained. The designed has been followed with the transform user requirements into the conceptual model. For the better capture feel, mood board is used in this interaction design project along with the consideration of alternatives such as prototyping helps (Almakky, Sahandi & Taylor, 2015). The interaction design also express some imagined or proposed situations such as product details, added the products to cart before purchase like other line purchasing interaction design. There are zoom in and out functions for some extreme cases to explore to the user. Develop with the Interactive Version of Design: In order to evaluate the designs, interactive versions are used in this project. In this project, various interaction design are used such as pattern libraries, individual pattern, language patterns, etc. The open sources components and systems are also used along with the required environments and tools (Rogowski, Wu & Clark, 2014). Several elements of concrete design are also used for this project such as colour, interaction device, buttons, links, etc. Develop Interaction Version of Design: In terms of evaluating the need of user for the interaction design projects (Rahmanian & Davis, 2014). The interaction design reduces the confusions between the users and designers. The interaction version that used here is role playing users and paper based prototypes. 1. Interface Design Home Page About Us Page Register/Login Page Product category Page Product Category Page (Continue) Product Category Page (Continue) Category Details Cart Payment Page Payment Page (Continue) Usability Testing The usability testing is the main part for the user centered design of the online gift shop. For getting an effective result the test is required to be performed during the implementation and the designing phase. The design process of the website can be broken down into six phases and the designers are required to go back to the previous stage if error is identified in the next stage and correct the errors (Rogers, Sharp & Preece, 2012). The main stage identified for developing the website and testing the errors are as follows: Problem Definition- In this stage the functional specification for the development of the .project and the requirement is collected. Analysis- In this stage the design of the website interface is developed following a conceptual model and the development of the system is started. Design- In this phase the requirement of the system is analyzed and the low level design of the interface according to the working of the system is prepared. Development- In this phase the system is created and tested according to the requirement of the project. Testing- The technical correctness of the system is checked in this phase and if any error is found it is resolved by going back to the previous stage. Implementation- In this stage the developed user interface is used for creation of the actual interface design and add functionality with the interface for the development of a fully functional system. Maintenance- the correction and changes that are required to be made for the development of the project are performed in this stage and the errors identified later in the system can be resolved from the maintenance phase with the addition of patch and making slight change in the functional modules. In the above stage of the development process the usability testing can be applied for improving the design and efficiency of the developed system (IAT201-Interaction Design, 2017). The usability testing can be performed using two types of approach such as heuristic approach or experimental approach. The heuristic approach is used for asking a group of evaluators regarding their preference and evaluating the interface design according to the attributes. The prototype of the system is required to be evaluated depending on some set of criteria such as using simple and natural dialog, using the language of the user and mock-up interface. The interface design must provide feedback to the user and is required to be interactive for assisting the user to the destination (Allen, 2016). The use of shortcuts and the preventive measures to reduce the user errors are also tested for an effective user interface design. The responsive of the website is also tested according to the load given on the system and simplicity of the website is also used for designing the system user interface (iPhone Paper Prototype, 2017). The protection or the system with respect to use of authentication and validation used in the interface is also analyzed for development of an effective user interface design for the online gift shop. The experimental approach is used for testing at different levels of the development cycle that are listed as follows: Exploratory- This type of testing is done in the early life cycle of the development process while the functional specification of the project and the high level design is created. The main goal of the test to analyze the representation of the conceptual model and the participants of the test are a few user and the designer. The designer collect data using a qualitative analysis and finds the errors and the components they have missed for inclusion in the design. Assessment- It analyzes the correctness of the conceptual model and the performs different activities to analyze functionality and errors of the system. Validation- This is performed to analyze the validation and the authentication used for the users while logging into the system under a realistic scenario for purchasing a product from the website. Comparison- The interface design is compared with different designs available for the user and decision is taken for choosing the appropriate design suited as the interface of the website. Reference List Advanced Interaction Design Video Prototype at http://www.youtube.com/watch?v=mJfqE9Q3tpk Allen, R. B. (2015). Improving Access to Digitized Historical Newspapers with Text Mining, Coordinated Models, and Formative User Interface Design. arXiv preprint arXiv:1502.03943. Almakky, H., Sahandi, R., & Taylor, J. (2015). The Effect of Culture on User Interface Design of Social Media-A Case Study on Preferences of Saudi Arabians on the Arabic User Interface of Facebook. World Academy of Science, Engineering and Technology International Journal of Social, Behavioral, Educational, Economic, Business and Industrial Engineering, 9(1), 107-111. Aykin, N. (Ed.). (2016). Usability and internationalization of information technology. CRC Press. Dumais, S., Cutrell, E., Cadiz, J. J., Jancke, G., Sarin, R., & Robbins, D. C. (2016, January). Stuff I've seen: a system for personal information retrieval and re-use. In ACM SIGIR Forum (Vol. 49, No. 2, pp. 28-35). ACM. Hsu, C., & Shiau, H. C. (2013). The visual web user interface design in augmented reality technology. International Journal of Advanced Computer Science & Applications, 4(2). IAT201-Interaction Design: Paper Prototype Scenario[Revised] at http://www.youtube.com/watch?v=hP-xQi5SXEA iPhone Paper Prototype: Human Interaction Design at http://www.youtube.com/watch?v=LVkAUB6QCHI Larsson, R. (2016). A user centric approach for evaluating and enhancing the usability of a complex real-time web user interface. Low, S., Hui, T., & See, S. L. (2015). ENHANCING USER EXPERIENCE THROUGH USER EXPERIENCE THROUGH CUSTOMISATION OF USER INTERFACE (UI) DESIGN. Rahmanian, B., & Davis, J. G. (2014, May). User interface design for crowdsourcing systems. In Proceedings of the 2014 International Working Conference on Advanced Visual Interfaces (pp. 405-408). ACM. Rehberg, T., Izotov, D., Clare, C. J., & Palmer, J. E. (2015). U.S. Patent No. D730,388. Washington, DC: U.S. Patent and Trademark Office. Rogers, Y., Sharp, H., & Preece, J. (2012). Interaction Design (3rd ed.). Chichester, West Sussex, UK.: John Wiley & Sons Ltd. Rogowski, R. L., Wu, H. Y., & Clark, K. A. (2014). U.S. Patent No. D706,803. Washington, DC: U.S. Patent and Trademark Office. Xie, Y., Mandal, A. K., Jones, C. M., Richardson, D. L., Hering, J. G., & Mahaffey, K. P. (2015). U.S. Patent No. D720,765. Washington, DC: U.S. Patent and Trademark Office.