Modernizing The University of Texas’ News Publication.
About the Project.
UT News is a users' home base for trustworthy news stories from (and about) the students, faculty and staff of The University of Texas at Austin. Stories include groundbreaking faculty research, personal stories about student experiences, and expert opinion pieces from scholars who weigh in on current events and trending topics.
I was asked to redesign and reevaluate the user experience of this news website, from research and analysis through final UI design.
The UT News team noticed a troubling trend in their analytics: news readers were jumping to a single UT News article from social media, skimming it, then leaving without exploring any additional content. These readers were also visiting for the very first time and they were never coming back. In other words, users weren't getting the context they needed to understand what UT News is/does, and the poor user experience of the site prevented them sticking around.
Here's what UT News articles used to look like:
So, how might we...
Create… a website that is a destination for the best, most relevant (and necessary) UT News content
For… general news readers in the Longhorn community and media/reporters
To… find interesting content to explore, consume, learn from, and share with their networks
And improve… the user experience of consuming, sharing, and trusting UT News content.
1. User Research
I created a survey for journalists and general Longhorn news readers because I felt it was crucial to better understand the following:
- Why are users coming to the site to begin with?
- What content are users consuming?
- How are they consuming content (i.e. skimming, etc.)?
- Do users trust this content?
- What pain points or frustrations are users experiencing during their journey?
- What do users intend to do with the content?
Unfortunately, due to time and resource restrictions, I was unable to access these users. My workaround was to conduct a cognitive walkthrough of the current site by examining FullStory sessions (screen capture playback software) and Google Analytics reports, in addition to general news industry data. This data helped me empathize with users and better understand their habits, instincts, and motives before moving into design.
2. Industry Research
I collected news industry data from Pew Research Center, NiemanLab, and Moovweb to understand the overall landscape a bit better before diving in.
U.S. adults tend to...
- consume news on mobile
- prefer reading (vs. watching or listening)
- arrive via the org website or social media
- forget which news org (but remember the social network they arrived from)
- bounce if an action is required
- avoid social sharing buttons
- share 1:1 with friends and family (iMessage, word-of-mouth, etc.)
3. Google Analytics Research
- Looking at: news.utexas.com
Timeframe: August 23, 2016 - August 23, 2017
- Audience: Global with 72% coming from the US
Google Analytics data was my guiding light for making design decisions that kept the user in mind. Click through the charts below to see some of my findings.
Users find the site via Google search, Facebook, or word-of-mouth.
Users are browsing and consuming news on mobile devices (specifically Apple).
Users are first-time visitors who read individual articles and never touch the news homepage.
4. Competitive Research (+ Analysis)
With “general news readers” as a primary user, UT News is competing for general time and eyeballs. This means technically ALL news sites are competitors. So, in order to aim high and be audacious, I looked to several best-in-class news sites for inspiration in addition to higher ed and healthcare.
I took a heuristic approach to this competitive analysis and rated each site on a 1-5 scale, 5 being the best. I went through each site and listed out pros, cons, specific notes that pertained to the UT News project, and scored on various categories such as accessibility, visual design, differentiators, multimedia, etc. I then averaged these scores to see a total percentage (maximum of 100%).
5. Initial Sketching and Ideation
After learning from the news industry overall, the current site, and a broad spectrum of competitors, I sketched out some initial ideas for news article pages. These sketches included a simplified navigation, full-width header image, sidebar, pull-quotes, end of article CTAs, and ways for users to continue exploring.
6. Low-Fidelity Wireframing
During the low-fidelity phase, I explored options for feature articles with several high-quality images through press releases that had no imagery. The biggest change between sketches and wireframes were simplifying the design even further and removing the sidebar. These low-fidelity wireframes (created in Sketch) went through several rounds of feedback with stakeholders before moving into final high-fidelity mockups.
7. High-Fidelity UI Design
The biggest change from low-fidelity to high-fidelity was the concept of "continuous scroll" into the next article. This next article would load partially to entice users to continue reading.
I also explored additional designs for every pathway a user could go down when clicking around the UT News site. One example of this includes curated topic pages; what happens when a user clicks on the topic tag on an article.
Here's what I updated to better match users’ instincts and habits in 2018:
Focus on the individual articles and how to find them.
- Removed clutter: sidebar, social sharing buttons.
- Clearly labeled topics/sections.
- Bold headlines.
- Full-width media, image galleries, and engaging pull-quotes.
- Mobile optimized.
- Contact information for media/reporters.
- Scroll directly into next [featured] article.
- Additional articles to continue exploring.
Get a minimum viable product (MVP) out the door and test it.
It's important to get a MVP in front of users so glaring issues can be worked out before the design is live. Ideally, this would happen with a small group of users before the site is launched.
Test again, once the design is live.
Once all users have access to the live design, there will be an opportunity to get feedback from a much larger group. I'd suggest user testing in-person to gain additional feedback, and also pay attention to how users are taking to the site via FullStory or other screen capture and heat mapping software.
Always be iterating.
Once the site has launched, we're done... right? Wrong. It's important to continue gathering feedback from users and pay attention to data and upcoming trends regarding the news and design industries. I'd suggest updating the site more regularly with small, incremental changes rather than a huge overhaul every few years.
Seen enough? Let's chat.