A journey through my process in redesigning the website of Brown University’s satirical publication (and attempts to stay earnest despite also designing for multiple layers of irony).

Context

The Brown Noser is a print and digital publication at Brown, published twice a semester and comprised of exclusively satirical content pertaining to campus happenings. As an avid enthusiast of The Onion’s articles, I’ve been a fan of The Noser since my freshman year, so I was definitely well-primed to choose its website as the target for my responsive .

Currently, the website boasts an extremely simple interface, mostly HTML text aligned with small images and basic CSS alterations to the color and layout.

Visual identity of the site as a whole.

Navigating the interface is pretty painless, apart from the logistical options, which rest as tiny minutiae in the top-right corner of the page. Overall, the text is very dense, and only some articles have photos to break up the text blocks. The landing page doesn’t really give users enough breathing room and the typeface and color choices could be more engaging. The site is also not responsive, making mobile and small browser access difficult.

Close-up of a category page (Campus Life). Note the small logistical nav-bar on the top right, and the dense concentration of text blocks.

Redesigning this site could potentially solve problems with low web traffic and increase the ease at which users can access Noser articles online, especially through mobile avenues. With such terrific content, the problem I am trying to solve is content accessibility: the publication just needs help with broadcasting the funny and engaging reporting it already does, which I believe a website redesign could do. However, before completely delving into different redesign options, I opted to do some research on what users are currently doing, and how best a redesign could solve the existing issues users are having with the site.

Research & Feedback

I knew that The Onion had done an extensive website redesign back in May of 2015, so I first set out to do some online research on the changes they had made, and the reasoning behind them. I was immediately inundated with articles on how The Onion had used its redesign to be sleeker and more user-friendly, but in a way that simultaneously mocked the inflated grandiosity of other large web redesigns (specific examples include The Atlantic or the Times).

Current category pages for The NYT and The Atlantic. Notable visual traits include: lots of white space, well-defined grids, dedication to images, and clear differentiation between headline and copy text; overall, this gives the user less of a crowded feeling.

In a Wired article from 2015, the design team at The Onion proclaimed other news sites’ interface facelifts (…interfacelifts? brb, calling Merriam Webster) to be “self-satisfied…[using grand language] to triumphantly announce the fact that they have bigger pictures on the page. It’s infantilizing the reader in a way.” Later on in the article, Cole Bolton, The Onion’s CEO, touches on the irony of the situation by noting that in order for this to work, The Onion’s redesign has to “mimic what everyone else is doing down to every level.” In short, subverting the self-important disruption of modern news sites meant redesigning an interface that reflected the exact creative choices of these sites.

The current landing page for The Onion (which obviously has many of the same elements listed for The NYT and The Atlantic, above).

I wanted to follow suit in a similar fashion when it came to redesigning for The Noser, at least when it came to front-end design decisions. Increasingly often, news sites emphasize an increase in white space and splashy typographic and dominant photo components, so I wanted The Noser to reflect that too. I’m definitely not edgy or cool enough to operate on as many layers of irony as The Onion seems to, but I still wanted to use similar reasoning to make decisions on how I wanted my redo of The Noser to look.

Since we recently had a Noser Day (December 7, 2018), the day on which Noser staff disperse print copies of the paper from well-trafficked campus locales, I took up the task of hanging around one of such locales (Faunce) to ask Noser readers about their opinion on the paper’s content dissemination, especially through online avenues. I quickly found the following to be true:

This feedback worked in tandem with the online research I did — people who read the Noser aren’t normally accessing the content through online avenues, but people who do feel that articles could be laid out in a more readable and accessible way. Redoing the interface to reflect contemporary design styles that most news sites are embracing seems like an apt way to solve this problem.

Design Choices

There were many facets to the actual redesign, of which I broke down and compartmentalized into four phases.

Phase 1: Wireframes & User Flow

I started out with low-fidelity wireframes, changing the skeleton of how articles are fundamentally laid out on each page. I made sure to give each article enough space around it so that the overall appearance would be less crowded. The user flow itself remained largely the same, since the functionality of the site is so baseline (which is how most people I talked to said they liked it). This also contributed to our goal of making the site more intuitive.

My proposed wireframes and user flow skeleton.

Phase 2: Visual Identity

