Perfectly Basics Premium Fashion Webshop - Doc

Perfectly Basics Premium fashion Webshop
Human factor in system design
Perfectly Basics Premium fashion Webshop website
Nicky
5-17-2018

Table of Contents
INTRODUCTION.......................................................................................................................................2
Perfectly Basics Premium fashion Webshop...............................................................................................2
Use Case......................................................................................................................................................3
Evaluation Methodology.............................................................................................................................5
Walkthrough 1.........................................................................................................................................5
Walkthrough 2.........................................................................................................................................6
Walkthrough 3.........................................................................................................................................6
Evaluation Results.......................................................................................................................................6
Walkthrough 1 Results............................................................................................................................6
Walkthrough 2 Results............................................................................................................................8
Walkthrough 3 Results............................................................................................................................9
Findings.....................................................................................................................................................11
Recommendations.....................................................................................................................................12
Conclusions...............................................................................................................................................12
References.................................................................................................................................................13
Appendix a Questionnaires........................................................................................................................15
Figure 1 Use case diagram...........................................................................................................................4
Figure 2 Homepage of Perfectly Basics Premium fashion Webshop...........................................................8
Figure 3 register page..................................................................................................................................8
Figure 4 Login page.....................................................................................................................................9
Figure 5 Shopping cart..............................................................................................................................10
Figure 6 choosing the payment methods....................................................................................................11
Figure 7 table showing the overall results of the usability features with a rating of 5...............................12
Figure 8 graph...........................................................................................................................................12

INTRODUCTION
Human factor in the design of the system, the development and testing is a very vital topic that
will need to be addressed with a lot of care and much more to convince the others in all ways.
The idea behind understanding the factors is that we will be able to raise questions to the
designers of such system and websites that the designer himself can answer to us. The focus here
is based on the process of the design. Special effort has been made to depict human factors
design as it actually occurs.
Perfectly Basics Premium fashion Webshop
Perfectly Basics Premium fashion Webshop is an online shop that is used for selling new brands
of clothes, fashions, shoes and beauty. It is one of the leading and most used sites for selling
fashions for both genders that is the male and female. Some of the fast selling products in
Perfectly Basics Premium fashion Webshop are such as the belts, skirts, scarves, sweaters and t-
shirts, soft sport, dresses, gloves, beachwear, cardigans, pants, backpack, bags, anine Bing, clean
reserve, suncare, make-up and the Coola organic suncare.
The idea behind this will be to bring the products close to the targeted audience in a manner that
they can access it in all manners. In reaching the targeted market and boosting sales Perfectly
Basics Premium fashion Webshop has to have a good website that has a suitable and quality look
and feel for the users. Perfectly Basics Premium fashion Webshop users will need to access the
website when they are on their laptops and smartphones as far as they are online and have some
internets.
Customers in this case can view the products before they purchase or add anything to the
shopping cart. For to completely purchase a product one must sign in for the first time if one
does not have an account making them easy to make payment and have account details with the
specific system. After one registers in the website then they can now login in to the system where
they view the products and if they are pleased they might go ahead by selecting such products if
they meet their requirements. The selected products are added on the shopping cart where the
total prices are indicated and this one we can now make an order and pay with the given methods
of payment depending on what the user is comfortable with. Perfectly Basics Premium fashion
Webshop in this concept will be acting as a link between the companies or manufacturers
delivering and suppling them with goods and the consumers who purchases goods online and
uses them.
Perfectly Basics Premium fashion Webshop is like any other website whereby we consider the
both ends where the first end is the front end which the customer uses while registering, making
an order and viewing the details of the product and his or her account details. The other end is
the back end where the administrator of the website uses it to manage the products in stock and
that need to be viewed by the customers, receiving the orders made by the purchasers and
keeping records and tracks of users accounts details.

