cosplay closet overwatch 2 logo
decorative jewel
Concept
App
decorative jewel
4 Days
decorative jewel
Solo Project
figma logo
Figma PROTOYPE
mockup of 2 screens for cosplay closet
line break divider
"Never accept the world as it appears to be. Dare to see it for what it could be."
-Winston
image of winston from overwatch
line break divider
What is Cosplay?

"It’s the ability to be whoever you want. It's expressive and it brings people together— it’s a community."

Cosplay is a DIY subculture where cosplayers recreate and dress up as their favorite fictional characters. Costume complexity and quality are only limited by one's creativity. This makes for endless possibilities.

line break divider
What is Overwatch?

Overwatch is one of today's most loved multiplayer first person shooter (FPS) games with over 1.7mil players daily, as of April 2023.

The game has 36 unique characters and there are over 574 hero skins to choose from. Each heroes have different backgrounds and demographics, making it widely inclusive for gamers and cosplayers around the globe.

line break divider
What's the problem?

When building a cosplay costume, people may have difficulty knowing where to begin and finding the best reference images.

Both novice and experienced cosplayers often find it challenging to portray Overwatch characters through cosplay. Currently, there is a lack of a centralized platform where individuals can gather, collaborate on character organization, and seek assistance in constructing their costumes.

image of overwatch cosplayers
Overwatch Meetup @AnimeExpo by Dallas Fuel on Twitter
line break divider
Interviewing Cosplayers

Actions:

• Scrounge for reference photos
• Ask friends and community for help/inspiration
• Utilize methods such as sewing, hot glue, thermoplastics, or purchasing props

Pain Points:

• Lack of available and detailed reference images
• Costumes often have many components
• Making costumes from scratch is time consuming depending on building process

line break divider
Empathy Mapping

Cosplayer #1

"For video games, I'll play and run around and take my own screenshots."

Cosplayer #2

"My problem is I don't know what I'm doing when making costumes."

line break divider
A new approach for cosplayers

• Organize heroes and projects
• Manage building progress
• Find detailed reference images
• Gain inspiration from the community

line break divider
Task Flow
Navigating from the login screen to view a character's specific item
line break divider
Honeydew Mei courtesy of Blizzard Entertainment
line break divider
Design Direction

1. Creating a sense familiarity for users

The visual design explored mimicking the Overwatch in-game UI for menu screens.

2. Body diagrams and detailed references images

Users need a one-stop option for viewing characters and objects to save more time for building

3. Categories of related content

Instructional videos, community-submitted photos, and links to purchase items are all ways to inspire and assist cosplayers to get started on their projects
line break divider
Imagining Mobile UI

Highlighted sketches to be implemented into final design

1. Login Screen
2. Main Menu
3. User's Menu
4. Hero Screen
5. Article Screen

line break divider
Hi Fidelity Screens
Home Screen

1. Cards mimicking Overwatch 2's current UI

2. Options: My Closet, Heroes Gallery, Cosplay World, Help Desk
My Closet

1. Users can start new projects and select from the list of heroes

2. Resume projects and view progress

3. View collection of liked/saved content and items
Hero Screen

1. Rotate, zoom in, reveal outfit articles

2. Select articles to view in detail and learn more

3. Checklist of articles to keep track of building progress
Article Screen

1.Rotate or zoom to see article in detail

2. Categorized related content
line break divider
Style Guide
text and colors style guide
line break divider
Idea for Concept

Aside from being an active Overwatch gamer, I drew inspiration from my own life.

1. Dressing up as favorite characters for Halloween
2. Enjoying digital fashion games

line break divider
Conclusion + Next Steps

Cosplay Closet was an exciting way learn about cosplay subculture and identify a new way to help the community.

If given more time to work, here are some things I would do differently:

1. Gain more insight.
Conducting more user interviews can give insights to help narrow down additional problems that hinder cosplayers.

2. Conduct user testing.
Allowing users to run through trial tests to uncover heuristic errors.
image of tracer from overwatch

Thanks for reading!