Redesigning San Diego Comic Con’s website to be user centric.
Challenging oneself is what brings true happiness.
Over the past 2 weeks, I challenged myself to redesign San Diego Comic Con’s (SDCC) website. Their current site is really cluttered and very hard for an average user to find the information they’re looking for within seconds. I wanted to see if I can fix this by making the site more user centric, cleaner, and still have a feeling of excitement and fun.
Researching the current site.
I studied Comic Con’s current site and quickly pointed out what rules of user experience (UX) they were breaking.
- The site has four navigation areas.
2. The main navigation bar is repeated on the left
3. A auto-playing image/content carousel. If you don’t yet know why image carousels are bad, visit shouldiuseacarousel.com.
4. No clear call-to-action. With so much clutter on the page, where is a users eyes supposed to go? It’s like a flea market and everyone is yelling for my attention!
5. Surprise dropdown and flyout menus.
Wireframe and UI element sketching.
For my first attempt on the redesign, I stayed within the mindset of, “Would this actually work for the Comic Con team?” “Would the team be able to update this layout quickly without the need of a graphic designer?”
I wanted to redesign the homepage by reorganizing the content elements that were already on the current homepage. So, I kept the carousel, the 2014 updates, the general information, and sponsors.
After the layout wireframes, I went in a little bit deeper by designing the UI elements like the menu bar, a notification bar, the update items, a carousel, the carousel tabs, and the title headers.
In my head, all of these sketches were awesome and I wanted to quickly head into the design phase. So I did some google image searching for assets and went straight into Webflow to design my masterpiece.
Time to head into the playground of Web Design.
With Webflow, I find it super easy to go from wireframing straight into designing. What you design inside of Webflow is exactly what you’ll see when you access it from a browser.
After I finished designing the desktop version, I took a step back and said:
“This looks like shit.”
The more I worked on it, the more I started to hate it and second guess myself. Why isn’t it looking as good as it did in my head?
“Feels way too wordpress-templatey.” — a youtuber
I went to find answers on Twitter, researched other websites, asked Reddit and asked my wife. The answers I got made me realize that my imagery was lacking and I was not pushing myself hard enough to think “outside of the box.”
More research.
After doing a quick Google search on terms like “SDCC redesign,” “San Diego Comic Con redesign,” and “San Diego Comic Con website redesign,” I found two other designers that made their own concepts.
Concept by Richard Nenoff
Concept by Emily Painter
For layout inspiration, I found a fellow Webflow designer, JP Teixeira create this beautiful IMDB prototype.
Wireframe and UI element sketching — take two.
For the second layout, I thought of a more grand experience. Something eye-catching that’ll wow the user in thinking “This site is so fun that I need throw money at my screen so I can get a badge.” When going for a more “grand” experience, I thought of utilizing the whole viewport and not limiting myself to the usual 960 pixel layout.
To make the site more lively I also thought of using the Pintrest/Windows 8 “start menu” type of feel with lots of imagery.
Going back into the playground.
More confident with the new idea, I headed back into Webflow to execute the new wireframe.
With the new layout and carousel done, I took a break. The design was “almost there” but I couldn’t figure out what was wrong with the carousel design. So naturally I asked Twitter.
Then a new friend I met earlier at a web design conference said:
I pondered that tweet for hours and sketched out other carousel layouts. It wasn’t until the end of the next day that I finally realized:
“Why the fuck do I even need a carousel?”
It was the image/content carousel that kept me thinking “inside the box” this whole time. By replacing it with the actual purpose of the convention itself and a clear call-to-action, I figured out the concept of my redesign.
Base the redesign around the fans of the convention and not the news.
I quickly looked up the mission statement of SDCC, shortened it to “Celebrating the historic and ongoing contribution of comics to art and culture,” and made that the first copy you see on the website. Backing up that statement, I added a short looping video clip by Sneaky Zebra. Combining these two elements finally made me love my design. Lastly, I added two call-to-actions that quickly spoke to the user. “Get a badge” and “Learn more.”
Having these four elements will quickly help the user understand the type of convention it is, what it is like to be there and how to get there.
Once I finished the layout and made it responsive, I published the site on Webflow and called it a day. I’m proud of my work and happy that I took on this challenge, even though there are those that would criticize and downvote it.
Lessons learned.
Anyone can redesign a site, but without a concept and great imagery, it will always fall flat. It doesn’t hurt to start from scratch multiple times. Research before designing goes a long way to help you understand real UX problems that a redesign should creatively solve.
When you design around the heart of a story, everything else will fall into place.
View final redesign here: http://sdcc2.webflow.com
