A design team was looking for people to redesign a website for UCSD and global news that would catered primarily to students but keeping in mind of the general population.
I first started with outlining the steps I believe were needed to create a feasible website design for Triton News Network. So I needed to do user research. As a person who
doesn't follow news in general, and especially TNN, I started with researching what exactly TNN was, what their demographic was, and what type of information were they discussing. Afterwards, I looked into the TNN’s targets users’ actions and opinions on a UCSD news website, The Triton, to see what components the target users’ liked and disliked. With this information, I then created target user personas for the new TNN website. For my last step, I designed the website, first as a sketch, then a wireframe, then as a prototype.
This was a great learning experience in designing my first news website. I was able to hone my skills in the design process of doing background research, conducting surveys,
and especially using Figma for prototyping. This case study made me really think about how news information should be received. For example, what information is first seen and
what information gets the user to read an article.
1. Background Research
So first off, I learned through Facebook and Google that TNN isn’t an already existent news website, but is rather a news television show that was produced by Triton TV.
The show was founded in 2010, whose mission according to Facebook is “to provide UCSD students with the best and most up to date news.” Their show was made primarily of youtube
videos of around 5 minutes long and discussed current and future events. Unfortunately, they only uploaded 5 videos, the most recent video uploaded on February 19, 2015.
Based on the Facebook mission statement and from their description on Youtube, “Welcome to TNN, a show dedicated to the latest news around UCSD, La Jolla, and the student body. A show for Tritons, by Tritons, produced by Triton TV!,” I understood that their intended audience is primarily targeted to UCSD students, but also potentially others, including alumni and students’ families.
Adding this information to the challenge prompt of creating a website that “delivers a new value to users in learning more about this brave new world,” and that focuses “on the larger and growing millennial audience, including those outside of the student demographic”, I figured that the stakeholders, UCSD students and non-UCSD students, need a website that looks at both local, global, and UCSD news in a way that is engaging to the more tech-exposed user of today’s tech era. The Triton, an existing UCSD news website, was a source I could expand on or take inspiration from in making my design. As of this redesign, they have updated their website.
2. User Survey
To get a general sample of opinions, I created a survey inquiring about personal experiences and preferences with news. For the sake of time, I presented the survey to a
class of primarily undergraduates through Piazza, and to friends and family through personal means. I acknowledged using friends and family may potentially produce bias, but I didn’t think it would be a huge issue because their answers are from their own personal experiences and it should not be affected from knowing me.
After the survey was closed, I collected the responses of 14 people and categorized them into two groups, 10 students and 4 non-students, since the target audience of the new website is primarily students, but with the addition of non-students. Afterwards, I coded the answers to find common trends found for each group. I discovered that students found their news information from mostly social media websites, such as, Facebook, Twitter, and Reddit, which had the highest count. On the other hand, non-students got their news mainly from more proper news sources, like CNN and Google News, but also from Youtube. Another thing I noticed was students mainly looked for news in the fields of politics, entertainment, and science, which makes sense since UCSD is a research-based school with a young adult demographic. Non-students had a more traditional view for news in the political, local, and catastrophic fields. The common ground of the two groups being that they mainly use technology for reading the news, phones being used the most. The attention span for reading an article is about 30 seconds to a minute. When looking at information, the image and title are what is seen first.
To get more specific opinions on how people navigated and preferred to see the news, for the sake of time, I did some user testing on 2 people, one student and one
non-student, from the surveys about Triton.news. I gave them 2 tasks that allowed them to traverse the main components of interest of the website, such as, the homepage, navigation bar, article list, and article. Throughout their navigation, I had them explain their thoughts and process, and asked them questions about their understanding and reasoning of the website’s design layout and their actions. I recorded my user test observations on a document.
Tasks:
Focusing on the homepage, learn about what the website entails
Questions asked: "How do you understand the content and layout of the navigation bar? homepage?
Read a news article not related to school
Questions asked: "How do you understand the content and layout of the article list? article?
After I conducted user testing, I learned some more about what the preferred website layout may be corresponding to the design of Triton.news. I recorded users being overwhelmed with the homepage for being too busy and crowded. Also, the navigation was confusing to them due to the names used, like “The Conch” and “Features.” Another issue users were encountering was news information. They had a hard time finding non-school related news because there were no indicators and no clear article organization. Good aspects to apply to my design are more prominent article tags, a better understood navigation bar, and a more logical organization.
4. Sketching
I created two sketches, one that seems more traditional and one that is more unique, keeping in mind the learned issues and preferences found from the survey and user testing.
The first sketch was created with inspiration from typical news websites, which tend to have a very large featured article and a smaller list of the rest. I also added the sidebar because it would’ve been empty space. I also believed adding a calendar for events would be useful for posting events, and including some sort of meme board would cater to the young audience wanting funny content.
The second sketch was created with more thought for the user’s issues with clutter, unclear navigation and understanding of a news website. I designed the news sections to be carousels for faster and more access to news articles without lengthening the page. The carousels also function as a more streamline, less cluttered, organization system for the different fields of news. In addition, from the surveys and user testing, images and titles were made more prominent. Also, a sidebar was added, but now with the addition of an announcement section and included social media to cater to the young audience.
5. Wireframe
For wireframing, I used Figma to create wireframes of the homepage, article list, and article page. I decided to use the second sketch because it was the most unique and
beneficial for having the effective carousel function. Through this process, I kept in mind what I found from the surveys and user testing. I expanded on my sketch by defining what items are in the navigation bar and basically what the article list and article page should look like, including adequate spacing, padding, and proper font sizing to keep the layout organized and clean. I ended up deciding to have UCSD, Local, and Global news as separate navigation bar tabs for clearer accessibility. I also designed the website, so when you are on the UCSD, Local, or Global page, it will show a collapsible sidebar, similar to the one on the homepage’s, but modified for the specific page. For example, the homepage would have general announcements, the UCSD page would have UCSD announcements, and so on. However, when on an article page, the sidebar changes to have a section to show related articles. Additionally, a function I included to the sidebar, is the ability to rearrange the sections based on preference. By clicking on the 3 bars next to the section title in the sidebar, you can move it up or down. This is to make the website more personalized to the user. Another thing that I implemented keeping in mind of my user research is having images first then titles for all of the articles in order to instigate interest. For the articles list, I also included a filter system that would allow for the user to choose what type of news they could see based on their tags and date posted.
For prototyping, I continued using Figma to color the wireframes with a bit of modification here and there. I specifically added more icons, changed some things around, and
swapped the images and Lorem Ipsum to actual images and sentences. The color scheme I chose to use was from inspiration of UCSD’s school colors, blue and yellow.
