**A Heuristic Evaluation of a Shariah-Compliant Fashion E-Commerce Prototype**

Nadia Abdul Wahab<sup>1\*</sup>, Syafiqa Amira binti Zulkifli<sup>2</sup>

<sup>1,2</sup>Faculty of Computer and Mathematical Sciences, Universiti Teknologi MARA Perlis, 02600 Perlis, Malaysia

Corresponding author: \*nadiawahab@perlis.uitm.edu.my

Received Date: \*date

Accepted Date: \*date

ABSTRACT

Every Muslim should wear shariah-compliant clothes as admonished in the Holy Quran and Hadith. Covering awrah is a command from Allah for all Muslims and they should obey this Islamic Shariah Law. This paper discusses the heuristic evaluation of a shariah-compliant fashion e-commerce prototype for Muslim women. The prototype aims to help Muslim women to find and purchase shariah-compliant clothes easily and furthermore allows more Muslim women to cover their awrah. Besides, the fashion e-commerce also has the capability in giving suggestion to the users based on their body shapes and size.The prototype was evaluated using heuristic evaluation technique with three software ergonomic experts. Although the evaluation indicates that the information provided is useful and the prototype is well-designed, it also revealed few design issues that should be refined in order to improve its usability before testing it on the real user.

***Keywords***: *Heuristic Evaluation,* *E-commerce, Shariah-Compliant Fashion*

# INTRODUCTION 

This research involves the design, development and evaluation of a shariah-complaint fashion e-commerce site for Muslim women in Malaysia. This site offers fashion products which are conform to shariah (Islamic system of life) requirements. In addition, Muslim women should also buy clothes that suit their body shapes and size. Suitable clothes will enhance their self-esteem and satisfaction (Kinley, 2010). It will also make Muslim women feel more comfortable as the clothes are complying with the Islamic Shariah Law.

Shariah-compliant clothes for Muslim women as mentioned in Qur’an al-Kareem is covering all the body parts excluding the face and both hands (Quran 24:31). Muslim women are also not allowed to wear the translucent or tight clothing. By wearing the shariah-compliant clothes, Muslim women can cover their awrah as this act symbolizes Muslim women’s dignity. While necessarily modest, Islamic clothing does not necessarily sacrifice the basic elements of **style**, **fashion**, **elegance** and **dignity** (Mulali, 2009).

Nowadays, many businesses and firms use e-commerce site to ensure an effective and reliable way of business processing (Rayport and Jaworski, 2001). E-commerce site is beneficial for a user’s as it helps to save time, allow easy access for purchasing through the application at any time, no matter where they were situated. One of the advantages of using the e-commerce is that companies can expand their market much easier as well as increasing their sales revenue. This platform can also help the company to gain feedback from customers much more easier and adapt to it which in turn will increase their customers’ loyalty and the image of the company and brand (Khan, 2016).

To date, there is no single fashion e-commerce site that sells clothes that are fully shariah-compliant in Malaysia. If Muslim women continue to buy the clothes at any non-shariah compliant fashion e-commerce site, they will wear the non-shariah compliant clothes and they are against the obligation of covering their awrah accordance to Islamic Law. Thus, the researcher developed a shariah-compliant fashion e-commerce for Muslim women with the intention to help Muslim women in choosing shariah-compliant clothing based on their body shape and size.

# DESIGN AND DEVELOPMENT

This research involves the design and development of a shariah-complaint fashion e-commerce platform for Muslim women in Malaysia. It offers a variety of fashion items which are conform to shariah (Islamic system of life) requirements. The products offered in this site are stylish, fashionable yet elegant. The e-commerce site also comes with a built-in body-shape type calculator which can give recommendation of products based on consumers’ body-shape type for example apple, pear and hour-glass. Beside that this e-commerce site also has the ability to give recommendation of size.

