Click the image above to be redirected to the website.
In August 2016, I was a volunteer on Staff for a Gaming Convention called Project Oracle. The organization that was running the Convention (Project Purple Wyld) had been hosting a small flourishing Anime Convention that attracted several thousand attendees every year. With the success of their first convention, PPW was in budget for a new convention, however, two months out from the date of the convention, they were still lacking an attractive, functional website.
I don't have an image of the first site that was created. Just imagine a bare-bones WordPress blog with Arial font.
I volunteered to take on the task of hashing out an attractive, functional site in a matter of weeks. (The sooner the better.)
I had to get a handle on what the convention team need their site to do. They needed their website to be the center-hub of information for the Con. They needed their website to catch people's attention and make them want to go! As the convention gets closer, content will be constantly updated and added, so it has to be easy to use from behind-the-scenes.
- The Ticket Purchasing Button should be easy to find and ticket purchasing a simple process from start to finish
- All Con information should be logically organized for the attendee to get information
- dealer and vendor information needs to be find-able and accessible by industry professionals
- The site has to stir up excitement!
Gaining Information about the Con: Attendees Visiting the Site look for:
* Event Details(Constantly Updated)
- Attendees and/or Attendee Parents
- Potential Artists and Dealers
- Industry Professionals
Since the site up to this point had been bare-bones, most of the information about the Convention had been hosted on several different Social Media sites (Twitter being the most popular.) My best bet was to use this to my advantage and embed the existing content into the site.
The team had also informed me that they wanted Artist and Dealer pages as well. All Artists/Dealers would have an image and a short description of what they sell. This helps advertise, keeps attendees informed, and generates content for the site.
With all this in mind, I started out planning how the site would look with the intention of coding it myself in HTML & CSS. (I had recently completed a Course on this.)
A Wire-Frame of the Front Page
I made a wire-frame of my intention. The front page was critical. With our audience fairly young (16-22) I needed to grab their attention right away, and keep them active exploring the site. The Convention was also lacking content(many events are added in the last month of the Con when they receive an influx of volunteers, and invitees confirm their invitations.) I wanted the front page to be a hub for all of the newest information, and filled with activities to generate excitement and FOMO.
The First Graphical Mock-Up of the Website
I added more color for the second iteration and rearranged the navigation links. Location appears on the front page now.
At this point, the site design was approved by the Convention Staff and looked good, but after several days of attempting to code a dynamic page using FlexBox, I realized that attempting to code the site entirely from scratch was going to take MUCH longer than I had anticipated. With my limited skills, I would have to spend hours re-writing the code for the site each time we needed to update it. It would also be difficult for anyone but myself to add content.
Instead, I used the original wire-frame and mock-up to create the site using the Web Development Platform, Wix.com which is very user-friendly and would be accessible to multiple members of Con Staff. Adding content was much easier, and I could assign users to groups, allowing different groups to edit certain aspects of the site.
Overall the website was a success, but the Convention a failure. Due to challenges negotiating between the Staff and Hotel hosting the event, the Con had to be canceled a week before the event.
The Full Website can be found here:
Project Oracle Fall 2016