2017 4th International Conference on New Media Studies

Yogyakarta, Indonesia, November 08-10, 2017

UI/UX Analysis & Design For Mobile E-Commerce

Application Prototype on Gramedia.com
Marcelli Indriana, S.Kom., M.Sc. Muhammad Leyri Adzani, S.Kom.
Department of Information System, Faculty of Engineering Department of Information System, Faculty of Engineering
and Informatics and Informatics
Universitas Multimedia Nusantara Universitas Multimedia Nusantara
Tangerang, Indonesia Tangerang, Indonesia
marcelli@umn.ac.id leyriadzani@gmail.com

Abstract—Mobile-based e-commerce application has begun to prototype a mobile application for Gramedia.com in
gain its trend. Gramedia as one of leader bookstore in Indonesia accordance with their user's preferences.
plans to create a mobile app that is accessible to its customers.
The tendency of Gramedia’s customer that starts accessing II. THEORIES
Gramedia.com from their gadgets is one of the main reason. Task
Centered System Design (TCSD) is a method in building Human Task Centered System Design (TCSD)
Computer Interaction that is useful to identify task-requirements
Task Centered System Design is a method in developing
and user needs. This method has been used to build the
prototype. The prototype has met the requirements as the User Human Computer Interaction (HCI) is useful to identify the
Acceptance Test (UAT) shows that 80% acceptance whilst needs of the task and the needs of users [1]. Includes 4 stages,
another 20% is accepted with notice. The method of System i.e.
Usability Scale (SUS) performs a final score 80.9 showing that its 1. Identification. Identify the problem from the user. Aiming to
usability quality is high. discover what tasks or problem users, and then create the
task description.
Keywords—TCSD, prototype, mobile
2. User-Centered Requirement Analysis. Analyze the existing
I. INTRODUCTION problems as well as to decide whether the results of the
analysis will be included or excluded from the design.
E-commerce is a business transaction using the internet
network. Through e-commerce customer can shop or review 3. Design the U.S. Scenario. Determine the system design
products of the online store anytime and everywhere. It makes process and data required by the new system. Create a
the customer can do shopping easily without any distance and design in simulation.
time constraint. That's why mobile e-commerce app become a 4. Evaluate Walkthrough. Evaluate the final stages towards the
trend frequency. Lately fags here. Gramedia Bookstore known design of a system that is already made.
to the public the largest bookstore chain, the largest and most
comprehensive in Indonesia. There are now more than 100 User Interface
bookstores are scattered across the archipelago from Sumatra The user interface is a part of an information system that
to the Irian (Papua). The U.S. is one of the spearheads requires user interaction to make input and output. [2]
Kompas Gramedia Group, Gramedia bookstore has been
instrumental in the dissemination of knowledge for the people User Experience
of Indonesia. Nowadays, with the advancement of information
technology, Gramedia bookstore comes in the form of an User experience (UX) is about what a person's perceived
when he interacted with the system. The system in question can
Online Bookstore with URL: www.gramedia.com in response
be is a website, software, or applications and other computer
to the demands of modern society. Gramedia.com is
programs in the modern context is generally denoted by some
physically Gramedia bookstore's transformation into an online form of human-computer interaction. [3]
form with all the advantages of the completeness of the
product. Gramedia.com presence is the answer for people who
Usability
have difficulty accessing physical bookstores because: it was
no bookstore in town or are too busy to visit a physical Usability is a system that can work well when used to its
bookstore. These customers tend to access Gramedia.com full potential by the user, so all the capabilities of the system
could be beneficial to the maximum. [4]
from their gadgets. More than 40% of their customers
accessing Gramedia.com from their smartphone. Therefore,
Gramedia want to make a mobile application for their e-
commerce. In this research, we will analyze and design a

978-1-5090-6284-3/17/$31.00 ©2017 IEEE 170

