Thomson Cycle: System Analysis, Design, UI, and User Experience Report

This report presents a comprehensive system analysis and design for Thomson Cycle, encompassing database design, architecture, and user interface (UI) development. The report begins with an Entity Relationship Diagram (ERD) and database normalization to the third normal form, followed by the design of a deployment diagram to visualize the system's architecture. The UI design section details UI design principles, including clarity, consistency, and user interaction, and includes a UI mock-up. The report also outlines the UI design process, including use scenarios and a navigation diagram, along with UI design standards and prototyping techniques. Finally, it addresses usability and user experience goals, including key system requirements. The report leverages UML diagrams, mock-ups, and detailed explanations to provide a thorough system design. The case study focuses on the Thomson Cycle business and its requirements for an improved system.

Running head: SYSTEM ANALYSIS
SYSTEM ANALYSIS
Name of the Student
Name of the University
Author Note

1SYSTEM ANALYSIS
Table of Contents
Task 1 Database Design...................................................................................................................2
Entity Relationship Diagram.......................................................................................................2
Task 2 Database Normalization.......................................................................................................4
First Normal Form.......................................................................................................................4
Second Normal Form...................................................................................................................6
Third Normal Form......................................................................................................................8
Task 3 Architecture Design.............................................................................................................8
Deployment Diagram...................................................................................................................8
Task 4 UI Design principles & User Interface Mock-up.................................................................9
Task 5 UI Design process..............................................................................................................13
Scenario.....................................................................................................................................13
Navigation Diagram...................................................................................................................14
Define/apply the standards in UI design....................................................................................16
Prototyping technique and interface evaluation technique........................................................16
Task 6 Usability and User experience Goals.................................................................................17
Key requirements.......................................................................................................................17
Bibliography..................................................................................................................................18

2SYSTEM ANALYSIS
Task 1 Database Design
Entity Relationship Diagram
Class Diagram is a part of Unified Modelling language whereas the Entity Relationship
diagram is a structural approach of system modelling. An ERD illustrates the real life objects as
entity, attributes and relationship between them. In the field of business information, software
engineering and education, the entity relationship diagram plays major role in development.
Below diagram has been mapped from the provided class diagram of the Thomson Cycle where
the methods are not included as an ERD only contains attributes. The stock maintenance and
system interface class has not been taken into the account as they contain product related
attributes. They have been included in the product table. Also the order status class is also
eliminated due to not having atomic values and it is related to the order table, hence an attribute
named “Status” has been included in the order table. The table booking reference has also been
neglected as it does contributes heavily in the process of booking and order system.

3SYSTEM ANALYSIS
Figure 1: Thomson Cycle ERD diagram mapped from Class Diagram
Source: created by author

4SYSTEM ANALYSIS
Task 2 Database Normalization
First Normal Form
The first normal form of the normalization states that all the attributes should have atomic
values, the attribute should be related to same domain and columns should be unique. All these
criteria is present in the developed ERD except the variability of the domains in the tables. The
Bicycle and the clothes table are generally nothing except the product types and related to the
product domain. Hence, both the entities have been merged in the product table as an attribute
named “ProductType”. The relationship between the cart item and products have been changed
from one-to-one to one-to-many as a cart can have more than products stored. Also the
ProductID should be the foreign key referenced to the ProductID.

5SYSTEM ANALYSIS

6SYSTEM ANALYSIS
Figure 2: Thomson Cycle ERD After 1NF
Source: created by author
Second Normal Form
The second normal form states that the table should be in First normal form and all the
on-key attributes should depend on the subset of any candidate key attribute in the table. It
means that there should not be any partial decencies between the attributes in a single table. A
table having partial dependencies is split into two or more tables to obtain the dependency on the
key attribute. The payment info in the customer table is related to the different domain hence an
another table is created named “payment” which stores the payment details of the customer like,
PaymentID, Payment Mode, Payment date amount etc. The paymentID in the customer tabled
referenced to the paymentId of the Payment table.

7SYSTEM ANALYSIS
Figure 3: Thomson Cycle ERD After 2NF
Source: created by author

