An E-Commerce Site For Cosplay Costumes of All Sizes



Cosplay comes from Japan when someone dresses up as a character from a comic book or animation series. It is a large social community and strongly tied to a multimillion-dollar industry of comics and video games.

Luckily pre-made cosplay costumes are widely sold online now! Unfortunately, the size options are incredibly limited which leads to the problem below.


Cosplayers do not feel confident when purchasing cosplay costumes online due to limited sizing availability and information.


Develop an e-commerce website that offers a wide variety of sizing that better fulfill the needs of cosplayers who aren’t served by the current market’s offerings.

My Role: Researcher, Interaction Designer, Content Strategist, Information Architect

Duration: 2 Weeks

Platform: iOS

Tools: Sketch, InVision




Pain Points

Unclear images and at times inaccurate pictures of products create insecure purchasing experience

Lack of diverse body types represented in product image leads to self-consciousness of own body

Fears being laughed at or ruining the character they want to respect


"When you see famous cosplayers, a lot of them are really skinny"


"Even when the site offers XL, all they do is add extra fabric."

  • Interviews revealed that users shop at sites such as Mod Cloth or Charlotte Russe for their clothes. Why?
  • These sites have features that help users feel reassured and less self-conscious about their purchase (e.g. self reporting size purchases and varying model sizes)

Designing the Interface


Affinity Map helped focus what information goes on the product page

What would make Jessica feel reassured that she is spending her money wisely?

What can my site do to help alleviate her self-doubts on body image?

Key Take Away - This is more than just finding a size, this extends to self-doubt, body image issues, and lack of confidence


User Flow

This user flow represents the path Jessica would take from homepage to checkout completion.

Usability Test

Users' Positive Reactions:

  • Images with different sized models
  • Extensive size chart
  • Reviews with customers’ self-reported measurements and what size they bought

Users' Frustrations

  • Unsure if they added an item to their shopping bag
  • Felt insecure about inputting their credit card information for a site they don't trust yet
  • Did not like that they had to go all the way back to home page or search specifically for wigs or accessories that would go along with costume


  • Check Out Flow: Create a notification for customers to know they added a product to their shopping bag
  • Payment: Allow PayPal as an option to promote feeling of security and convenience
  • Content: Added suggested items that would go along with the cosplay costume




Hero Banner is rotating in a carousel fashion to showcase the site’s products.

Cosplayers like Jessica have a sharp eye and want to make sure that the site carries quality products before browsing further.

Product Page

Multiple images of different models wearing different sizes create visual empathy.

Size Chart.jpg

Size Chart

An extensive size chart shows that we are not going to let Jessica's body type get in the way of their cosplay dreams!

Product Review

Allowing customers to self-report their measurements and what size they bought helps build credibility in the site’s products.

It also adds another layer of empathy by showing someone who is not a model looking great in the costume as well.

Select Size.jpg

Select A Size

When Jessica selects the size she wants, the carousel will automatically flip to the image of the model wearing the size.

Shopping Bag (1).jpg

Shopping Bag

When Jessica reviews her shopping bag, she will see the image of the model wearing the size she is ordering.

Review Order

When Jessica reviews her order in the checkout process, she will once more see the image of the model wearing the size she is ordering.


The focus behind this design is repeated visual empathy that will constantly remind Jessica: "If she looks good wearing this, so will I."

Because by the time she clicks "Place Order", not only will she get the costume size she needs, she will also be more confident in her purchase.


Next Steps

  • Design a process flow where inputting body size will automatically update the entire website's inventory to show models wearing user's preferred size.
  • Build a presence in social media to better market to the cosplay community.


Don't Try To Solve World Hunger

A core issue that surfaced from understanding people who are unable to find clothes (let alone cosplay costumes) due to sizing limitations is body image.

Body image is a cultural issue that has deeply rooted itself in the cosplay community, and an e-commerce site with more sizing options isn’t going to solve that overnight.

Although design serves a purpose by solving problems, it also needs to have a focus.

Through thoughtful research, I chose to create a more confident purchasing experience by focusing on strategic image placement. Even though Jessica may still face the fears and doubts of putting herself out there when she does cosplay, at least she knows she has a space that supports her endeavors.


Onto the next case study!