This shariah-compliant fashion e-commerce prototype is a web-based application. It was developed using PHP as the server-side scripting language and MySQL as the relational database management system for this prototype. PHP is one of the most popular web programming languages and currently running on more than 20 million Web servers (Doyle, 2010). This e-commerce site aims to help Muslim women to find and purchase shariah-compliant clothes easily and furthermore allows more Muslim women to cover their awrah. Besides, the fashion e-commerce also has the capability in giving suggestion to the users based on their body shapes and size. The main page of this prototype is shown in figure 1.

![](99-1-253-1-2-20181114_media/media/image1.png)

Figure 1: Main Page of the Prototype

Figure 2 shows the screenshot of the login page of this prototype. An authorized user has to enter valid email address and password in order to access the application.

![](99-1-253-1-2-20181114_media/media/image2.png)

Figure 2: The Login Page

The user registration form is shown in Figure 3. New users need to fill up the form and they can click on the video link to watch the tutorial on how to perform body measurement accurately. The users’ data will be saved in the database.

![](99-1-253-1-2-20181114_media/media/image3.png)

Figure 3: The Registration Page

Figure 4 shows the screenshot of the Product Suggestion Page. This page gives suggestion of clothes and size for an authorized user based on their body shape. This page also provides a few tips for the users on how to choose select clothes based on their body shape type. These tips will help the users to choose and purchase the proper clothes for themselves.

![](99-1-253-1-2-20181114_media/media/image4.png)

Figure 4: Product Suggestion Page

In addition, the users could view and update their details in *My Account* page. The updated body measurement will re-calculate to determine the user’s new body shape and size. All the updated data will also be saved in the database.

# HEURISTIC EVALUATION

According to Dix, Abowd, Beale and Finlay (2004), heuristic evaluation is a method for structuring the critique of a system using a set of common and general heuristics and it is useful for evaluating early design. This approach can also be used on prototypes, storyboards and fully functioning systems as it flexible and relatively cheap (Dix, Abowd, Bealeand Finlay, 2004).

In this study, heuristic evaluation was conducted with three lecturers from a public university in Malaysia. All of the three experts have more than ten years experience in the software ergonomics field. This evaluation was conducted to improve the flaw and weaknesses of the shariah-compliant fashion e-commerce prototype based on experts’ feedbacks and recommendations. All the feedbacks and recommendations given were taken into consideration and improvements have been made by the researcher to improve the website. This website has been evaluated based on visibility of system, navigation, user control and freedom, consistency and standards, aesthetic and minimalist design.

## Instrument and Procedure 

During the heuristic evaluation, the experts were asked to explore the e-commerce prototype. Then, they were requested to fill-up a usability heuristic evaluation checklist form. The form has 16 items under four sections which include (i) visibility of system status, (ii) navigation, user control and freedom, (iii) consistency and standards and (iv) aesthetic and minimalist design. In addition, the demographic questions such as name, qualification and experience are also included in the form. The experts were also requested to give comments and recommendations for each usability aspects to increase the effectiveness of the e-commerce site. Table 1 shows the frequency of responses from the heuristic evaluation.

Table 1: Frequency of Responses from the Heuristic Evaluations

