Bridging Digital and Physical in Web Design

Requirements Specification and Design

Functional Requirements

These refer to the elements that create the link between the digital and physical world. They include different elements in the websites interface which enable its use and control of the website. These functions are classified into user features as well as Administrator features. They determine what the user can do with the website by presenting them with the access to be able to view different sections of the websites and being able to search for a desired product compare it to different products and buy any desirable product eventually, in this case different flower types. It also offers the administrator control over the contents of the website allowing them to add and remove products and generally manage the website.

The User will be able to do a wide range of things in this website including:

PAY

Paying for a bought product is one of the essential parts of ensuring the completion of a business transaction. Given that the website intends to offer full services to the users one of the functional requirements is a payment feature. In the event of any purchases made, or the viewing of a desired product the user will be able to directly pay for it through a feature button that offers different paying options.

SEARCH

One of the most essential features for the efficient functioning of a website of any kind regardless of the kind of information it holds is being able to find what one is looking for and efficiently at that, considering the advancements of Industry 4.0. The user must have a way to find what he/she is looking for easily without having to scheme through the entire pool of information available. The SEARCH feature enables individuals to literally find whatever information regarding a product that they are looking for by simply typing in a keyword. Users can therefore find different types of flowers just by simply keying in the name and be able to browse through any variety of it that is in the inventory.

SUGGESTION

Given a flower choice of the same kind the thrill and mystery of flowers is lost. The website uses an algorithm to be able to identify a close alternative to a flower choice based on the kind of flowers frequently chosen by the buyer. Eventually a range of suggestions that could also enhance the buyers taste and preference to a different variety is suggested to the user whenever they view any products.

Dig deeper into Domestic Violence Disparities with our selection of articles.

VIEW

The website will enable the users to be able to view different products and services on sale as well as provide detailed information and description of the product. Deeply defining the scents of the flower and the type of mood they are suitable. With the VIEW feature, the user of the website can learn about different products and also improve their knowledge, tastes and preferences of different other products other than what they intend to buy.

Compare

A wide range of flowers exist for sale for sociable purposes however some are pretty rare and hard for buyers to distinguish, in addition these flowers may have extensive descriptions which are quite difficult to differentiate. As such the COMPARE feature was thought quite a functional feature in this website. It enables buyers to compare and contrast different products (flowers) giving a concise description of the similarity or differences

ADD TO WISH LIST

This feature will not only enable the website to highlight what clients want but can’t have and therefore develop strategies of improving its sales it will also provide an avenue for loyalty promotion for loyal customers. When a loyal customer adds to their wish list the website based on their loyalty could offer a discount on the item and enable them to buy it.

The Administrator will be able to

Manage Website

The administrator of the website will generally be responsible for ensuring the proper running of the website keying in instructions through different features that the website allows them to, enhancing the look of the interface through enhancing theme and display designs managing transactions such as payment and orders made online and ensuring timely delivery of the flowers.

Manage User

Another functional feature of the website administrator would include managing the users of the website. This highlights keeping track of the different buyers and the products they search for, managing their transactions, and the functionality of their accounts within the website. Given the nature of the website being an online shopping platform users are bound to interact with it and thus managing users is an essential functional requirement.

Add Products

Another function of the website administrator includes management of the product inventory within the website. This includes being able to add a products as and when they are available and updating the users on when they run out of stock and time of restocking. The Administrator should also be able to delete a product as and when the company stops selling it in order to not mislead the buyers.

Edit Product

The administrator will also be able to develop a description of every product on the website including qualities like size, color and shape. This includes the pricing as well as any other attached information. While no mistakes are foreseen, the website offers the administrator the ability to edit any information as and when required to ensure buyers view the most updated descriptions and prices and therefore make informed decisions.

Information and Review Update

The website will also involve information and review update section where recent stories and trends as pertains to the different products sold will be shown. In addition, these sections which resemble digital billboards will highlight any reviews from clientele feedback and display for all users and to enhance eWOM strategies that will help further enhance and develop the website. The administrator will be able to regulate the information that goes in this section and for whichever period of time prescribed for it.

Development Approach