8SYSTEM ANALYSIS
Third Normal Form
The third normal form of the normalization states that the table should be in the second
normal form, it should not have any transitive functional dependency and no many-to-many
relationship should be present. In this scenario, the tables are 2NF normalized, there are no
transitive functional dependencies and there are no many-to-many relationship is present. Hence,
the database model is 3NF normalized.
Task 3 Architecture Design
Deployment Diagram
A deployment diagram is a network diagram in UML approach which represents the
execution of the system architecture consisting of software and hardware including nodes by
showing the environment and the middleware o the system. It is generally used in the
visualization of the interaction between the physical hardware and software of the system. The
below developed deployment diagram shows the hardware and software artefacts, object, nodes
and process of the Thomson cycle system. Based on the non-functional requirements of the
system, the system environment has been shown as the IOS, Android devices or any web enable
browser. It represents the online orders, user services, payment gateway, product database and
the ordering system database as components of the system. On another hand, the artefact is the
app used and nodes are the payment portal, device/browser, and the database servers connected
to the system. The browser and the device node is connected with the system node through a
TCP/IP protocol which enables the security parameters of the system. A backup database is also
connected to the main system node in order to tackle any events of system failure.

9SYSTEM ANALYSIS
Fi
gure 4: Deployment Diagram Thomson Cycle System
Source: created by author
Task 4 UI Design principles & User Interface Mock-up
The main aim of the UI design in software engineering is to design the interface simple,
easily ordered, editable and meaningful. The quality design illuminates the main aim of the
design. The important principles addressed by the developed UI design are mentioned and
discussed below:

10SYSTEM ANALYSIS
i. Clarity: The main aspects of a great UI design is the clarity of the understanding. In
order to obtain a better user interaction from the system, it should be clearly
understandable to the user. The UI design of the Thomson cycles has been kept simple
and clear.
ii. Consistency: The consistency in a UI design provides the information and focuses on the
process. The processes can be the solving problems, accessing controls or commands by
wasting no time. The developed UI is supposed to have the consistency as the access
control process are controlled by logging in the system and the response time set clear
and low in the developed scenario in the later sections of this paper.
iii. Friendliness: The term friendliness represents the UI as user friendly UI. It means that
the interface should be effective which allows a different set of activities for different
type of process and access. The UI is designed to warn and protect the user data even
after trying to access inaccessible actions which addresses to the friendliness of the
system.
iv. Interaction: It is the primary goal of a UI design which allows the user to interact with
the system as well as the business organization. This helps to match the real world
entities and problems through the system. The developed UI design fulfills the main of
the interaction and all possible way of interaction between the system, business
organization and the users.
v. Transparency: In terms of action, processes and user usability the transparency should
be present in the system. Here, the UI design of the Thomson cycle have all the processes
contained and represented using the design components such as buttons, textboxes, and
labels etc. along with the info graphics.

11SYSTEM ANALYSIS
vi. Visual hierarchy: The developed design maintains a perfect visual hierarchy by
following the modern day user interfaces. The hierarchy starts with the header section,
navigation bars, banner section, sorting and filter features separated by the product lists,
page navigations ad footer section which contains the contact details and information
about the company.
vii. Flow of information: The flow of information follows the hierarchy model which also
have been represented in the navigation diagram below. It follows a step-by-step
approach for example first sign up, then login, then search, then add to cart, then place
order.
viii. User control: By keeping the users of the system in control, the interaction between the
system and the humans can be improved. The design provides sight to the users by
providing a lot of featured and variety of controls.
ix. Appearance: The Appearance of any UI design affects the interaction and the frequency
of the surfing system on a regular basis by any user. The developed UI design addresses a
good appearing design as it contain all the basic necessary elements of the shapes, color,
fonts, font colors, font style, images of the products etc.
x. Invisibility: Here, the term invisibility refers to the structure and the framework of the
design used by any UI designer. In general it goes unnoticed by the normal user of the
system. It is said that a great device remains invisible to its users.

12SYSTEM ANALYSIS
Figure 5: User Interface Mock-up diagram
Source: created by author

13SYSTEM ANALYSIS
Task 5 UI Design process
Scenario
The scenarios mainly describes what will happen when a particular function is processed
and how the system will behave towards it in the system environment. Below, two scenarios of
Customer query operation and admin login operation has been developed for the Thomson cycle
system.
Use scenario: Existing user log in to the system
1. Customer inputs username & password in the system and clicks on Login.
2. The credential are matched by the database records by the system.
3. The Admin approves the authentication of user login.
4. The login status is changed and session is start.
5. The user is directed to the home page of the website.
Use scenario: Existing user places an order
1. Customer searches for the product in the search bar of the website.
2. The system queries from the database and display the product.
3. The product is added to the cart by selecting option “add to cart”.
4. User can add more products or proceed to place order.
5. User can go to the cart later anytime.
6. The order number is generated and placed.

14SYSTEM ANALYSIS
Navigation Diagram
The navigation diagram in UI design process shows how the user can navigate through
the system using user interface along with the direction of the navigation. The possible way of
going from one page to another page in the developed UI is shown below along with the UI
elements. The navigation starts from the home page and ends to the logout page in the user
interface. As per the directions no component details have been included in the diagram.