<table>
<thead>
<tr class="header">
<th><strong><br />
Items</strong></th>
<th><strong>Frequency (n=3)</strong></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td></td>
<td><strong>Strongly Disagree</strong></td>
<td><strong>Disagree</strong></td>
<td><strong>Not sure</strong></td>
<td><strong>Agree</strong></td>
<td><strong>Strongly Agree</strong></td>
</tr>
<tr class="even">
<td>Visibility of System Status</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td>It is clear what information is available at the current location.</td>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td>1</td>
</tr>
<tr class="even">
<td>The current information matches what you expect to find.</td>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td>1</td>
</tr>
<tr class="odd">
<td>It is clear where you can go from the current location</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr class="even">
<td>It is always clear what is happening from each action you perform.</td>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td>1</td>
</tr>
<tr class="odd">
<td>Navigation, User Control and Freedom</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td>It is always easy to return to the home page.</td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>2</td>
</tr>
<tr class="odd">
<td>It is easy to access all major portions of the site from the home page.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
</tr>
<tr class="even">
<td>Graphic links are also available as text links.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
</tr>
<tr class="odd">
<td>It is easy to cancel or exit from operations</td>
<td></td>
<td></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="even">
<td>Consistency and Standards</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td>Standard menus are used throughout the application.</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr class="even">
<td>Standard buttons are used throughout the application.</td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>2</td>
</tr>
<tr class="odd">
<td>Standard fonts are used throughout the application.</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr class="even">
<td>Aesthetic and Minimalist Design</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td>The application structure is simple and clear without unnecessary complications.</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr class="even">
<td>There are no instances of extraneous information.</td>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td>1</td>
</tr>
<tr class="odd">
<td>There are no instances of misplaced information</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr class="even">
<td>Colour choices allow for easy readability.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
</tr>
<tr class="odd">
<td>The site is aesthetically pleasing.</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

The first usability aspects evaluated for the website is regarding the visibility of system. From the evaluation, it was found that all the experts agreed that this e-commerce site has clarity of information, the information provided match the user’s expectation, clarity of current location and clarity of each action performed. Thus, the visibility of shariah-compliant fashion e-commerce is clear and easy to use.

Next, the navigation, user control and freedom are the second aspect evaluated during the heuristic evaluation. From the evaluation, it was found that two experts agreed that it is easy to return to the homepage when they use the website. However, an expert was not sure about this statement and suggested that a navigation button to return to the previous page should be included in the website.

All of the experts strongly agreed that it was easy to access all major portions of the site from the home page and all graphic links are also available as text links. In term of easiness to cancel or exit from operation, two experts agreed with this statement while another expert opined that the website still contains error during add to cart process. This problem had been rectified and fixed later.

The third section for heuristic evaluation is about consistency and standard. From the evaluation, it was found that all experts agreed the used the standard menus and fonts throughout the website. Besides that, button used in this shariah-compliant fashion e-commerce is standard and approved by two experts. However, one of the experts was not sure and stated that the buttons in this website is not consistent. This inconsistency had been rectified and fixed later.

Lastly, the aesthetic and minimalist design is the final section in the usability heuristic evaluation. From the evaluation, all experts stated that this shariah-fashion e-commerce structure is simple and clear without unnecessary complications, there is no extraneous info and misplaced info. All the experts strongly agreed that this website has chosen a good color for easy readability. This e-commerce site also is aesthetically pleasing.

The further comments and recommendation from the experts during heuristic evaluations is shown in Table 2. Generally, all the experts gave good feedbacks on the design of this website. However, there were several design issues that should be rectified and fixed later. The comments and recommendations were taken into consideration in order to improve the flaws and weakness of this shariah-compliant fashion e-commerce site.

Table 2: Comments or Recommendations by Heuristic Evaluations

<table>
<thead>
<tr class="header">
<th><strong>Heuristic Evaluations</strong></th>
<th><strong>Comments or Recommendations</strong></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td><p>Lacking:</p>
<p>Some links are broken</p>
<p>Still consist error</p></td>
</tr>
<tr class="even">
<td></td>
<td><p>Comments/Recommendations:</p>
<p>Exclude the place of order process</p>
<p>Limit to suggest of suitable clothes</p>
<p>Prepare navigation button to return page</p></td>
</tr>
<tr class="odd">
<td>2</td>
<td><p>Lacking:</p>
<p>Functionality of add to cart</p></td>
</tr>
<tr class="even">
<td></td>
<td><p>Comments/Recommendations:</p>
<p>Well-designed website</p>
<p>Should emphasize on the cart by adding item and total price</p>
<p>Do check the email input</p></td>
</tr>
<tr class="odd">
<td>3</td>
<td><p>Lacking:</p>
<p>Not stated</p></td>
</tr>
<tr class="even">
<td></td>
<td><p>Comments/Recommendations:</p>
<p>If possible, registered users are allowed to review previous item that have bought.</p></td>
</tr>
</tbody>
</table>

