Introduction

A NEW SOURCE OF COLLEGIATE SATIRE NEWS.

The Mugdown - Portfolio (2).png

WEbsite

THE MUGDOWN

Texas A&M University’s First Long-Running Satire Organization. 

The Mugdown was founded by students of the University
to challenge the thinking of the Texas A&M community by delivering relevant satirical news.
It is run by current students of the University as a primarily web-based publication, although they frequently branch out into live events and various forms of media including print, theatrical productions, YouTube, podcasts, and social media.

STARTING FROM SCRATCH

A NEW TAKE
ON SATIRE

Early in their development, they required an identity and website to bring the publication to life. After their first year establishing themselves, the organization had grown tremendously and was ready for an updated and redesigned website.

MY ROLE

I was a founding member and the organization’s first Editor-in-Chief. In addition to overseeing all content produced by The Mugdown, I was in charge of developing the website, managing content, and establishing the brand.

Read on for an overview of The Mugdown design process.

 
 
 
 
 
 
The Mugdown - Portfolio (2).png
 
 
 
 
 
The Mugdown - Portfolio (5).png

Brand Concept

DESIGNING FOR AN ESTABLISHED BRAND

For the new website, it was important to the organization’s members that a cutting edge design would be implemented. The new Mugdown would be a Responsive Website for the many mobile readers. Social Media sharing options would be pushed since that is where the vast majority of The Mugdown’s views come from and where virtually all the discussions of the articles’ content takes place; those conversations being a fundamental part of The Mugdown’s mission statement

The Founders & THOSE THAT INSPIRED THEM

INTERVIEWS WITH INSPIRING PEOPLE

We interviewed both the original founding members in depth and reached out to other popular satirical news organizations for input. As a new organization, it was always important to understand both what the founders were looking to accomplish and how others had accomplished those goals in the past. We reached out to the short-lived satire papers of Texas A&M’s past as well as the many well respected satire organizations that have been running for decades including The Onion, The Harvard Lampoon, The Yale Record, and The Texas Travesty.

Competitive Analysis

DRAWING INSPIRATION

In addition to interviewing other organizations, we looked at some of the major features they had implemented that The Mugdown had either already implemented themselves or were hoping to implement in the future.

1. Brand Attributes

Writing down what’s more than words

WHO IS THE MUGDOWN?

Moving forward with the redesign, we locked down what made The Mugdown the organization it was.

2. User Personas & User Goals

Next we looked at who were the people that were reading The Mugdown. Our primary persona was a current student of the university, but an unexpected secondary persona was the surprisingly large community of alumni that were using The Mugdown as a fun way to stay in the loop on current events at their alma mater.

3. Site Audit

Now it was time to get into more of the nitty gritty details. Who is The Mugdown’s primary demographic and what are some important behaviors they show? Additionally, what are the KPIs that The Mugdown has accomplished in its tenure?

During the research, we honed in on the largest issues that needed to be resolved and key areas we could improve. Once the problems were defined, it was time to start working on solutions.

We documented where we encountered these problems and how other sites were handling them. Lots of screenshots were taken and plenty of notes annotated.

4. Review User Needs

With the audit completed, we looked back at the original goals of our users and the stakeholders to make sure they all aligned with the improvements we were proposing. Once we knew we were on the right path, we could develop user stories.

 

5. USER STORIES

 
The Mugdown - Portfolio.png

6. SITE MAP

STRUCTURING CONTENT

CATEGORIZING ARTICLES

Now that we had a year’s worth of articles, we wanted to see which topics were the most popular we were writing on. To do that, we took our Top 25 most viewed articles and had users sort them into whichever categories felt they made sense.

STRUCTURING CONTENT

NEW MEDIUMS

In addition, we needed to better incorporate the many new branches of media The Mugdown was starting in addition to its traditional articles such as podcasts, YouTube videos, social media accounts, physical print newspapers, and an online shop.

STRUCTURING CONTENT

KEY PAGES

Finally, there were a number of key pages within the site that stakeholders wanted to push. You’ll see them marked in the annotations of the Site Map.

7. WIREFRAMING

Quick & Easy A/B Testing

PAPER PROTOTYPE

For the Paper Prototype, we tried out a couple options for each issue taking inspiration from multiple sources. After A/B Testing was complete, we chose the best fit to move forward into Low Fidelity.

RESPONSIVE WEB DESIGN

LOW FIDELITY WIREFRAMES

Since a huge proportion of The Mugdown readers are mobile users often coming from Twitter and Facebook, the site was designed to be a premiere Responsive Website through all the changes. These wireframes were drafted in Sketch and then uploaded into InVision for testing before being approved for a more high fidelity rendering.

FINAL STAGES

HIGH FIDELITY PROTOTYPE

This was the final stage before being handed off to the web developer. Color and images were used to create a realistic mock-up of the new designs.

FINAL DELIVERABLES

A COMPLETED PROJECT

We had our deliverables. We had valuable data from the Site Audit. We had high fidelity wireframes ready to show stakeholders and hand off to web developers. All that was left to do was finish writing up all we had done and summarize the next steps of where we all wanted to take The Mugdown!

Thanks for reading!

SENIOR BOOTS

The Next Steps for The Mugdown

The Mugdown - Portfolio (1).png

Develop Online Presence.

CAMPUS’ PULSE

The vast majority of site views come from links on social media. Building a full online persona is key to further growing the site.


Going Mobile.

OFF THE WOOD

The site is a Responsive Web Design, but stakeholders are interested in seeing work on mobile only features.


Getting Involved.

12TH MAN

Adding an easily editable calendar for upcoming events, promoting fan posts, and host more on-campus events.

The Mugdown - Portfolio (2).png

THANKS & GIG ‘EM!

The Mugdown - Portfolio (3).png