Cosplay Group Website
Skills: Website Design, UI/UX Design, CMS
Platform: WordPress
Introduction
The Mann Co. Cosplay Department website was created as a central hub for this fan run group. It’s a one-stop shop for the groups activities, photos, and information. I designed and created the entire website through WordPress. It was created with the groups current branding in mind, while also using more modern design and UX techniques.
The site is responsively design and works with modern design principles with both desktop and mobile design philosophies.
Brainstorm Process
Given this was being done in conjunction with a group that lacked UI/UX experience, I boiled down the ideation process into a barebones version that the group was able to directly work with me on. There were 3 steps in this part of the processed that I focused on: determining the MVP, blocking out the homepage design, creating the navigational flow.
With this simplified version, the group was able to contribute their own ideas of what they envisioned the site to be and hold. It came down to the following phrase: “A one-stop shop for the Mann Co. Cosplay Department!”
Photo Library
One of the biggest goals of this website was to act as a repository of the groups events photos. They wanted a single page to work as a home for all their event photos. So the home page for the event photos is a simple 3-block row of clickable thumbnails that redirect the user to the appropriate page.
The “Event Photo” pages work as a way to highlight the best photos the shoot had to offer, with an easy link to an off-site library of every photo from the event! This is done to minimize the amount of storage used on the website for high-quality photos.
Upcoming & Past Event Blog Posts
The group wanted a means of documenting their upcoming and past events. Given they often have multiple programs happening at one convention, they needed a way to visualize this with WordPress’s inherent blog function.
A simple cascading design was used for reusability and functionality purposes. It allows the group to easily slot in a visual, short description and relevant button link.
