Crossfit Journal: ReAmped
I explain the case study and re-design process of my Mag+ magazine, the Crossfit Journal.
I was challenged to take a second look at my Crossfit Journal Magazine, in the hopes to see the problems with it, then re-design it to create a better user experience. Basically swole and flexy, is getting swoler and flexier.
The first thing I did was go through and take a good look at my magazine, it has been about a year since first designing it. I was looking for things that weren’t consistent, that could be improved, and things I just didn’t like. There were a few things that I found I wanted to change just on my own opinion. But the next thing I did was a little user testing.
Most of the people I showed it to were wowed by the design and the interactivity. But I found that almost everyone who was just looking through it had a hard time navigating it, catching all of the interactive pieces, and getting the full effect. These were all things I wanted to change.
My Goals for the new magazine were:
1. Tone down the interactivity, and make each piece more consistent
2. Create a more consistent design with consistent interactive pieces so people know what to expect, and have an easier time navigating the magazine.
3. Have better instructions and navigation guide details that will allow people to learn what they are supposed to do within the magazine, and ensure they do not miss an interactive item.
4. Arrange articles in a way that makes more sense
With my goals in mind I did a little bit of inspiration surfing on pinterest, and began sketching. These sketches are not as in-depth as I usually like to go, but sketching just wasn’t helping me get my ideas out. I did as best I could to create some kind of launching point, but decided to dive in to digital design.
I decided to create a templet I was going to follow for each article to get that consistency I wanted. Basically the format was:
Title page — Video, and large header
Slider — Short explanation of article topic
2nd page — Interactive piece, usually using tapping and pop-ups
Slider — Bright colored to match the color from title page, with a photo underlay, and information about article topic
3rd page — Interactive piece, usually swiping or scrolling
When dealing with the actual visual design the first thing I wanted to do was create a better “title” page for each article. The old ones were hard to read, and had no interaction. I also wanted to scrap the idea of devoting one whole page at the bottom to a video. I decided to combine them, while including large text, and a vibrant color.
Before:
After:
The next thing I wanted to change visually was the in between sliders. I think they look boring and text heavy. I wanted to change the font and the layout I was using to make them seem more exciting so people were more likely to read them.
Before and After:
In order to make sure the interactions were simple and easy to understand, I decided to only use a few different types of interactivity. The first one being taps, to bring up pop-up, and the second one being swipe. I also laid-out some of the interactivity pages a little differently so that the content would be presented better. I also added clear instructions on every interactive page about what to do.
Pop-ups before and after:
Pop-up to Swiping before and after:
There were a few pieces I decided to keep that I liked, and thought were easy enough to follow. Most of them being the pop-up groups. I think those are a fun way to display information that most people will understand. But there was one item that I really liked that was one of the sore spots in the magazine’s usability. The timeline.
In the original magazine, users could swipe through the crossfit games timeline. Or it would swipe on it’s own, like a slide show after about 15 seconds. I liked the concept of the idea, but after thinking about it, 15 seconds might not be enough time for a person to actually read all of the information. It also might surprise people if it changed automatically. I think it is also confusing to swipe, because there aren’t many cues to do so, and a lot of the other interactive pieces have similar styles, but they are tapping pop-ups (Brooke Wells’ tips is one of them). I wanted to make sure that different interactive pieces would not get confused. Another huge pain point was that the timeline took up so much of the page, it was hard to swipe down to the next page. You have to place your finger at very specific places on the edge of the screen. I wanted to change this. In order to keep my interactions simple, I changed the timeline to a pop-up instead. I think this gives the user more control, and the pop-ups can take up a large piece of the page, without hindering page controls. The new timeline is also laid out differently, and has a bit larger text so that it is easy to read.
Before and After:
There were a few other things I changed, most of them being the wayfinding, and instructions. In the first magazine, I added little squares on the side of the page to indicate what page of the article you were in, I feel like most people didn’t understand this, and still got confused. As well as, when you swiped to a new page, a little indicator would flash on the left side of the screen as to what page you were on. Instead of this attempt of wayfinding, I decided to lay out the articles in a way that made more sense, and add large numbers on the title page to represent what article they were on. Then by setting up all the pages with the same template, I thought people would learn after the first two articles what to expect.
I also added up arrows to the sliders so people knew to slide up, and they wouldn’t just miss the content underneath. I think this helped a lot with showing people there was more content, and indicating to them that the articles had some kind of interactivity. I also added little icons to the instructions for each interactive piece in hopes of giving them something to remember when looking for interactive pieces.
By adding these icons, subtracting over complicated items and interactivity, and designing a new simplistic layout, the usability of my magazine shot up. Everyone I asked to used it caught all of the interactions, a few struggled with the beginning items, but once they got used to what to expect it was easy. One of my test users said that the navigation piece at the beginning was much easier to find, and she actually read through it, unlike the first one where she accidentally skipped over it.
The goals that I set for this re-design were met. I was very happy with the new piece, I was happier with the layout, the style, and more importantly I wasn’t trying to show off a piece that people were having difficulty working. As a UX designer, that is not something I want to be showing off to people as my work. But now, I can say I started with a bad piece, and ended with something that can really show off my work and understanding of a user experience and how to design a good one.
I think by reassessing your own work you can improve it greatly, and learn from past mistakes. It can help you get used to being critical of your own work, and working to improve it for better usability. I enjoyed re-working one of my old projects and getting to tweak it into something even better than before. Progress is the best way to improve usability, don’t be shy to look back on old work and see what can be done to improve it.
