How we redesigned the Paranormal
The New “New Dawn”: Responsive Editorial Redesign.
Have you ever wondered why reading your favorite magazine online can be such a tedious experience? Most website visitors will spend less than 15 seconds reading an article. We have all clicked on a catchy headline, read a couple of sentences and moved on soon after. Since editorial content plays such an important role in online life, my team and I worked on redesigning the editorial website, New Dawn, a magazine based in Australia, that focuses on the paranormal. In order to do so, we carried out research based on the already existing site by using tools as card sorting and content audits. This allowed us to build a concept that would define the look and feel of the new site. Then we proceeded to sketch several new ideas and to prototype. Finally we created a responsive version of our site by using HTML and CSS. I will now walk you through this process.
What Are We Working With?
Research: Content Audit
In order to answer that question, we first carried out a content audit: a listing of all the content of the website. We created a spreadsheet including the name of each page on the site, the name of the page on the navigation bar, the url, comments with characteristics of the page, the content of the sidebar and the content of the footer. Below is a sample table with the content audit of the first pages of our site.
While tedious, this tool was an important part of the redesign process. It allowed us to identify the relationship between pages in the existing site and hierarchies of the content. By doing this, we were immediately able to pinpoint a couple of the existing issues with the site:
- The New Dawn website has two navigation menus surrounding the header image. There does not seem a clear relationship between the pages in either menu.
- The use of the word “Subscribe” is not consistent throughout the site since in some cases it prompted users to subscribe to the newsletter and in others, users could sign up to receive the printed issue.
- The editorial sections containing the articles of the magazine are hidden undera submenu which is at the same level as other pages. The latter are not related to editorial content.
- The last two pages in the lower navigation menu, “Checkout” and “Cart”, lead to the same page.
- The menu bar is not fixed when scrolling down. This makes it hard for users to know where they are along their journey.
Research: Card Sorting
With these results in mind, we carried out an open card sorting test. We started out by writing down on post-its the words and categories that stood out the most from our content audit. We then gave the notes to volunteers who were asked to organize them in groups of their choosing. Finally, they labeled the categories they had created.
We repeated this process four times which allowed us to identify possible themes in common among the words we picked. Most of the participants grouped some tags such as “Mission Statement”, “Contact”, and “Copyright” under an “About” section. Additionally, most of them had a category for the call to action notes such as “Support”, “Submission” or “Contribution” and one for the different article themes. The volunteers did not make connections between the words in the upper navigation menu. Parting from our observations, we put together the site map below:
Based on these research results, we decided to focus on improving the following aspects:
- Create a visual hierarchy that allows for a logical distinction between the two menu bars.
- Fix the position of the menu bar so that the user’s navigation freedom improves.
- Make the article sections more visible by making them accessible from different parts of the site.
- Keep the magazine’s business model always in mind by repeating the “Subscribe” call to action several times through each page.
What Are Readers Looking For?
Concept and Style Tile
We proceeded by analyzing the core values of New Dawn in order to develop a visual brand that aligns with the magazine’s goals. We asked ourselves the following questions: What makes New Dawn different from other supernatural publications? Who are the readers and what are they looking for when they enter the website? We decided to brainstorm some keywords that could answer those questions for us.
These key concepts allowed us to define the New Dawn readership as follows:
A community of truth seekers who look for alternative facts transcending the mainstream.
We then came up with a style tile inspired by German Expressionism, HP Lovecraft and comic artists such as Mike Mignola.
The New “New Dawn”
Based on this concept, we set out to ideate, redesign and build three different pages of our magazine and a corresponding mobile versions: the home page, a section page and an article page.
In order to get there, we first sketched out our initial ideas, agreed on a basic wireframe structure and moved on to build the mid-fidelity prototypes for three different pages. Lastly, each members of our team presented an iteration of a high-fidelity prototype.
We then took the best parts of each design to come up with our high-fidelity prototype. For each page of the magazine, we kept in mind the key considerations we drew from our research: navigation menu accessibility, content availability and the visibility of the subscription mode. The diagrams below, show the progress from mid-fidelity wireframes to a hi-fidelity prototype for each of the screens we worked on. In doing so, we highlighted the design decisions we made around the considerations mentioned above.
With those three key features in mind, we carried out the following variations:
First, we rearranged the position of the icons on the header. We placed the hamburger menu above the title of the website as shown by design conventions. We soon realized that our “search” icon could not be surrounded by anything else. We needed to have enough space for an input field to appear when the user clicks on the magnifying glass icon. We also moved our shopping bag and subscribe call-to-action to the main navigation bar since both features lead users to different pages in the site, just like the other links on that menu do.
Second, we needed to find a way to highlight the contrast between the main content in our pages and the content in the side bar. By significantly decreasing the size of the thumbnails in the side bar, we managed to differentiate them from the other images on the page.
Third, on the homepage, we had placed a cream-colored bar with two CTA buttons prompting users to subscribe or donate. Since the bar interrupted the reading flow of the users, we decided to replace it with two square banners, one with the main content of the page and one on the side bar. This allowed for the commercial sections to blend in with the magazine’s content.
How Can We Use Our HTML And CSS Skills ?
Lastly, we translated our final design into HTML and CSS code. In order to do so, we divided our homepage into three make sections which were then divided into more containers. Each of then was turned into a flexbox by using the display:flex property in CSS.
In order to make our site responsive, we used the media query CSS rule. This allows you to apply styles under certain particular conditions. Below is an example:
#menu-categories{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}@media screen and (min-width:600px) {
#menu-categories{
flex-direction: row;
}
}
In the snippet above, the media query indicates that when the width of the screen is at least 600px, the children in the flexbox #menu-categories will be displayed in a row instead of in a column.
This experience was tedious but the result was quite satisfying. It proved to be a great exercise to better understand the role of developers and the hand-over process. We also learnt that a good design experience considers the developers’ tasks throughout the process.
Below is the code to the complete homepage:
What’s Next?
Among the initial goals we set ourselves, we managed to establish a visual hierarchy between the two navigation menus, we made the article sections more visible throughout the site and we repeated consistently the call-to-action “subscription” button. However, as next steps, we would still need to fix the position the of the main navigation menu so as to improve the user’s navigation freedom. Similarly, we would still need to create a prototype of the content of the hamburger menu. This would allow us to test how effective it is to have two different types of navigation menus. Lastly, it would be a productive exercise to finalize the code of the other two pages we designed: the article page and the section page.
Special thanks to my teammates, Lara Pérez and Yeray Aranega.
