Project 4 - Presentation


Project 4 - Paper prototyping.


Briefing notes.


We explain to user about the system by using the card. we explain overall the process on the system with simple's explanation. The task is like below process :

 Hi, We’re the ShopOn team and we’re working on a website that lets you quickly shopping cloths online. You can even make a  ShopOn account and save your frequent routes to get you in and out even faster.
This study is to learn about what does and does not work with our current design. Your name will not be published. This study is for a project in Dr. Mashita Ghazali Lecture of Human-Computer Interaction course at University Technology Malaysia. Your participation in this study is completely voluntary and you may stop at any time and request that your data be omitted from the study. We value your time and only ask for about 20 minutes. At the end, we will compensate you with some candy.

As I was saying before, ShopOn is a website that allows you to shopping online. The purpose of today’s session is to help us develop the website’s interface. Before you test the site, you should know that we have not implemented the site digitally. Today you will be interacting with a paper prototype with your fingers and a pen. 

 We’ll be giving you some tasks to complete on the site that we think are representative of the tasks people will do on the ShopOn site. We may ask you to do thinks like search for a product or add to cart. All we ask of you is to let us know when you’re confused or think something isn’t clear.

Task 1 : Product categories and search item.

We briefing to user what the product categories in the system by 'Product categories' and then will 'Search item'.


We have briefing to user about the search item on the system.


Task 2 : Information of products.
We briefing to user the process after they click the picture, the choice of user from task 1.


Task 3 : Add to cart.
We briefing to user about 'How add to cart'. The button from task 2

Task 4 : Cart information.
We briefing to user about the information of product at form cart. The view is after task 3.

Task 5 : Check out.
We briefing to user about the process after they confirm about the chosen product on task 4.

Task 6 : Billing details.
We briefing to user about after click check out on task 5 the system go thru the 'Billing details'
user must key in all the information, especially email and password because this 2 information will help user to login again for the next time shopping online by this system. Then user must click button 'PLACE ORDER'.

Task 7 : Thank you.
We briefing to user about process after done the place order, The system will provide the receipt of buy and give the thank you.

Task 8 : Login
We briefing to user about the button login in system, they can use login after get the username and password by email. The process of username and password on the task 6.



Task 9 : Login information.

We briefing to user the process of the login, this process success after user finish on task 6.



Pictures of the paper prototypes for tested task number 1

Task 1 : Product categories and search item.








Task 6 : Billing details.



 Video on User 1 testing task number 2. 
Video on User 2 testing task number 2.

Description of observations and summary of result interviews.

Observation.


Before observation, we give the little briefing to the users, and we give the sample of system using the cardboard. We given word 'come and test our's system' to users. Then the users like to try the system. 

Firstly we give user am example system using the cardboard. All users wonder about the card. Then we explain the card one by one and hope the users can understand. 

Lastly, after users have explanation, we suggest users to try the systems. Users try one by one and follow the cardboard from first until last process, after completed the process users still want to try the system. Users is very happy on our system. they say it is very interesting. We believe that users are very happy with our systems. Users still have suggestion to our teams.

Summary.

Firstly observation, we find the user has not have the experience for this new system and we hard work explain to user for first using, this on the briefing by cardboard. After the briefing by card, we give user to trying the system.

Secondly On the system, we find users have the knowledge to find the process on task by cardboard explained by group members. User have trying all the process they see on cardboard, all process they did successfully.

Lastly, we find new suggestion from user. The user 1 have proposed more details on shipping information at task 6, The user 2 suggest to provide the confirm and cancel button on the task 6.  

The conclusion, user like use the system. very easy to users to use the system, the system interface also very attractive to user compared by the previous system. the result of interviews is successfully.


Usability problems discovered from the testing, and possible solutions.


1. Detail information of shipping - we will update on the system.
2. Button confirm and cancel at Billing detail. - we will update on the system.
Read More

Projet 4_1 - PROTOTYPE

PROTOTYPE













BRIEFING

Hi, we’re the SHOPON team and we’re working on a website that lets you shopping online. You can find the best quality and beautiful clothing.

INFORMED CONSENT

This study is to learn about what does and does not work with our current design. Your name will not be published. This study is for a project Human-Computer Interaction course at UTMSpace. Your participation in this study is completely voluntary and you may stop at any time and request that your data be omitted from the study. We value your time and only ask for about 20 minutes. At the end, we will compensate you with some candy.

We’re testing the interface here; so like I said, let us know if you get stuck or have any feedback regarding the site. We still have some rough edges so we’d like some feedback from you before we move towards the final design.