15SYSTEM ANALYSIS
Figure 6: Navigation Diagram
Source: created by author

16SYSTEM ANALYSIS
Define/apply the standards in UI design
The application of the standards in an UI design can be achievable by considering
guidelines and some rules of the UI design which are described below:
a. The UI should always be a combination of information and graphics.
b. For keeping the potential errors away from affecting the main functionalities of the
system the design should be included warning messages and backups.
c. Design should be flexible in terms of environment, users and the user interactions.
d. The design should be responsive to the users and the device also in which the user will
use the system.
e. Help and User guides in a design can provide the users an extra supporting hand to
understand and learn the functionalities of the system through the UI design.
Prototyping technique and interface evaluation technique
The prototyping technique is a test evaluation approach to identify the errors in the
system. The chosen prototyping technique is Walkthrough method. It develops the system design
along with the architecture, process, activity physical etc. with the help of Software tools. The
mockup design has been done using a mock-up design software tool Balsamiq. The developed
prototype is use in the system environments to check any errors and fix them by making any
updates or upgrades. The key feature of this method is that users involve in the evaluation of the
design. The errors in the design can also be detected and changed by prototyping. The interface
is evaluated in real life environment with the help of a group of possible users. Their feedback
then helps in making the upgrades. Video or Presentation walkthroughs are the standard usability
studies and analysis techniques of the walkthrough prototyping.

17SYSTEM ANALYSIS
Task 6 Usability and User experience Goals
Key requirements
The key requirements of the system in terms of usability and user experience goals
mainly focus of the input, processing and the output of the system. However, the main important
aspects of a good user interface can be Availability, learnability and Relevancy. Availability
means that the in order to have better user experiences the system should be available 24x7 for
its users. Second, learnability is that how fast and easily a user can learn to use the system
effectively and lastly the relevancy means that the information and the services present on the
system should be relevant to the users’ needs. If a user does not find any relevant information
using the system then it can be said that the user experience for the user is not good and the
system does not fulfill all the usability requirements of the users.

18SYSTEM ANALYSIS
Bibliography
Dunn, C. and Nel, L.D., 2017. Entity Relationship Diagram Mapping.
Maritan, D., 2015. Practical manual of quality function deployment (pp. 1-190). Switzerland:
Springer.
Ameller, D., 2014. Non-functional requirements as drivers of software architecture design.
Adams, K.M., 2015. Nonfunctional requirements in systems analysis and design (Vol. 28).
Cham, Switzerland: Springer.
Riascos, R., Levy, L., Stjepandić, J. and Fröhlich, A., 2015. Digital mock-up. In Concurrent
Engineering in the 21st Century (pp. 355-388). Springer, Cham.
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N. and Diakopoulos, N.,
2016. Designing the user interface: strategies for effective human-computer interaction. Pearson.
Wang, C.M. and Huang, C.H., 2015. A study of usability principles and interface design for
mobile e-books. Ergonomics, 58(8), pp.1253-1265.
Kiseleva, J., Williams, K., Jiang, J., Hassan Awadallah, A., Crook, A.C., Zitouni, I. and
Anastasakos, T., 2016, March. Understanding user satisfaction with intelligent assistants.
In Proceedings of the 2016 ACM on Conference on Human Information Interaction and
Retrieval (pp. 121-130). ACM.
Torabi, K., Farjood, E. and Hamedani, S., 2015. Rapid prototyping technologies and their
applications in prosthodontics, a review of literature. Journal of Dentistry, 16(1), p.1.

19SYSTEM ANALYSIS
Rusu, C., Rusu, V., Roncagliolo, S. and González, C., 2015. Usability and user experience: what
should we care about?. International Journal of Information Technologies and Systems
Approach (IJITSA), 8(2), pp.1-12.
Torre, D., Labiche, Y. and Genero, M., 2014, May. UML consistency rules: a systematic
mapping study. In Proceedings of the 18th International Conference on Evaluation and
Assessment in Software Engineering (p. 6). ACM.
Thongrak, M. and Vatanawood, W., 2014, July. Detection of design pattern in class diagram
using ontology. In 2014 International Computer Science and Engineering Conference
(ICSEC) (pp. 97-102). IEEE.
Mohammadi, R.G. and Barforoush, A.A., 2014, September. Enforcing component dependency in
UML deployment diagram for cloud applications. In 7'th International Symposium on
Telecommunications (IST'2014) (pp. 412-417). IEEE.
Dimbisoa, W.G., Mahatody, T. and Razafimandimby, J.P., 2017, September. Transformation of
the system sequence diagram to an interface navigation diagram. In RoCHI (pp. 147-154).