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
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.
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.
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.
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
6. SITE MAP
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.
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.
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.
Quick & Easy A/B Testing
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.
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.
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!
The Next Steps for The Mugdown
Develop Online Presence.
The vast majority of site views come from links on social media. Building a full online persona is key to further growing the site.
OFF THE WOOD
The site is a Responsive Web Design, but stakeholders are interested in seeing work on mobile only features.
Adding an easily editable calendar for upcoming events, promoting fan posts, and host more on-campus events.