SCENARIO TASKS

·         Create account, login account.
·         Search item.
·         Select quantity and add to cart.
·         View the cart and checkout.

DEMOGRAPHICS

College students, thrifty, age 20 – 35.


OBSERVATIONS
- see on Project 4_2
Read More

Project 3 - StoryBoard


1. Home page.

Simple, minimalist and easy get the information.

Images Slider can let the customer easy to know what products this website selling.


2. Navigation bar.








Static on top of the screen of each page, user can easy back to home page by clicking Logo and get the cart information from the right side


3. Weekly featured products.











Customer can easy to know the weekly featured products with this minimalist layout.

4. Browse our categories

On this Layout, customer can choose the products by categories.





5. Product list.



Highlight the top rated products, on-sale products and featured product to customer.
--------------------------------------------------------------------------------------------------------------------------

Storyboard



Task 1: Login




















 Picture 1

User enters the username and password to login.
User can click "Lost your password" to reset password.


Task 2: Add to cart





Picture 2

User select quantity and add to cart.



















 Picture 3

User can view cart and checkout.



Picture 4

User fill in the information and place order.



Task 3: Search






Picture 5

Input the item and search.



Task 4: Share information







Picture 6

User can easy to share item to social network.


--------------------------------------------------------------------------------------------------------------------------

METAPHORS


Task 1: Login

> User enters the username and password to login.
> User can click "Lost your password" to reset password.

Task 2: Add to cart

> User select quantity and add to cart.
> User can view cart and checkout.
> User fill in the information and place order.

Task 3: Search

> Input the item and search.

Task 4: Share information

> User can easy to share item to social network.
Read More

Project 2_3 : Task Analysis & User Profiles.

HTA for task 1 - Serve the web/app clothing online shopping


Link :

video 1 : Interface view have a lot of empty space.

video 2 : Option button for request not available.

video 3 : Link direct to bank but not related with the previous step.video 

video 4 : Difficult searchingvideo 

video 5 : Booking process not functionvideo 

video 6 : Difficult for do the payment.



HTA for task 1 - Choosing product to buy.User 1 search the product.

Textual.


0. To shopping clothing outline.
1. Serve the web/app clothing online shopping.
2. Choosing product to buy
2.1.Access catalog information.
2.1.1.      Information of brand.
2.1.2.      Information of sizes.
2.1.3.      Information category.
2.2.Access search screen.
2.3.Identify required product.

Diagram.




























HTA for task 2 - task 5 - Confirm to buy, add to cart. User 2 search the product. 

0.      To shopping clothing outline 
1.      Serve the web/app clothing online shopping. 
2.      Choosing product to buy
2.1.Access catalog information.
2.1.1.      Information of brand. (refer task 1)
2.1.2.      Information of sizes. (refer task 1)
2.1.3.      Information category. (refer task 1)
2.2.Access search screen.
2.3.Identify required product.

2.4.Add to cart product to buy.


Diagram.



















HTA for task 3 - task 5 - Confirm to buy, update information of customer, confirmation for payment and confirmation and checkout. 
User 3  search the product.

0.      To shopping clothing outline
1.      Serve the web/app clothing online shopping.
2.      Choosing product to buy
2.1.Access catalogue information.
2.2.Access search screen.
2.3.Identify required product.
2.4.Add to cart product to buy.
3.      Confirm to buy.
4.      Update information of customer.
4.1.Name.
4.2.Address.
5.      Confirmation for payment.
5.1.Credit.
5.2.Cash of delivery.

5.3.Debit.


Diagram.
Read More

Project 2_2 : Persona and Scenario

Persona

Ajai is 35 years old and works as a Team leader in IT at Al-ikhsan Sport sdn bhd. He is an engineer in management information system and has over 10 years experience in field of analysis. He often uses a computer. He wants the software that comes with the business intelligent devices to give his result accurate, fast and in good format.
Ajai has a positive attitude in terms of technology as he has experienced it as a great support. He is confident using a computer even though he not an expert. Everyday Ajai is a busy person and not enough time for go to shopping. He can’t to queue for long time to shopping.  He likes to shop online.

Picture Ajai :




Ain is 26 years old and works is helpdesk service request at Al-ikhsan sport sdn bhd. She is beautiful and leader for helpdesk issue and has over 3 years. Many of the staff ask ain for advice when they meet up in the problem. Ain likes sharing his knowledge with the teams, as part of team, his feel a valued part of the team.

Ain has seen many changes over the years with the company and has tried his best to move with the times. However she like go to shopping but she not enough time for go to shopping. She likes to shop online.
Picture Ain :


