Juxtapose: helping local newspapers go digital.
Simply navigating to many local news websites prompts a barrage of pop-up ads, autoplaying videos and an unorganized assortment of content. While local news is incredibly important for informing communities, many outlets do not have an optimal digital presence due to a lack of resources as the media landscape continues to shift.
By combining a well-designed website template and guides on how to create a good user experience, Juxtapose helps local news organizations connect with their readers. Designed specially for local news outlets and their readers’ needs, the Juxtapose WordPress theme will help increase and retain their audiences.
The guides are delivered in an enjoyable, clear way through well-organized text, illustrations and videos, ensuring busy local journalists can get the information they need quickly. Juxtapose provides these resources on a free and easily accessible platform to help local news survive and thrive.
With this combination, Juxtapose will help newsrooms grow their audience by making reading local news more convenient, enjoyable and informative.
Juxtapose is live at mynmi.net/emcapstone/21/juxtapose
“Getting the who, what, when, where, and why down in an article may not matter if the page takes forever to load. And a beautifully shot video won’t be seen if it’s broken up with distracting and irrelevant ads.” — Levi Gikandi, NYU News Literacy 2017
Juxtapose is all about the intersection of print and digital.
Juxtapose helps local newsrooms create informative, accessible and enjoyable web experiences. The goal of Juxtapose is to provide local newsrooms with the resources it needs to attract and keep readers, increasing their revenue so they can survive and thrive. Local news plays a vital role in our communities, and having a website readers enjoy visiting plays a role in newsrooms’ survival.
By giving local newsrooms the resources they need on a free, easily accessible platform, Juxtapose will prevent communities from becoming news deserts, ensuring residents can continue reading the comprehensive local coverage they rely on. And because the improved website Juxtapose provides will drive readership, it will create a more informed and engaged community.
Juxtapose accomplishes this through two complementary tools: a fully customizable WordPress theme, as well as a comprehensive UX guide, providing a one-stop-shop for creating a professional news website.
The Competition
There are several resources for journalism websites and strategy, they are either not free, such as Newspack; are application-only, like The Tiny News Collective; or supply templates that have UX issues, such as TownNews or Websites For Newspapers. There are also free UX and digital strategy guides available, but they are either not comprehensive or are not specific to journalism.
In a 2018 survey on the biggest challenges to creating good UX in local news websites, one respondent cited the lack of a comprehensive service.
“Not enough resources in a small operation to create that focus. Vendors do not have good info on best practices and leave to media companies to customize the experience.” — 2018 Innovation Index, Local Media Association
The UX Guide
With our guides, Juxtapose users can find everything they need to get up and running, including all the theme files, in-depth instructions on setting up a WordPress site and how to customize it to fit their needs. Users can easily go straight to lessons from the navigation bar or browse them from the homepage, getting more information on why they would want to learn this skill and an estimated time investment before diving in.
There are six modules currently published, walking users all the way through setting up a website domain for the first time and installing the WordPress theme to how to publish well-formatted articles so their readers have a good user experience.
The UX principles covered in the modules empower users to make customizations and experiment while having the knowledge to make sure they keep the good user experience Juxtapose is designed to have.
We also cover how to make sure their website is accessible to all readers, as well as provide a curated list of WordPress plugins to add other features to their site, making sure they are able to create a site that fits the needs of their community and their newsroom.
The information is presented in videos, illustrations and brief text, ensuring working journalists are able to quickly get the information they need while balancing their many other responsibilities.
They can easily get a live preview of the WordPress theme as well as download all the theme files, providing a one-stop-shop for launching their new website.
The UX guide was developed using the responsive Bootstrap framework, along with CSS and JavaScript elements like the wow.js animation library.
The WordPress Theme
The Juxtapose WordPress theme was created with a primary goal in mind: promoting a cleaner and UX-driven experience within the realm of digital news outlets. Not only does the theme enforce modern UX laws and improve the viewers’ experiences on news sites, but it also promotes a higher degree of efficiency and organization for the owners of each aforementioned news site.
WordPress was the best choice for Juxtapose because this content management system (CMS) has a beginner-friendly learning curve and is widespread, powering 1/3 of the websites found online today.
The theme was built using the responsive Bootstrap framework, ensuring mobile users are able to access the site, and has been developed within an IDE using PHP, HTML, CSS and JavaScript.
Roughly six-in-ten U.S. adults (57%) often get news through a mobile device, compared with 30% who often do so on a desktop or laptop computer. . . — Pew Research Center (2019)
Additionally, newsrooms can easily customize the theme to fit their needs using the WordPress platform, including the site logo, menus and a left sidebar that can be completely customized with widgets that meet their needs.
Design
Since we built a product for journalists and news readers, we shaped our brand around being professional and modern. Our emphasis on UX is subtly visualized in the logo by bolding “ux” of juxtapose.
We used relatively muted colors with variations for light and dark needs, ensuring our logo would always be accessible and legible. Similarly and to be professional, we used a relatively simple serif and sans-serif font, in addition to a font with character, Ambroise, used for the UX Guide. A more standard font, Sabon LT Pro, is used for news template, since traditional is more appropriate there.
Lessons Learned
Making It Customizable
After interviewing several journalists in local newsrooms, we added new features to the WordPress theme, most importantly improving the sidebar from this older iteration.
The sidebar is a vital component in allowing newsrooms to customize the site to meet their needs, offering many potential uses, including ad space, weather widgets, trending articles, community calendars, and many more.
By adding more widget spaces and improving the formatting, we made this section more functional. We also cleaned up the UX of this design, including by altering the spacing of the footer content.
Making It Comprehensive
We continued to improve the aesthetics, UX and content of the guides, including swapping out colors to make sure all text was consistently legible and editing for font consistency.
We also reorganized the order of the guides, making the flow more sensible and usable, including by moving Getting Started to the first position.
Additional content and further reading links were also added.
Making It Better
To find where we could improve Juxtapose and to make sure we are reaching both journalists and readers’ needs, we included both groups in our user testing. Five journalists walked through the guides and theme while completing tasks, and the five readers did the same for just the WordPress theme. Nearly all the tasks could be completed, with participants successfully completing 80% of UX Guide tasks and 100% of theme tasks. There were some clear areas of improvement for the UX Guide, as seen in the time on tasks table below (time shown in seconds).
We found that the theme design was aesthetically pleasing, easy to use and had all the elements readers and journalists expected it to have, while improving over other local news website designs the journalists were familiar with.
“It’s all divided into areas that make sense and makes it obvious where to find information.” — Local News Reader
“It has a clean design; it’s not distracting.” — Local Journalist
However, we found there were some improvements needed for journalists to make full use of the guides, such as clarifying terminology and making it less text heavy by adding videos and illustrations.
“Walkthrough videos would be a game changer in allowing this to be replicated in local newsrooms.” — Journalist & Professor
We also found that the responsiveness of both the guides and the theme needed improvement, as well as some other minor aesthetic tweaks. Because communities have different needs, it’s important that newsrooms are able to customize the theme features, however, our testing found it wasn’t always clear to journalists what they were able to change. In particular, some loved that the weather was prominently featured, while others thought it was prime real estate better utilized as ad space or other content, but that’s easily customizable. To solve this, we added more instructions in the guide and on the theme to help newsrooms quickly figure out how to make the theme fit their needs and brand.
We hope this product can be used by local newsrooms and by the Grady College of Journalism & Mass Communication, particularly for the Digital Natives program. More features to the WordPress theme could be added, in addition to guides on more relevant topics.
Meet the Juxtapose team
Ev
Lessons learned:
In helping tackle the challenge of building a WordPress theme nearly from scratch, I learned that it is much better to start from a place of solid background understanding than trying to piece it together bit by bit, particularly when it comes to new languages and systems. The new language of PHP and the fact that WordPress has a very unique file structure made reading up on the basics essential. After a couple failures, I dug into the documentation and I learned I was making the process more complex than WordPress could make it. Learning a new skill really takes patience and working step-by-step, and breaking it down that way made researching and developing this product exciting and enjoyable.
I also realized that since there are so many digital products and developers out there, it’s important to find where you’re needed and where you can provide a service, and I think we did that with Juxtapose. In developing our UX guide website, I also learned just how quickly you can get very comfortable with HTML, CSS and Javascript when you regularly write it for several months.
My Capstone journey:
As someone with a background in newspapers, helping create a resource for local journalism is an idea that excited me even as I prepared to apply to the Emerging Media program. I applied with the goal of learning more digital skills to apply to my continuing career in journalism after feeling I could make greater contributions through that rather than as a full-time reporter. Through the program, I fell in love with UX, data analytics and especially user research, in part because it utilizes so many skills I honed as a reporter and combines them with my desire to make journalism work better. I believe user research is vital in making news work better.
Advice for future cohorts:
Don’t rush through trying to understand big or new concepts. In taking your time, you’ll not only learn more, but you’ll save yourself extra work (and time).
Olivia
Lessons learned:
Two overarching lessons that I learned from our capstone journey are: the importance of frequent communication between team members and embracing the challenge of learning a new programming language.
Our group divided our capstone project into separate deliverables for each of us to work on individually. I ended up volunteering to develop and build our product–the Juxtapose WordPress theme. Even though the majority of my time was spent programming and testing it within a local server, I was still able to learn more about UX design principles and branding by participating in weekly Zoom meetings with my group. These meetings not only helped keep our workflow running smoothly, but they also enabled me to expand my depth of knowledge in other areas within our project.
Developing the Juxtapose theme from scratch also gave me the opportunity to work with a new language, PHP. While I have only worked with Node.js for back end web development, I was still able to navigate PHP and implement a functional WordPress theme. After doing so, I realized how important it is to have the ability of learning new technology on-the-job and successfully implementing it within a reasonable timeframe. Moreover, learning more about PHP and its functionality within a WordPress theme gave me a concrete idea of my self-efficacy when it boils down to learning and implementing a new language on the fly.
My Capstone journey:
My passion for web development sparked during my first Emerging Media class, New Media Production. Since then, I’ve been using HTML, CSS and JavaScript throughout my EM journey to build really cool projects within the EM program and on my own time. Being tasked with building the WordPress theme allowed me to polish my experience with HTML, CSS, JavaScript, and PHP.
Reflecting on my EM journey as a whole, I am eternally grateful for being exposed to a diverse skill set of UX design principles and web development. Having experience in both of these areas paved the way for me to accept an internship as the student web developer intern for the University of Georgia’s Department of Student Affairs. This position gave me the opportunity to work within a professional setting while utilizing my web development skills.
Advice for future cohorts:
Make sure to spend time carefully planning out your capstone project using a project manager (Trello worked well for my group). Second, if you feel like your capstone might require too much work, it most likely needs to reduce its breadth, unless you are working on a three-person team. Subsequently, if you are working within a group, meet at least once a week to discuss where each of you are within the project workflow and any deadlines for upcoming deliverables.
Alison
Lessons learned:
Throughout this project, I knew that frequent meetings would be incredibly helpful in holding me accountable. Especially with the modified class schedule, a lack of structure is often a recipe for disaster when it comes to my productivity. By meeting with my team frequently, both in-person as well as digitally, I was more productive and able to meet my individual goals.
Furthermore, not only did these meetings help me to meet my individual goals, it helped me to connect with my group and see how my teammates were doing. If any team member was overwhelmed, having frequent meetings helped me to see where I needed to step up and help out.
I also realized the importance of delegation and specialization. My teammates and I all have different strengths, and by delegating tasks and specializing in what we’re good at, we were able to create a product with many different facets. I’m really proud of the way we collaborated, and I think that each of our individual gifts were able to shine through in the final product.
My Capstone journey:
I came into the Emerging Media program with some experience in design. As I near the end of my EM journey, I have much more experience and feel more confident in my design skills. Learning how to use Adobe products has been a game changer for me. Even though I still have a lot to learn, I feel better equipped to create graphics, logos, or anything else I can imagine.
Prior to the Emerging Media program, I never put much thought into accessibility or user experience. Through my EM journey, I’ve found a passion for the kind of empathetic design that goes into good UX design.
Through this Capstone project, I’m so grateful that I was able to take the lead on design and branding. I feel that I was really able to focus on developing my skills in this area, and I understand what goes into developing a cohesive brand for a product. I’m also glad that I was able to spend time doing in-depth research for UX design. Because of this experience, I feel equipped to create user-centered products in the future.
Advice for future cohorts:
Like Olivia said: use a project manager!
If you’re working with a team, be sure to meet often and set small deadlines to stay on target. If you’re working alone, maybe consider finding another classmate who’s also working alone, so you can hold each other accountable to meeting the deadlines you’ve set for yourself. You’ll feel much better when you get to the end of the semester and you’ve made good progress on your project.
If you feel totally overwhelmed, consider reevaluating. If you’re working with a team, can you ask a teammate for help? If you’re working alone, do you need to pare down your project? It’s better to have something smaller and polished, than to have something ambitious, but incomplete.
Valuable Resources
The Interaction Design Foundation has many articles that give a comprehensive overview of many user experience topics.
typogui.de gives a great primer on appropriate typography, in addition to some design inspiration.
Laws of UX presents many of the theories behind UX in a really cool format.
StackExchange saves countless headaches. Nearly every web development question has been asked and answered there.
CodePen has user-uploaded coding projects, providing some great inspiration for web design, such as code blocks and dynamic gradients.
Curious? Here’s where to find us!
