The GameCon Awards Project
-
The Goal
The goal of the project was to create a functional prototype that closest represented a working desktop website and companion mobile website.
-
The Challenge
The challenge was making an engaging design that felt like it was targeting the proper audience - the video game player and over all Convention lover. I also wanted to take it a step further and create semi convincing alternate reality of games and celebrities.
-
My Role
UX Design
Research
User Testing
Graphics
Personas
The Personas represented in this project are synthesized from some friends and coworkers that love to go to conventions. I used the data from all of them to build. Most of the motivations were made to be more geared toward the website. The personas drove the design to be a little lighter and modern. Most the time I was thinking about Jimmy who wants eye candy but also wants to learn more about the show.
Sketches
It always starts with paper drawings, I can go faster and get features turning really quickly. I usually move to digital pretty quickly after, but being able to cut paper apart and create the parts helps out a lot when you just want the basis. My early ideas and concepts were pretty on par with what I found in my research later as somewhat “standard” layout for a convention or event.
Wireframes
Once I got into the wireframes I started to visualize a website with good color and popping graphics, and bold calls to action leading the user to the most important parts of the page per the client - Ticket Sales and Voting. I got most of the flow nailed in the wireframes, but the idea of leaving a small video link at the start of the page started to look cheap.
UI Designs and Testing
I started off wanting color popping, original graphics and a general different feeling theme than the utility feeling websites I was designing in classes were feeling. While the website flowed nicely the pages just looked amateur.
After feedback in user testing, the webpage looked kind of overwhelming and “not modern”. Working with new features in XD I created a quick video with some stock footage and set out to making the page feel darker and more pro.
The testers couldn’t believe it was the same page when they used it the second time. Over all I am very proud of the accents, logos and witty titles I came up with for some of the voting.
GCA Mobile Home
The Results
-
Checkout
The checkout is fast and clear.
-
Landing Page
My first was a dud. Injecting a nice pre-rendered slide show made the front page pop.
-
The Aesthetic
With a dark look and neon type piping I felt this was a much more appealing look.
Takeaways and Lessons
Follow my instincts in design - During this project I encountered a lot of setbacks in my user interface when balancing my mobile and desktop pages for continuity and consistency. I was following my instructor, so maybe this was part of the lesson they didn’t reveal.
Leave negative space - I don’t like negative space, it feels unused. But in this design after spreading out the content everything felt great. I think I could create even more space in some places now and not see it “under utilized”.
Don’t force aesthetics - Sometimes what you need is something simple. Taking away the busy colors and replacing them with solids and darker logo stamped really made the look more approachable.
Always find a way to react - I found the most engaging website experiences are those that feel organic. Like brushing your hands on grass and seeing it move, making the mouse bring that same sensation when browsing creates a better connection.
Thank you for catching up!
Home Screen Original
Home Screen Final
Ticket Purchase Original
Ticket Purchase Final