Sazali is 32 years old and works as a Technician in IT at Al-ikhsan Sport sdn bhd. He is an expert in technical support and has over 5 years experience in field of technical. He often uses a computer. He wants the hardware that comes with the software to give his result accurate, fast and in good format.
Sazali has a positive attitude in terms of technology as he has experienced it as a great technical support. He is confident using a computer even though he not an expert. Sometime his travel for outstation to entire peninsular Malaysia, everyday Sazali is a busy person and not enough time for go to shopping. He can’t to queue for long time to shopping.  He likes to shop online.

Picture Sazali :
--------------------------------------------------------------------------------------------------------------------------

 SCENARIO


Consumer – Searching & confirmation:

Teacher Ayu working hours from 7.30am till 6pm. Every day she has to check with office for any task for his that day. She knows that other staffs are busy with their work. She decides not to bother them. She uses laptop at the office to check his task and time table. Once she login into the system, she go to the task section and choose the inbox. There are 2 tasks in the list. She checks one by one the task and verifies how to do the task.  Headmaster will notify via SMS & apps notification. She has to logout for made sure nobody can use his profile for the reason of bad using. After completed the tasks, teacher Ayu open the mobile apps for using the shop online apps. She not enough time for go shopping. She search the product then she confirm to buy and she pay by payment online. The system accepts the request and the transaction ends.

Athlete: searching & confirm for payment.


Awi is an athlete. Everyday Awi has to gym for training himself. He doesn’t have enough time for shopping and he running late. He serves to shop online and he searching the product to buy. He specifies that he wants buy the casual clothes.  He choose product like he want with the size. Then he confirms to buy and confirm for payment. The system accepts the request and the transaction ends.
Read More

Project 2 : Task Analysis - HTA and Textual Representation.

Task Analysis

Hierarchical task analysis of shopping clothing online. 












Textual 


0. To shopping clothing outline.
1. Serve the web/app clothing online shopping.
2. Choosing product to buy
2.1.Access catalogue information.
2.1.1.      Information of brand.
2.1.2.      Information of sizes.
2.1.3.      Information category.
2.2.Access search screen.
2.3.Identify required product.
2.4.Add to cart product to buy.
3. Confirm to buy.
4. Update information of customer.
4.1.Name.
4.2.Address.
5. Confirmation for payment
5.1.Credit.
5.2.Cash of delivery.
5.3.Debit.

Plan 0:do 1,2,3,5
          when payment proceed for buying, do 4.
Plan 2:do 2.1,2.2,2.3,2.4 in any order depending on choosing, do 2.1.1,2.1.2,2.1.3 on needed.
Read More

Project 1 : Project Proposal

Project: Clothing online shop


Problem


Malaysia is becoming rich country. This is become everybody's will go busy for working and activity for achieves the target. The lifestyle each person will change. Some of the people not have time to visit mall or outlet with families or personally for the shopping. The management of mall and outlet have worked hard for call the consumer to come they shop. Like they use the happy hour time, sandwich board, mascot, playground and package purchase with purchase. But some consumer still not interested for go shopping. For the comfortable solution, for help the consumer, management of mall or outlet looking forward for online services to consumer. But because of they not enough of information technology knowledge, they have problem for online shopping web. Generally, existing shopping online is not consumer user friendly, inefficiency and not helps the consumer for shopping online. Many people find it hard to keep track of the different product at shops, problem on cart the items, finding the items, harder payment by credit or cash on delivery  and never seem to know if they are getting a good value. It can also clearly, consumer will make the application helpful, went the management mall or outlet should have benefit more if they make it better.



















1. System hard to find product.
        - Not have comfort button for choosing and searching the product/items.
2. System is too messy.
        - The structure design of web is harder to learn by some consumer.
3. Difficult to know the cutting size.
        - Information of product/item is not really helpful.
4. Don’t know how to do payment.
        - Have the button to payment but not enough instruction how to use.


Proposed solution


For the proposed solution, we suggested the new system/application for online shopping. The system name is “Clothing online shop”. The kind of system is like the web page and the system is like the manual searching and still in system. 

Generally, the proposed is solution to the problems of: 

1. User-friendly.
        - Help first time user to use the system.

2. Assign category.
        - Help consumer to assign category.
3. Size chart.
        - Help consumer to check up the information of product.

4. Easy online payment.
        - Help consumer for apply online payment.


Target users


The main target of user for this system is consumers. They are very quietly for using the system. They come from athlete sport, housewife, student and businessmen or women.
Read More
Langgan: Catatan (Atom)