To delve deeper into the visual changes, I completely changed the color scheme from a beige/tan color to a cleaner white and grey with a sharp splash of blue. I also altered the typeface choices to be more modern and offer more differentiation between headlines and article content. To refer back to my online research and fundamental goals, I wanted to mirror what many contemporary news sites are currently doing; this included the integration of sans serif typefaces and bright but sophisticated color palettes.

A hi-fidelity prototype for a visually redesigned version of The Noser’s “Campus Life” page, which lists articles that pertain to this specific category.

Additionally, I implemented a grid system in the landing page that transfers to the other pages as well, resulting in more whitespace. All these help in giving the user more reprieve as they browse the articles and the site as a whole, so they aren’t constantly inundated with large text blocks that can be overwhelming. The navigation flow remains primarily the same, but the navigation options are much clearer. I kept two separate navigation bars, one for filtering articles based on subject and one for logistical needs, but made both more visible. Ultimately all of these visual changes improve the site’s readability greatly.

Phase 3: Responsiveness

Finally, I made the site responsive for four different types of browsers: mobile, tablet, regular desktop, and widescreen monitor. For mobile and tablet, the navigation bars compress into a hamburger menu on the top right corner of the screen. The text grows and shrinks accordingly with each browser size (e.g. font-size changes to 20px instead of 12px on a widescreen monitor), and articles either stack or abide by row and column guidelines depending on browser size as well.

How the current version of the website resizes (not responsive).
How my redesigned version of the “Campus Life” browser resizes responsively!

To summarily justify responsive choices, each browser size has different requirements that allow the content on the site to continue to be accessible. In the of tablets and phones, text and image size (as well as the size of the combination of the two) are the main issue, since text that becomes proportionally smaller with the browser destroys readability. Thus, to combat this issue, I chose to stack the image and text in an article instead of positioning them side-by-side like in desktop and large-scale monitors. I also make minor adjustments, such as differentiating fixed text sizes as browsers size up and down or resizing the logo, to combat the same readability issues.

Phase 4: Linked Pages + Navigation

The final step in the redesign process was to finish the hi-fidelity prototypes for the four remaining pages in the example user flow using the reestablished visual identity, and link them through working navigation, which would allow a better sense of how the finished site would look, work, and feel. Here are three flows a user of the site could potentially seek out:

Simple flow from browsing homepage → selecting a category → selecting and reading an article within the category. Users can go back and forth using “back” buttons, or by clicking the logo.
Sample of a potential “search” flow.
Sample of a potential “logistics” flow.

Clearly, while the user flow remained consistent and easily learnable, something that didn’t deviate greatly from the old site, the visuals make the content much more readable and accessible. More white space and differentiation between typefaces clearly define each article, and the navigation options are evident at the very top.

With the change in visual identity and the integration of responsive resizing, the redesigned website for The Noser checked all the boxes that I set out to check: making a once-cramped website more eye-catching and easy to use and navigate through various interface alterations, ultimately creating a better platform from which to publish the satirical content so beloved by the Brown community.

Conclusion & Reflections

Through this process, the main lesson that hit me at every point of the process was the importance of having a reason behind every decision. The concept of redesigning a news site automatically led me through thought processes of contemporary sans serifs and large photos, but it wasn’t until I actually talked to potential users and did online research on best practices for this specific type of news site that I understood the nuances of what was best and WHY these elements are best. For instance, the addition of more white space around each article aids us in reaching our overall goal of better readability and thus content accessibility through the online platform.

The necessity for comprehensive reasoning behind each decision aligns well with the irony aspect of this redesign as well. Deciding to redesign a satirical publication, while also drawing inspiration from the redesigns of larger-scale satirical publications, resulted in benefits twofold. On one level, I was able to create an interface that greatly improved the cleanliness, visibility, and thus understandability of the online content in The Brown Noser. On another level, the design decisions I made not only served to make the website look and behave in a sleeker way, it also aligned well with the publication’s reputation for subversion and contention. By designing with the standards of modern news sites in mind, I was able to create a better-looking site for The Noser that also upheld the publication’s satirical mission of ironically poking fun at these very modern news sites. Quite a confusing sentiment to verbalize in the end, but one that overall contributes a better user experience from a multitude of perspectives.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here