We have to do an analysis on the usability test of the features of Perfectly Basics Premium
fashion Webshop to see how people behave and feel when they are interacting with the website.
Sales can be boosted in Perfectly Basics Premium fashion Webshop as when customers views
the products the company will keep records of the number of times a specific product has been
viewed. We will need to the testing of the usability features based on the following areas as
outlined here below.
Visibility of Perfectly Basics Premium fashion Webshop
Clarity of the website
How effective it is when interacting with Perfectly Basics Premium fashion Webshop?
Does Perfectly Basics Premium fashion Webshop respond fast when interacting with it?
The look and feel of Perfectly Basics Premium fashion Webshop website.
How easy it is when navigating across the website of Perfectly Basics Premium fashion
Webshop
After the above has been observed with reference to the selected individuals to interact with the
system then we will have to have a questionnaire to be filled. The process to be followed in
doing this research will be as outlined here below.
1. Perform and explain the use case diagram of Perfectly Basics Premium fashion Webshop
2. Do an evaluation methodology based on the selected participants
3. The evaluation results of the selected company that is based on the usability features
highlighted above
4. Findings of the evaluation
5. Recommendations to be made to Perfectly Basics Premium fashion Webshop
6. Conclusion.
Use Case
In this concept we have to come up with a use case diagram for Perfectly Basics Premium
fashion Webshop. A use case diagram is a graphic depiction of all elements we interacts with
in a system. Simply a methodology that is used to analyse the system by identifying,
clarifying and organizing the requirements of the system (Rouse, 2017). Use of a use case
diagram helps us in explaining the look and feel of the company. The following is the use
case diagram of Perfectly Basics Premium fashion Webshop.

Figure 1 Use case diagram
Perfectly Basics Premium fashion Webshop is a website that has been known for bringing
products close to the users even when they are far away from the normal shops. Perfectly Basics
Premium fashion Webshop offers provision of variety of products from all types of clothing
making it to one of the best wholesalers in the world. As seen from the above use case diagram
the two ends explains in detail what the website entails. From above we see that on the back end
the admin has the privileges of login in to the system, add categories to the website, also add
items to specifics categories, manage items and at the same item manage orders. On the other
hand the user can do the registration then login to the system there afterwards start viewing
items, make orders and make payments to finalize the purchase of such goods.
Immediately the user logins in to the system then he has the rights over his end in manipulating
his details with the approval of the admin. The methods of payment to be used in Perfectly
Basics Premium fashion Webshop are as outlined below.
Ideal
PayPal
MasterCard
Visa
Bancontact
GiroPay
Sofort banking
Bank Transfer
When making the order on can use any of the above mentioned payment modes. As seen from
above in the use case diagram it is how we simply interact with the system of Perfectly Basics
Premium fashion Webshop when making a successful purchase of a product.

When we consider each and every use case in the use case diagram we can be able to understand
how we may interact with Perfectly Basics Premium fashion Webshop website and much how
easy it is when we are navigating across all the webpages. When performing such test then we
will look require to have some more time but in this case we take it be approximately 20 minutes
and for the availability and reliability of the participants to be used when doing the analysis we
will consider the most significant features. In achieving this it is good to put in mind what we
intend to achieve at the end of this research.
1. Create and login to the system
2. View products and add to the shopping cart
3. Make an order after payment.
Evaluation Methodology
In this case we are to follow some methodology for evaluation of the usability features to help
the customers chosen to participate in the usage of Perfectly Basics Premium fashion Webshop
website where we have to do an analysis of the functionalities and the additional features for the
proposed Webshop. When walking through this evaluation a total of about 5 customers were
chosen to stand in for all the other targets who were to do three tasks as explained in the
guideline above. Each and every participant 20 minutes to walkthrough in the above three major
tasks and 10 minutes for filling the questionnaire. The below walkthroughs explains what each
and every of the five customers was supposed to would have done. There are three walkthroughs
to be performed by each and every customer where the researcher job will be observing what and
how the customers are interacting Perfectly Basics Premium fashion Webshop in all ways. The
three walkthroughs are creation and the login to the system, viewing the product and adding
them to the shopping cart and lastly is making an order using the payments methods provided by
Perfectly Basics Premium fashion Webshop to complete the transactions.
Walkthrough 1
The first impression dictates how the user will perfume the rest of the work in the website. The
look and feel of the website when we visit the homepage of Perfectly Basics Premium fashion
Webshop for the first time will clearly give us an outline all what we expect to have in the rest of
the tasks. In this case we have to look the website closely and identify the creation account or
login icons so that the customer can create an account with Perfectly Basics Premium fashion
Webshop. The situation here was to fill all the personal details including the user email and the
password where after completion of such creation a link is sent the used email. When we click on
the link already sent it takes us to the login page and we use the info that we used when creating
the account and immediately we login then we will have the full access of the front end of the
website.