System Usability Scale (SUS) Therefore, the Gramedia.com wanted to create mobile
Usability testing methods is a simple system with ten scales applications Gramedia.com to make it easier for its customers.
that give the view of the evaluation of the overall goal of As for the interview with e-commerce application users
usability. [5] SUS using Likert scale questionnaire to measure obtained a few habits that they did on that application such as
grade usability of the system. The results of the questionnaire login, read reviews, view the product catalog, and purchase
with a value between 0-100, where 100 being the best usability products.
indicators. After the known average score is then compared A detailed questionnaire distributed to the smartphone
with the range of values. [6] user to know how much they ever used e-commerce
application based mobile and also to find out how many
III. METHODOLOGIES people never access the website Gramedia.com. Total
respondents obtained as many as 380 responses with more
A. Research Object than 50% are women. More than 80% of the respondents
Toko Buku Gramedia (Gramedia Bookstore) is an answered never download and use mobile applications such as
Indonesian bookstore retailer owned by Kompas Gramedia. It e-commerce Lazada, Tokopedia, and others. 80% more
was established on 2 February 1970 with the beginning of a respondents also access the website Gramedia.com with the
small bookstore in West Jakarta. Now the bookstore has frequency 1-2 times in a month.
grown to more 100 stores across cities in Indonesia and
Malaysia, under the Gramedia brand. In addition to providing 2. User-Centered Requirement Analysis
books, Gramedia also offers a variety of other products, such From the results obtained in the first stage, next can be
as stationery, office supplies, and sports equipment. deduced some things be requirement of the Gramedia.com and
the users of applications like search feature for easier
B. Research Method searching of goods, product information and complete details,
The method used is the Task Center System Design product reviews from other customers, and also a great photo
(TCSD), a useful method to identify the needs of the task and quality.
the needs of the user. TCSD method includes 4 stages, i.e.
1. Identification 3. Design as Scenario
Identification of needs will be done from the design of At this stage created a storyboard to illustrate the
the user interface related Gramedia.com mobile activities usually carried out when you use/shop with e-
application from Gramedia.com. This stage is done commerce application based mobile as seen in Figure 1.
with the interview and also a detailed questionnaire.
2. User-Centered Requirement Analysis
At this stage will do the analysis related to the results
of the interviews and questionnaire about whatever be
the requirement of the users of the application and also
of the Gramedia itself.
3. Design as Scenario
This stage will be made in a draft of the design and
prototype of the user interface on mobile applications
Gramedia.com.
4. Walkthrough Evaluate
At this stage will be evaluated against the prototype
that was made with the use of UAT.

IV. ANALYSIS AND RESULT

1. Identification
Done with the interview and the dissemination of the
questionnaire. The interview was conducted to know what is
the reason and the needs of the Gramedia.com. In addition,
interviews were also conducted with users of mobile e-
commerce applications to know the habits of users of mobile
applications of e-commerce in accessing the application.
From interviews with the Gramedia, we known that users
who access Gramedia.com via desktop by the end of 2015 has
already started to diminish in comparison to early 2015.
Figure 1. Storyboard

171
 Storyboarding is organized based on the results of the application products provided are marked with the letter "E".
interviews to users of e-commerce application based mobile. It In the footer there is copyright, about us, contact us, and a link
also conducted a comparison of a few mobile applications that can be used by users to directly open the website from
such as e-commerce Lazada, Bukalapak, and Tokopedia which Gramedia.com.
become reference in designing the look of mobile applications
Gramedia.com shown in Figure 2. 4. Walkthrough Evaluate
User Acceptance Testing is performed on Wednesday, June
29, 2016 at the Office Gramedia.com by Mr. Iwan Dani and
team IT from Gramedia.com. From the results, UAT received
as much as 80%, 20% received notes and 0% were rejected.
The records are obtained as the button to make it look
consistent, the input number on the booking process we
recommend that you use the textbox so that customers could
order as much as they want, and store displays that are
available on the process pick up on store.
To find out how well the level of usability on
Gramedia.com mobile application prototypes from testing done
by the method of SUS.
1) Preparation of testing. Give a chance to the respondent
to try a prototype was made by giving a few scenarios that
they should run.
2) Scenario testing. Do scenario testing in order to find the
weaknesses of a prototype is created. The test scenario
consists of several tasks in the design of the prototype mobile
applications Gramedia.com.

Table 1. Login Scenario

THE LOGIN SCENARIO
1. Login can be done by registering in advance email
and password in the column list are available on the
menu.
2. Enter the email and password correctly on the
prototype. email is leyriadzani@mail.com and the
password is 12345
3. Login can be performed by means of Login with
Facebook or with Login with Google +
4. Login can be done at the moment wants to make a
purchase on the product book “Hujan” then users
who are not logged in will be redirected to login first
before making a booking.

Table 2. Purchase Scenario