The website development took up a top down approach with the use of scrum. A top-down approach essentially breaks down the project system from larger generalizations to smaller more focused subsystems that are responsible for specific functions. Wilkins (2011) describes it as the decomposition of a system into smaller parts in order to comprehend its compositional sub systems. A form of a hierarchy is developed indicating a general and not so detailed system component which is then broken down to a subsystem, every subsystem is further refined in greater detail for instance development of different levels of a subsystem. The eventual identification of the base elements of the website then enables their easy coding and building as computer modules. Once the different modules highlighting different functional elements of the website including user capabilities and the administrator capabilities as well as the different general features of the website including different classifications have been identified the hierarchy is then also helpful in effortlessly putting them together and building the entire system from these individual elements.

Scrum was further used given its effectiveness in development of agile websites. This includes a detailed description of all the sections of the project and the process with which it will be systematically developed by the different people in the development team. No specific instructions were given rather responsibility to different section coding which eventually led to the development of the website. Additionally the scrum team were not limited to who does what section rather all the problems faced in the development of the project were solved by the scrum team through decision making together. The top down approach was taken up for use given the clientele for the website is a new market and the designers are not much aware of their specific requirements. As opposed to the bottom up approach this design enables the designer to design a website based on what they wants the users to experience and how they intend the user to interact with the website. As such using a scrum team enables diversity in opinion and ideas which further enhance the suitability and efficiency in the functionality development.

Resulting Designs

Front End

Back End

MVC

The Model View Controller MVC is an architectural pattern that separates an application into three main logical components. The Model, the View and the Controller. Each aspect is then effectively built to handle a different and specific aspect of an application (TechTarget, 2019) MVC enables the relation of the user interface features to the underlying data models. Three main components make up the application development pattern.

Model

The model is responsible for the design of the interface highlighting the eventual look of the website. Wattis (2017) points out that this component specifies the logical structure of data in a software application and the different level class it is associated with. It specifically highlights the domain with data that describes the working of an application. Rouse (2018) further points out that the model component corresponds to all the data related logic and logical sequences that the user works with. In most cases this highlights the data being transferred between the view and controller components. For instance a user function will be able to retrieve information from the data base relevant to the user’s needs, manipulate it and update it while rendering data for the required functionality that corresponds to the function

View

The view component is used to display all the functions keyed in the user interface. According to Rouse (2018) it is used for all the User Interface logic of the application which is simultaneously displayed. It enables the application a form that is easy to interact with from the users’ perspective. Coding on the User interface components such as boxes, links and dropdowns will all be included in this section of the design. Multiple views can also exist for a single model for different purposes

Controller

Controllers are basically the link between the model and the view components. They interlink functional command highlighted by the model to the specific data and requirements which are then described in the view. Based on the description by TechTarget (2019) this component is responsible for the processing of the business logic, incoming requests and manipulation of data using the model component and interacting with the views component in rendering the final action described by the function. For instance the controller manipulates information and data regarding a products detail information retrieves it and displays it through the view component. Angular 6 is the command language that was adopted by the developers in the website mainly given that it is the latest angular version with new features including possibility of creating creative native web elements using Angular elements as well as making it easier to update. In addition it is also quite compatible with the MVC model of Application development and would thus be efficient in the entire process.

MVC-Angular 6

Angular 6 is the 6th version of Angular a computer programming language based on the components/service Architecture. It is An upgraded version of Angular 5 that is directly updated from angular five and bare almost the same features as angular 5: these include: HTTPClient API which is much faster and secure than HTTP Library. It also has multiple export aliases which enables a component to be easily exported using multiple aliases so as to ease the process of migration, it has introduced international pipes for numbers , Date and Currency for better standardization processes. It also has Lambda support expressions with proper names that are used instead of functions. It also has a build optimizer which optimizes and build size as well as improve the application speed and an improved compiler which supports incremental compilation subsequently resulting in faster compilation. The compilation uses Typescript programming language (Hayani, 2018).

Tools

Angular 6 - Front End

Typescript