Walkthrough 2
The idea behind this walkthrough is to view through different products as provided by Perfectly
Basics Premium fashion Webshop. When navigating across products we test the visibility and
clarity of the content as provided Perfectly Basics Premium fashion Webshop. Customers were
to select the products of their choice and add the selected products to the shopping cart so that
they could know the exact amount of money they are supposed to pay for the selected order and
the shipping amount.
Walkthrough 3
This is the last task where all the customers were supposed to make payment of the order that
they had placed using the methods given. The two methods that were widely were the use of
PayPal and MasterCard. It is good to understand that a purchase is said to be successful when we
make payments and receive a notification that the payment has been received and that the order
will be delivered to the purchaser within the specified time.
The tasks above are easy to perform for all the customers selected. The reason to as why we
performed the major three tasks was to observe how the users do usually interacts with the
system and this will help us in performing a usability test on the features of website. When we
apply the three walkthroughs we can be able to evaluate and analyse the way a user navigate
across the webpages within the given time. After performing all the three tasks we are needed to
fill the questionnaires which we are act as written evident giving more support to the
observations made by the researcher. The main reason behind this study in both use of
observation and questionnaire as the primary ways of data collections will help us in helping the
designers to improve such websites where they will improve on the quality of the look and feel
of such website. The methodology looked upon is how effective the system it is to the user, the
response time when interacting with the website, how easy or difficult it is to navigate across the
website and the visibility and clarity of the content in the entire website.
When we are interacting with the system it is needed for us to know that we can only understand
its easiness in when using such websites. The questionnaire used the structure of both open and
closed to avoid limiting the answers of the users with regards to what they had experienced in the
interaction with the website.
Evaluation Results
In this case there results of the evaluation is on the basis of the observation and the
questionnaires filled by the participants. This part explains what we encountered when
interacting with the system and the answers given in the questionnaires. The following is the
results of the evaluations of the three tasks as completed by the five users.
Walkthrough 1 Results
The idea here was checking if the user is able to interact with the system. This was done through
checking if the user could understand where the icons, buttons and labels are located. Many were
able to perform this task without any problem making it easy for them to create an account with
Perfectly Basics Premium fashion Webshop and login to the Webshop. No one needed help
when creating the account. It was only one person who requested to be shown if he was to use

the details he used when creating the account when he was logging in to the website for the first
time, though he was able to login after the explanation which was normal for a first timer. The
screenshot below shows the home page of Perfectly Basics Premium fashion Webshop.
Figure 2 Homepage of Perfectly Basics Premium fashion Webshop

Figure 3 register page
In this page the user is supposed to fill all the required fields like the first name, second name,
country, address, city, the email address and the password. After you done a link will be sent to
the used email above which one is supposed to click to take you to the login page as shown
below.
Figure 4 Login page
Here we will use the email address we used when creating the account and the password sent
over the email.
Walkthrough 2 Results
The understanding and experience in task one made task two very easy for the customers as
viewing the products and adding at least five items in more than one category seemed very easy
for all of them. In making this easy all the five customers were able to navigate across the
webpages by selecting their desirable products one by one and adding them to the shopping cart
without any problems or help as shown below.