PURCHASE SCENARIOS
1. Purchase can be made after login.
2. Select one of the product and pressing the buy button
to exit pop-up if the goods have entered into the
Figure 2. Homepage of mobile e-commerce application
shopping cart. The prototype of these products
prototype on Gramedia.com
contained in the shopping cart is the “Hujan” and
“Wing Chun”.
The letter "A" is the menu button is used to display the 3. Sign in to your shopping cart.
login form or register and also category available at 4. Enter the desired amount in the prototype. This time
Gramedia.com. The letter "B" indicates the function of the cart the desired amount paid is 1 (one) per product.
is useful to view the shopping list done by users. There is also 5. Select pick up on store.
a search function shown on the letter "C" to facilitate users 6. It will display the status of Gramedia store anywhere
find the products they want. Slide show shown on the letter which has a stock of books ordered. Select the order
"D" is useful to inform users about advertising or promo is to make the purchase. In this protoype select order on
ongoing at the Gramedia. The central part of the display shows

172
 TB. PLAZA BINTARO GRAMEDIA. Table 4. SUS Score
7. Choose a payment method for ATM Transfer
8. Detailed display of the purchase which is already
done. Do confirm payment to end the buying process.
9. Confirmation can also be done by opening a menu
cart and then open the menu status.

3) Testing. A detailed questionnaire was given to the

respondent after experimenting against prototype that was
made. There are the following standard statement 10 with 5
choices of answers which consists of strongly disagree,
disagree, agree, and strongly agree.

Table 3. SUS Statements

STATEMENTS

1. I think that I would like to use this system frequently.

From the value of SUS is obtained an average of 80.9 which
2. I found the system unnecessarily complex.
means the evaluator liked the prototype and will recommend to
3. I thought the system was easy to use. other users.
4. I think that I would need the support of a technical
person to be able to use this system. V. CONCLUSION
5. I found the various functions in this system were well The design of the prototype mobile applications Gramedia.com
made based on the results of the identification. Starting from
integrated.
interviews with the Gramedia and also interviews with some
6. I thought there was too much inconsistency in this users of mobile e-commerce applications, and of the results of
system. the questionnaire already distributed earlier. From the results of
the design that has been made can be concluded as follows:
7. I would imagine that most people would learn to use
this system very quickly. 1) with this method, the Task Centered System Design
8. I found the system very cumbersome to use. (TCSD) recognized the needs of the users of mobile e-
commerce application from the results of the identification
9. I felt very confident using the system. and analysis of the requirement.
10. I needed to learn a lot of things before I could get 2) User Acceptance Testing (UAT) given to the Gramedia
going with this system. get good response with the average value obtained is 80%
received, 20% received with the note, and 0% rejected.
4) The test results. Testing is done to SUS 25 evaluators 3) The User interface on the prototype has good usability
who've tried the prototype mobile applications Gramedia.com. for users with value SUS earned 80.9 while according to Jeff
the rule to calculates the value of the SUS is Sauro, the average value of the SUS is 68. Then it can be
1. For each of the odd numbered questions, subtract 1 inferred that usability has created prototype above average.
from the score
2. For each of the even numbered questions, subtract REFERENCES
their value from 5
3. Take these new values and add up the total score. [1] Lewis, C., & Reiman, J., Task-Centered User Interface Design,
Boulder:CO, 1993.
Then multiply this by 2.5.
[2] Satzinger, J.B., System Analysis and Design with the Unified Process,
The results shown in table 4. Green color indicates a positive USA: Course Technology, Cangage Learning, 2010.
response (excellent) with range value 85-100, yellow for [3] Gube, J., (2010, Oktober 5). What is User Experience Design?
neutral response (received) with the 65-84 value range, and Overview, Tools and Resources. Available:
red for a negative response (not acceptable) with range value http://www.smashingmagazine.com
0-64. [7] [4] Larasati, I., (2010, Juni). Kajian Web Usability MyHobbyTown.com,
Available: http://innel07.student.ipb.ac.id/page/2/
[5] Brooke, J., SUS – A Quick and dirty usability scale, 2007.
[6] Sauro, J., (2011, February 2), Measuring Usability with the System
Usability Scale (SUS), Available: http//:www.measuringu.com/sus.php.
[7] McLellan, M., & Peres, C., The Effect of Experience on System Usability
Scale Ratings, 2010.

173