Sergio Leon Lau Cosplay Photography I
E-Commerce Desktop Website
User Experience II - Summer 2016
E-Commerce Desktop Website
User Experience II - Summer 2016
Prototype, test it with real users, and iterate the design of a fictitious e-commerce website.
Needfinding
I enjoy photographing cosplayers because we can produce original and creative projects. After each convention, cosplayers learn better techniques to iterate their costumes. Buying new gear and materials can turn an expensive hobby for them.
The proposed e-commerce site allows the cosplayers' fans buy their photography. This does not only allow the cosplayers increase their fan base, but also find others way to keep funding their hobby.
- Main Target: cosplayers and photographer’s fans
- Problem: cosplaying can be an expensive hobby
- Solution: design an e-commerce site that sells cosplayers' merchandise and increase fan base.
- Solution: design an e-commerce site that sells cosplayers' merchandise and increase fan base.
Logo Creation
The intention of framing a mask inside the lens is to give the idea of a viewer seeing his/her own reflection wearing a super hero mask.
UX Evaluation Objectives
Here are the three questions I focused during the usability tests.
- Can the user find the product they want?
- Can the user add a product to the cart?
- Can the user checkout a product once it is on the cart?
- Can the user find the product they want?
- Can the user add a product to the cart?
- Can the user checkout a product once it is on the cart?
Approach on Assessment Test
I asked three friends to be my usability testers. Before the test started, I asked them about their background and online shopping behaviors. Later, I asked them to use think-aloud approach for the following tasks:
- 1 localize Batgirl character cosplay
- 2 enlarge and minimize Bat girl’s character picture
- 3 once Bat girl character is selected, choose Medium size and quantity 1; add Bat girl
- 3 once Bat girl character is selected, choose Medium size and quantity 1; add Bat girl
character to cart
- 4 go checkout page and fill out the from and pay
- 4 go checkout page and fill out the from and pay
At the end of the test I gave the testers a survey and asked them to rate how easy was to perform the previous tasks. The survey included numbers from 1-5. 1 representing very easy; and 5 representing very hard. I also asked their opinion why them picked those ratings.
Background Summary
Testers’ Background
A. Male/female?
B. Age Range
C. Do you go to school/work?
D. What are your favorites shopping websites?
E. How often do you shop?
F. What do you usually shop?
G. Do you use mobile or desktop for shopping?
H. How long does it take you to do a shopping session?
I. Any extra comment you want to share?
A. Male/female?
B. Age Range
C. Do you go to school/work?
D. What are your favorites shopping websites?
E. How often do you shop?
F. What do you usually shop?
G. Do you use mobile or desktop for shopping?
H. How long does it take you to do a shopping session?
I. Any extra comment you want to share?
Findings
1. localize Batgirl character cosplay without using the search bar
My first tester didn’t know how Batgirl looks like. I decided to show her and also the rest of the testers a picture of Batgirl before each usability test. Knowing that piece of information was crucial to perform that task. I learned I shouldn’t assume anything from my testers.
My first tester didn’t know how Batgirl looks like. I decided to show her and also the rest of the testers a picture of Batgirl before each usability test. Knowing that piece of information was crucial to perform that task. I learned I shouldn’t assume anything from my testers.
On one occasion, one of the tester found Batgirl within the carousel on the homepage. She was like “I found her” and clicked on her image several times. Since I didn’t assign any functionality on that image, it wasn’t reacting. I had to ask her to do another method to find her. I learned I should pay more attention to potential workarounds without its functionality.
2. enlarge and minimize Bat girl’s character picture
I believed it was intuitive on e-commerce sites to enlarge pictures by clicking on them, so I decided to not include a maximize icon. To my surprise all the testers had some trouble enlarging pictures. One tester mentioned he didn’t expect that functionality since he didn’t see it. Another tester, who didn’t see any maximize icon, started to click everywhere on the screen! The third tester was able enlarging the picture, but had trouble to minimizing it. To minimize the picture the user could click anywhere on the screen. That’s when I realized I shouldn’t take those icons for granted.
I believed it was intuitive on e-commerce sites to enlarge pictures by clicking on them, so I decided to not include a maximize icon. To my surprise all the testers had some trouble enlarging pictures. One tester mentioned he didn’t expect that functionality since he didn’t see it. Another tester, who didn’t see any maximize icon, started to click everywhere on the screen! The third tester was able enlarging the picture, but had trouble to minimizing it. To minimize the picture the user could click anywhere on the screen. That’s when I realized I shouldn’t take those icons for granted.
3. once Bat girl character is selected, choose Medium size and quantity 1; add Bat girl character to cart
Everyone completed this task without any trouble. According to them, this one was very clear.
4 go to checkout page and fill out the form and pay
It was really interesting that when I said: “Go to your cart” they all scrolled up, moved their mouse to the upper right and search for the cart link. It was like they were expecting it to see the cart link up there. The checking out portion was easy as well.
Improvements
Category page- Labels
I added two tabs to sort the cosplay characters by company brand (Marvel, DC). This will assists the users in searching characters by company brand. I also included the name of the character so they can be more identifiable.
I added two tabs to sort the cosplay characters by company brand (Marvel, DC). This will assists the users in searching characters by company brand. I also included the name of the character so they can be more identifiable.
Category page-Enlarge Button
The new version includes a more discoverable maximize icon.
Category page -Minimize Button
The new version includes a more discoverable minimize button when it is shown in a lightbox.
The new version includes a more discoverable minimize button when it is shown in a lightbox.
Shopping cart page- Order summary section and recommendations
I rearranged the Order Summary layout so it more noticeable. It also included Related Items for further impulsive shopping.
I rearranged the Order Summary layout so it more noticeable. It also included Related Items for further impulsive shopping.
Prototype
Below is the prototype of the e-commerce desktop site. The purpose was to explore how to locate Batgirl's photos, add them to the cart and check out. Click here to launch prototype
