A Smashing Competitive Guide: Redesign
Explaining the redesign process of my MagPlus magazine, Smash 4: A Competitive Guide.
In my DGM3270 Digital Publishing II course at Utah Valley University, I was challenged to take a second look at an interactive publication that I had designed in a previous course—a whole year prior—in order to create an experience that is more robust and, well, better. This one-off publication was a sort of beginner’s guide to competitive Super Smash Bros. for Wii U, a game in whose competitive community I am involved in and actively participate in. And so, I set out to improve it.
Fun fact: I am actually currently number 2 on the game’s Power Rankings for the entire state of Utah.
Since it had been over a year since I last looked at my publication, I, of course, had to go through and take a look at my old friend and look for inconsistencies, lack of interactions where there perhaps could be some more, and things that just weren’t working towards the purpose of the publication. The overall visual design was there, but it was just lacking a few key ingredients to really make it something that gave at least a little delight to the audience who would go through it.
As such, my goals for the redesign of the publication were:
- Improve or add interactivity where things were simply too static
- Enhance the visual design with improved typography, color, and layout
- Rearrange articles and their contents so that they make more sense
- Include additional information, such as details about tournament-legal stages, in order to improve on the utility of the publication as a beginner’s guide to competitive Smash
With these goals fresh in my mind, I decided to do a bit of sketching as many people in creative industries do. At their core, these sketches were just a simple way of getting specific ideas out onto paper that I could morph and mold within the digital landscape of InDesign and MagPlus.
With the sketches done, I then moved into InDesign and MagPlus. I needed a way to explain the different topics involved in competitive Super Smash Bros. for Wii U, them now being the neutral game, zoning, edge-guarding, reads, and tournament-legal stages. I decided that each main section of the publication would follow a template of sorts:
- Color—Each individual section would have its own color associated with it, allowing readers to associate the colors with the different sections, giving them a way of more efficiently understanding where things are in the publication.
- Hero Page—Each article would have a hero page, with a video, a brief description of its topic, and a hero image background. The video would appear depending on the content.
- In-Depth Explanation Page—After the hero page, articles would have a page whose text readers can scroll through that gives a more detailed explanation of the topic at hand.
- Character Examples Page—Some of the topics could use characters as examples in order to better explain the topic. With these topics, I decided to include a page where readers can scroll through that would explain why those characters are such great examples of the topic being discussed.
- Stage Information Page—This page template would be for the Legal Stages section, in which detailed information about the different tournament-legal stages is given.
With respect to the Hero Page template, I decided that each topic—sans the Legal Stages page—would have a video and brief description of the topic. This was done in order to provide a simple, at-a-glance introduction to the topic. If the reader is interested in the topic, they can read the basic description, watch the video, and then move forward with the section. If not, then they can move on to the next section.
Additionally, all of the included videos each have colors within the actual video itself that match their respective sections’ color used within them. As stated above, this deliberate choice of color-coding the different sections was done to allow readers to associate the colors with the different sections and assist with wayfinding.
While my original publication had information on player-specific aspects of competitive Super Smash bros. for Wii U, I had left out a huge portion of its competitive nature: a list of the tournament-legal stages. As such, I decided to include such a list in my redesign. The hero page layout for the Legal Stages was fairly straightforward. However, for the actual list itself, I had to come up with a layout that felt consistent with the previous layouts in my publication. For the list, I decided to incorporate a blurry, dark background image for each respective stage, with its title and a “Go Here” button included. Additionally, I placed a banner on each stage that listed whether a stage was a Starter stage or a Counterpick stage, each one having a different use in competitive play.
Once the user decided to click on a particular stage’s “Go Here” button, it would take them to the stage’s individual page. Once pulled up on, an overview with detailed information about the stage would come into view with an interesting parallax effect. This interaction provided a consistent way for each stage’s information to be displayed while providing a novel, delightful way to display such information for readers.
My original publication had a table of contents; however, this table of contents was pretty barebones. While going through my original publication, I also realized that it didn’t have a proper introduction for potential readers. I thought that this was a bit of a problem, so with the redesign, I decided to design a page that incorporated the elements of both an introduction and a table of contents. This would kill both problems present in the original publication with one stone. The redesigned table of contents/intro page allows readers to vertically scroll through the 5 different topics on the right, offering a neat little bit of interactivity that not only works well, but looks great. If readers want to quickly jump to a specific topic, they can simply click on the “Go Here” button, which instantly takes them to their desired topic. Each topic frame is also complemented by their respective color found on the other pages.
One of the larger problems with my first iteration of my publication was that it was just a little too static and straightforward. While this is okay for a consistent, easy-to-use experience, it’s not-so-okay when a different and better solution could be used to further enhance the experience. For example, in the Character Examples pages in my previous publication, it was simply a static page that displayed the different characters. Not much information or interaction was given here. However, in my redesign of the publication, I decided to include a “Pull up” hint, which once pulled up, the “Characters With a Good Neutral” text would slide up—creating an effect of depth—and then the more detailed character info (pictured on the bottom right image) would smoothly slide into view. A small, simple solution like this created an interaction that added a sense of delight to the publication while giving readers more useful information than they previously had in the original publication.
Last, but certainly not least, to discuss is a redesign of the way that I chose to handle the In-Depth Explanation pages. Originally, each paragraph in this section had its own separate page. This meant that a reader would have to scroll and wait for the publication to bring up the new page, which made for a slow, clunky paragraph reading experience. Because of this, I decided to make the different paragraphs all part of one page that can simply be scrolled through. Not only did this make for a more quick and efficient experience, but it also provided a neat depth effect as the paragraph text scrolled through the subtle background text in the back.
In conclusion, relearning MagPlus and troubleshooting was definitely my least favorite (and most frustrating) part of this publication, but taking the time to critically think about my original publication, find problems with it, and improve upon these problems was a useful(and at times, fun) experience indeed. After all, this process of finding problems and reiterating in a positively progressive and useful manner is something that us as designers should strive for, even when it comes to our own designs. We shouldn’t get too attached to our designs; instead, slightly paraphrasing William Faulkner, we shouldn’t be afraid to “kill our darlings.” I am thankful for the opportunity to do such a thing.