Figure 5 Shopping cart
Walkthrough 3 Results
The last task was to perform an operation indicating if the user selected can make payment using
the payment options and the order becomes successfully purchased. Of all of them four did it
without problems and the one who did not complete was because he did not have any option in
the payment modes provided. The use of PayPal and MasterCard is as shown below in the
screenshots below here.

Figure 6 choosing the payment methods
In the five questionnaires the answering of the 6 questions clearly shown that the users were
able to navigate across all the webpages very easily without problems or in need of a lot of help
from the researcher. The reason to say that was because everything was very clear and visible to
them from task one to three. The look and feel of the design of the website physically was very
pleasing and convincing to the eyes of the users or participants. The conclusion based the on
interaction was that 4 out of the 5 were very good in interacting with the system and that they did
all the task successfully without any problem.

Findings
As seen from the recordings on the observations we can say about 87 percent of the users who
interacted with the system are always satisfied with the way Perfectly Basics Premium fashion
Webshop is. 13 percentage needed some little help but which was very minimal when interacting
with the system. In explaining this we can outline the following recordings.
Usability
Features
Creating an account
and Login to the
System
Selecting items and Adding them
to the shopping cart
Make an order after
paying
Consistency 5 5 5
Responsiveness 5 5 5
Functionalities 5 5 4
Effectiveness 5 5 5
Navigating Ease 5 5 4
Visibility and
clarity
4 4 4
Figure 7 table showing the overall results of the usability features with a rating of 5
The table above shows the rating of the above usability features based on the three walkthroughs
which majored on the consistency, how responsive it was, functionalities and how visible and
easy it is to navigate through all the webpages of Perfectly Basics Premium fashion Webshop.
The chart below explains the above results graphically.
Consistency
Functionalities
Navigating Ease
0 2 4 6 8 10 12 14 16
Graph for overall results
Creating an account and Login to the System
Selecting items and Adding them to the shopping cart
Make an order after paying
Figure 8 graph

Recommendations
From the observations and the answers from the questionnaires we understand that the following
areas will need to be updated for the look and feel of Perfectly Basics Premium fashion Webshop
to be of good quality that is satisfying to the eyes of the users or viewers. The recommendation
are as follows.
1. We have realized on the homepage the is much use of contextual content that is so boring
to the viewer so I would recommend the use of GUI where we will have to apply the use
of icons and images in making this appealing and convincing to the eyes of the viewer.
2. Lastly will be use color and pictures that reflect what the website entails. The structure of
the website logo should match the background color of the website.
Conclusions
In the above task we needed to identify the use case of Perfectly Basics Premium fashion
Webshop , do an evaluation methodology based on the usability features, analyzing the results
that were observed and recorder by the researcher and to give recommendations to Perfectly
Basics Premium fashion Webshop based on the results. The features were testing were the
overall performance of the Perfectly Basics Premium fashion Webshop functionalities, how easy
it is to navigate across webpages from the registration webpage to making an order, the content
visibility and clarity and much more the response and effectiveness of the website. As seen from
the graph it will be easy and very true to say that Perfectly Basics Premium fashion Webshop
website is satisfying and appealing and if the given recommendations will be applied then this
will be the best online clothes and fashions websites.
References