The first expert discovered an error which occurred during the *Add to Cart* process. This is due to the shopping cart function that still has some problem to display the details of item added. Besides that, there were some broken links that need to be resolved. The navigation buttons such as back button or links should also be added to ease the user to go back to the previous page.

The second expert opined that this shariah-compliant fashion e-commerce is a well-designed prototype. However, the site still has flaw in term of shopping cart function. The expert also suggested that the prototype should display the receipt in a *pdf* form after the users click the checkout button. The users also should be able to check the total items purchased and the total price. It was also suggested that the prototype should verify the email address entered during registration process. Therefore, every time the users enter invalid email address; the site should be able to display the error message.

The third expert mentioned that this website design is neat and attractive. However, the cart needs to be functioned well in order to produce an effective fashion e-commerce site. The expert also suggested that the registered users should be allowed to review previous items that they have purchased.

All the comments and recommendation from the experts were taken into consideration in order to improve the effectiveness of the shariah-compliant e-commerce. The refinement and enhancement were made based on these recommendations to improve the e-commerce site.

# PROTOTYPE REFINEMENT

Figure 5 shows the refinement that was made for the email address input field of the system. Based on the recommendation from the experts, it was suggested that the input data for the email address field must be validated before being saved in the system. Therefore, the system will display error message when the user enters invalid email address. The user will not be able to proceed with the registration until valid email address is entered.

![](99-1-253-1-2-20181114_media/media/image5.png)

Figure 5: Validation of Email Address

Besides that, one of the experts recommended that the navigation button to return page should be included. The expert realized that the users need to use previous button in the web browser to go back to the previous page. Figure 6 shows the enhancement for previous navigation button in the video page.

![](99-1-253-1-2-20181114_media/media/image6.png)

Figure 6: Navigation Buttons on Video

Lastly, the researcher did some refinement on the *Add to Cart* process as this function was not working well during the heuristic evaluation. Eventually this function is able to display the items added in the shopping cart and the display the total price as shown in Figure 7

![](99-1-253-1-2-20181114_media/media/image7.png)

Figure 7: Order Details in Shopping Cart

# CONCLUSION

As a summary, this research was carried out with the purpose of designing and developing a shariah-compliant fashion e-commerce. The researcher had conducted a Heuristic Evaluation technique with three software ergonomics experts to evaluate the usability within the e-commerce site. The findings of the study indicate that the information provide is useful and the website is well-designed. In addition, the suggested size and clothes based on user’s body measurement is helpful the users to choose the suitable clothes based on their body shape. The evaluation also revealed few design issues that should be refined in order to improve its usability before testing it on the real users.

# REFERENCES 

Dix, A., Abowd, D.G., Beale R., Finlay J., (2004). *Human computer interaction*. Essex: Pearson Education Limited

Doyle, M. (2010). *Beginning php 5.3*. Indianapolis: Wiley Publishing, Inc. Retrived from  [*http://common.books24x7.com/toc.aspx?bookid=33838*](http://common.books24x7.com/toc.aspx?bookid=33838).

Khan, A. (2016). Electronic Commerce: A Study on Benefits and Challenges in an Emerging Economy. *Global Journal Of Management And Business Research, *. Retrieved from <https://journalofbusiness.org/index.php/GJMBR/article/view/1918>.

Kinley, T. (2010). The effect of clothing size on self-esteem and body image. *Journal of Family and Consumer Sciences* 38 (3), 317–332. Retrieved from https://onlinelibrary.wiley.com/doi/abs/10.1111/j.1552-3934.2009.00027

Mulali, A. (2009). *Hijab fashion and Islamic clothing: Hot and trendy*. Retrieved from http://www.ideamarketers.com

Rayport, J., Jaworski, B. (2001). *Introduction to E-commerce* (Int. edn.). Boston: McGraw-Hill/Irwin.