Typescript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. It refers to a typed superset of JavaScript compiled to JavaScript that offers classes, modules and interfaces to help the developer build robust components. It includes a strongly typed, object oriented, compiled language as well as a set of tools (Visual Studio, 2019). Type script was specifically chosen for use in this website development owning to a range of benefits including its compilation language format which is useful in being able to reduce syntax errors through a generation of compilation errors and highlighting them to be changes before the script is run. It comes with a strong static typing and supports type definitions for existing JavaScript Libraries. In addition it also supports object oriented programming like classes, inheritances and interfaces

PHP

PHP informs another tool used in the development of the website especially the Back end of the application. PHP is an open source general purpose scripting language that is especially suited and used for web development and can be embedded in HTML. PHP is derived from Personal Home Pages also known as Hypertext Processor currently. Through the integration of PHP and the use of MVC model the development of the Back end website was enables and assists the efficient running of the Back end components of the application to function smoothly and efficiently. PHP pages contain HTML with embedded code that limits the use of a wide range of commands by the user and administrator. PHP.net (2019) highlights that the distinguishing factor between PHP and other programming languages is that the code developed is executed on the server enabling the generation of HTML which is afterwards sent to the client or user. Among the justification for its use is that it is extremely simple to use especially with coders that are not well conversant with coding yet and at the same time provides a wide range of advanced features that are used by and signify an advanced programmer. Other advantages of PHP as highlighted by guru99, (2019) is that it is an open source programming language and therefore free to use which minimized the cost of the website development process, in addition it is easier to learn and thus has quite a short learning curve, it is regularly updated to be able to keep up with technological trends and upgrades, it is compatible by most web hosting servers which often host it by default compared to other scripting languages, it also gas an inbuilt support for working hand in hand with MY SQL which highlights the use MySQL as another tool for programming the back end of the website and is highlighted below

MySQL

MySQL is another free open source programming software that is in fact the most commonly used. According to Oracle corporation (2019) it is a Relational Database Management System (RDBMS) that is based on Structured Query Languages (SQL) and hence the derivation of its name. MySQL was chosen as a tool in this website development given that it can effectively run in all platforms including Windows, UNIX as well as Linux operating systems. Its high compatibility with PHP also spearheaded its use in the development process. MySQL as the Relational Database Management system and PHP as the object oriented scripting language enabled a fluid and efficient development of the Back End components. Its functioning is based on a Client server model which is its core and handles all the data base instructions of commands coded. It operates along with respective server utilities programs which support it in the administration MySQL databases. Commands are sent to the MySQL server via MySQL client which is separately installed in a computer (Moore, 2019). Some of its main features including, its ability to enable storage and access of data across multiple storage engines including CSV, InnoDB and NDB. It also allows access of data using standard SQL commands and as such users do not have to learn new commands. Further the software is also capable of replicating data and partitioning tables for better performances and durability. The software is written in C and C++ and supports large data bases with millions of records as well as many data types including unsigned and signed integers (Rouse, 2018). The software was also preferred due to its security features which includes the use of access privilege and encrypted password systems that hosts can verify. This grants the users privacy in terms of accounts usage and the Administrator access to all user accounts and information.

Implementation Problems

Learning programming

Learning programming languages and components are among the major limitations that I encountered within the cause of the project development I order to be able to efficiently develop the website fluidity in the various processes that encompass coding is required and particularly, learning how to use Angular to build the Front End was a major challenge I experienced in the development phase.

Security

Hash Passwords

Hashing refers to a type of Algorithm which takes any type of data and turns it into a fixed length data, this is often used in the process of data retrieval seeing as larger amounts of data are shortened for easier retrieval (Kauffman). Hashing passwords as such entails hiding of passwords and access information to ones data base as such making it difficult for anyone to log in to another’s accounts in case they come across their details. Hashing passwords was one of the problems I came about in the process of the website development and posed a real challenge.

Different Access for Admin and User

Being able to develop the website in a way that access is different for the user and the Admin and as such certain components of the user are inaccessible by the Admin and vice versa also presented a real challenge in the end. While we want to restrict the Administrators reach, the aim is also for them to have control of all aspects of the website and thus enable its efficient functioning.

Capturing customers’ needs