APCRC, 2017. Evaluation methodology. [Online]
Available at: http://www.apcrc.nhs.uk/evaluation/methodology.htm
[Accessed 12 May 2018].
ATSDR, 2016. principles of community Engagement, 3(1), pp. 12-17.
Department, U., 2018. improving the user experience, Newyork: usabilitygov.
ExperienceUX, 2018. What is usability testing?. [Online]
Available at: https://www.experienceux.co.uk/faqs/what-is-usability-testing/
[Accessed 10 May 2018].
Explorable, 2017. Surveys and Questionnaires - Guide. [Online]
Available at: https://explorable.com/surveys-and-questionnaires
[Accessed 12 May 2018].
Garyperlman, 2018. USE Questionnaire: Usefulness, Satisfaction, and Ease of use. [Online]
Available at: http://garyperlman.com/quest/quest.cgi?form=USE
[Accessed 12 May 2018].
istqbexamcertification.com, 2012. What is Usability testing in software and it’s benefits to end user?.
[Online]
Available at: http://istqbexamcertification.com/what-is-usability-testing-in-software-and-its-benifits-to-
end-user/
[Accessed 05 May 2018].
Jakob, N., 1999. 10 Usability Heuristics for User Interface Design, Newyork: Nielsen Norman group.
JannaDupree, 2014. Help us improve the experience:. Looking for usability testing participants, 12(17),
pp. 47-62.
JannaDupree, 2014. Help us improve the experience: Looking for usability testing participants, LA:
communitica.
Johnson, C., 2018. HCI and Sofwares Life Cycle. Interactive Systems Design, 7(1), pp. 72-75.
juben, m., 2013. heuruistic evaluation for the graphica user interfaces. usability huristics, 3(1), pp. 2-7.
Jumia, 2018. Jumia. [Online]
Available at: https://www.jumia.co.ke/?creation=07-04-2014-
DL2&gclid=CjwKCAjwlcXXBRBhEiwApfHGTWOSLBzlRz_5-H6nak3N8FWNTpeNX_Np5DUI7jDRcdu-
0KBAUOeNHBoCtaEQAvD_BwE
[Accessed 08 may 2018].
Lucidchart, 2017. UML Use Case Diagram Tutorial , cadiff: LucidChart.
meich, s., 2017. knowledge capitalization. Evaluation of the Website, 3(2), pp. 27-78.
Microsoft, 2000. UI Guidelines vs. Usability Testing. [Online]
Available at: https://msdn.microsoft.com/en-us/library/ms997578.aspx
[Accessed 05 may 2018].

Microsoft, 2010. Configure additional features for the Search Core Results Web Part (. FAST Search
Server 2010 for SharePoint, 34(47), pp. 34-60.
Microsoft, 2015. Configure properties of the Search Results Web Part. Configure properties of the Search
Results Web Part in SharePoint Server, 34(17), pp. 12-18.
NIELSEN, j., 2013. 10 Usability Heuristics for User Interface Design. The most comprehensive collection of
Design Principles on the Internet., 7(3), pp. 78-90.
nielsen, j., 2015. Usability 101: Introduction to Usability. [Online]
Available at: https://www.nngroup.com/articles/usability-101-introduction-to-usability/
[Accessed 05 May 2018].
Nielsen, N., 2015. Website Usability. Creating User-Centric Designs, 09(12), pp. 54-63.
niloda, 2014. step by step guide in doin evaluation in usability. heuristic evaluation, 6(7), pp. 56-82.
point, t., 2018. Interactive System Design. [Online]
Available at:
https://www.tutorialspoint.com/human_computer_interface/interactive_system_design.htm
[Accessed 10 May 2018].
Rouse, M., 2017. use case , 4(1), pp. 12-17.
Rouse, M., 2017. use case diagram (UML use case diagram). [Online]
Available at: https://whatis.techtarget.com/definition/use-case-diagram
[Accessed 18 May 2018].
ufl, 2018. Degree in Research and Evaluation Methodology. [Online]
Available at: https://education.ufl.edu/research-evaluation-methods/
[Accessed 12 May 2018].
UserLytics, 2017. Remote Usability Testing Blog. Remote User Testing Insights, 4(17), pp. 12-14.
www.jumia.co.ke, 2018. Jumia Express. [Online]
Available at: https://www.jumia.co.ke/
[Accessed 08 May 2018].
www.nngroup.com, 2014. Turn User Goals into Task Scenarios for Usability Testing. [Online]
Available at: https://www.nngroup.com/articles/task-scenarios-usability-testing/
[Accessed 05 May 2018].
Yitmen, K., 2013. Usability Testing: Personas, Scenarios, Use Cases, and Test Cases. starcanada,
UXservices.
Appendix a Questionnaires
Perfectly Basics Premium fashion Webshop
Name- --------------------------------
Job title --------------------------
Department -----------------------------------------