Online shopping alleviates risk from the Buyer and ensures delivery of quality products. However the late deliveries as well as lack of enough payment options strike the researcher as a popular limitation to the use of online shopping and thus warrant a strategy. All these can be in cooperated in the development of the project website by ensuring efficient logistics and supply chains that minimize as much as possible the delivery time of products in this way the company further develops a competitive advantage on top of having easier to use interface that is user friendly and as such enhance user experience. The website could also look to ensure a wide variety of products catalogued and updated on the website as well as updating the clients of any type of new product expected in the market soon. In this way not only does the website maximize in facilitating sales but also function as an elaborate marketing strategy for the organization. The class representation in addition were useful and accurate in being able to identify some of the short comings that came with online shopping including not being able to develop a one on one relationship with the buyer or seller and as such lacking in a critical factor of truth that is entirely crucial for the growth and development of a flower selling business. With this the project sought to enhance the relationship between the buyers and the sellers through a development of an extremely easy to use review section where consumers and the buyer can interact. Another key limitation of the use of online shopping is integration of payment process. The Payment class had to be associated with permission class and integrated with online payment platforms particularly in a community with reservation with indulging some online shopping and e-commerce sites due to the lack of adequate payment options that they could use. This however is not much of a concern in the development of the projects website given that the project is developed by a researcher who is a citizen of Saudi Arabia and as such among the payment options included are the local money transfer outlets within Saudi Arabia. This facilitated conversance among the population of the town as well as any incoming visitors who may need other payment options, further the website will also be internationally accessible and usable and thereby expanding its impact not only in Saudi Arabia effectively enhancing growth. In addition as highlighted in the design specifics the website will include Arabic and English language for ease of use by the locals as well as tourists thereby solving the limitation of language barrier. Another barrier to the project that was highlighted in the findings is the delay of deliveries and thus impacting product quality and usefulness. In the flower industry especially delivery of the products are key and to be able to successfully run an online flower sales website and company, then the chain of supply and delivery must be meticulous and without delays. This is also key given that it is a major shortcoming of most of the online retail companies in existence. The company can take up the competitive advantage.

Class Diagrams

The draw diagram above shows a domain model outlining the core variables. The core classes adopted in development of the websites were ProductTypes, Role class, Product class, Shopping cart class, User class, Order class, Payment Class, Role class, and Permission class. As show by the diagram, the classes are interlinked with parent-child relationships given by the directional arrow. Variable in a class had a unique id acting as a blueprint of created objects as well as describing the types of objects. Each customer was assigned a unique id with relationship with only one account (User Class). The User Class holds all the details of the customer that include name, address, and role with sub-grouped into administrator ability to add, delete, edit, and search for the user. The customer was required to be a web user to register with all the details captured because payments are done through online and app services. This class was linked to role class with role id and description as well as permission class holding (permission id, role, and description). The product class comprised of the Product_id: int, Product_category_id: int, product_description: String, product_customer_id: int, and product_customer_id: int, which the administrator would edit and accessed by consumer for selection before buying the selected products. These classes allowed shoppers using the site identify and select in addition also provide a platform for the interaction of the buyers and sellers and being able to develop the a relationship which enhances the business, in these platforms moreover, customers can be able to review different products and discuss different brands and as such provide a consumer with invaluable information for decision making regarding which products or services to buy. The Order Class had description, type, number, and customer identify classed as order_description:string, order_type:string, order_number:string, and order_customer_id:int with ability to add, delete, edit, and search included with the class. The Order class, User class, and Product class associate independently to the Permission class. Customer with all the details captured by Customer Class had to check the availability of a product in Product Class before seeking permission to purchase. The Payment Class and Permission Class are interlinked with the former consisting of payment id, customer id, amount, description, and type that had to be checked and confirmed before proceeding (under permission) with product purchases and delivery. In addition to developing of a platform allowing user to interact with the products before purchasing, the development of the website boiled down to ensuring variety not only in the products and services offered but also in the payment options, language options and delivery locations. This includes a development of an efficient distribution channel that enables timely distributions and thus a competitive advantage. The development of the website should further indulge in developing the review segment to encourage the interaction with their consumers for feedback regarding the services and products provided. Through express feedback as well as reviews on the products provided by the company the customers can make more informed decisions on what they intend to buy and at the same time the company can improve on the products and services they offer thereby benefiting both them and their customers and impacting further growth of the business.